flutter使用轮播图插件
Smoothness 2023/2/22 FlutterFlutter-Package
flutter配置轮播图。
# carousel_slider (opens new window)
# version: 4.2.1
# CarouselSlider 是 carousel_slider 插件提供的一个轮播图组件。该组件可以实现一些常见的轮播图效果,例如无限循环、手势滑动、自动播放等。下面是这些参数的具体说明:
{
items:轮播图中的子项列表。
options:控制轮播图效果的选项,包括以下属性:
height:轮播图的高度。
aspectRatio:轮播图的宽高比。
viewportFraction:每个子项的宽度占轮播图宽度的比例,取值范围为 0.0 到 1.0。
initialPage:初始显示的子项的索引。
enableInfiniteScroll:是否启用无限循环。
reverse:是否反向轮播。
autoPlay:是否自动播放。
autoPlayInterval:自动播放间隔时间。
autoPlayAnimationDuration:自动播放切换的动画时间。
autoPlayCurve:自动播放切换的动画曲线。
enlargeCenterPage:是否放大当前选中的子项。
enlargeFactor:当前选中的子项放大的比例。
onPageChanged:当子项切换时的回调函数。
scrollDirection:轮播图滚动的方向,可以是水平或垂直方向。
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 使用
CarouselSlider(
options: CarouselOptions(
height: 130.0,
viewportFraction: 1,
autoPlay: true
),
items: carouselImgUriList.map((item) {
return Builder(
builder: (BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
child: Image.network(
item['userPhoto'],
fit: BoxFit.fill,
)
);
},
);
}).toList(),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20