Swipe 轮播
代码演示
基本用法
dart
Swipe(children: [
buildCarouselBox(0),
buildCarouselBox(1),
buildCarouselBox(2),
]),自动轮播
dart
Swipe(
count: 3,
autoplay: const Duration(seconds: 3),
builder: (index) => buildCarouselBox(index),
),无限滑动
dart
Swipe(loop: true, children: [
buildCarouselBox(0),
buildCarouselBox(1),
buildCarouselBox(2),
]),监听 onChange 事件
dart
Swipe(
loop: true,
onChange: (index) => ToastStatic.show(
context,
message: "onChange: $index",
),
children: [
buildCarouselBox(0),
buildCarouselBox(1),
buildCarouselBox(2),
],
),自定义滑块大小
dart
Swipe(padEnds: false, viewportFraction: 0.8, children: [
buildCarouselBox(0),
buildCarouselBox(1),
buildCarouselBox(2),
]),自定义指示器
dart
Swipe(
loop: true,
indicator: (e) {
return Positioned(
right: 10,
bottom: 10,
child: Container(
padding: const EdgeInsets.all(10),
color: TailColors.gray_400.withAlpha(0xAA),
child: TailTypo()
.text_color(TailColors.gray_100)
.Text("${e.active}/${e.total}"),
),
);
},
children: [
buildCarouselBox(0),
buildCarouselBox(1),
buildCarouselBox(2),
],
),API
| Props | 类型 | 描述 |
|---|---|---|
autoplay | Duration | 自动播放间隔时间，默认 0 不自动播放 |
duration | Duration | 轮播速度，默认半秒 |
initialIndex | int | 初始位置 |
height | double | double Function(BoxConstraints con) | 高度，或以宽度取高度；与 aspectRatio 互斥 |
aspectRatio | double | 宽高比，与 height 互斥 |
indicator | Widget | Widget Function({active, total}) | 当前位置指示器 |
gesture | bool | 允许手势切换 |
loop | bool | 循环切换 |
count | int | 滑块数量，配合 builder 使用 |
viewportFraction | double | 滑块大小 |
onChange | Function(int index) | 切换时触发 |
children | List<Widget> | 滑块列表，与 builder 互斥 |
builder | Function(int index) | 构建滑块，与 children 互斥 |
padEnds | bool | 紧凑滑块，配合 viewportFraction 使用 |