flutter listview 横向展示很多头像,屏幕中间头像最大,其他头像依次变小,举例中心越远,头像越小,给出代码示例
时间: 2023-08-16 13:06:38 浏览: 185
要实现这个效果,可以使用 `ListView.builder` 和 `Transform.scale` 来实现。具体步骤如下:
1. 使用 `ListView.builder` 构建一个可以水平滑动的列表视图。
2. 在 `ListView.builder` 中使用 `Transform.scale` 对子组件进行缩放,根据子组件相对于屏幕中心的距离设置不同的缩放比例,例如中心位置的缩放比例为 1.2,两侧的缩放比例为 0.8。可以通过 `MediaQuery.of(context).size.width / 2` 计算屏幕中心位置。
以下是示例代码:
```dart
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
double distanceFromCenter = (index - _currentIndex).abs().toDouble();
double scale = 1 - (distanceFromCenter / 10);
if (scale < 0.8) {
scale = 0.8;
}
return Padding(
padding: const EdgeInsets.all(8.0),
child: Transform.scale(
scale: scale,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/id/$index/200/200',
),
fit: BoxFit.cover,
),
),
),
),
);
},
onScrollNotification: (notification) {
if (notification is ScrollUpdateNotification) {
setState(() {
_currentIndex =
((_currentIndex + notification.scrollDelta / 80) % 10).toInt();
});
}
return true;
},
)
```
这样就可以实现屏幕中间头像最大,其他头像依次变小的效果了。其中 `_currentIndex` 是当前屏幕中心位置的索引,它可以在 `onScrollNotification` 中通过滑动偏移量计算得出。
阅读全文