前言
介绍几个比较有不错的轮播库
swipe_deck
与轮播沾边,但是更多的是一种卡片式的交互式界面设计。它的主要概念是用户可以通过左右滑动手势浏览不同的卡片,每张卡片上都有不同的信息或功能。
Swipe deck通常用于展示图片、产品信息、新闻文章、社交媒体帖子等。用户可以通过滑动手势快速浏览不同的卡片,并可以选择喜欢的内容进行进一步互动,比如点击卡片获取更多详细信息、分享内容或执行特定的操作。
官方地址
https://pub-web.flutter-io.cn/packages/swipe_deck
安装
dart
flutter pub add swipe_deck
示例
dart
class SwitcherContainerState extends State<SwitcherContainer> {
// 图片列表
List<String> names = ['a1.jpg', 'a2.jpg', 'a3.jpg'];
@override
Widget build(BuildContext context) {
return Center(
child: SwipeDeck(
// 开始位置
startIndex: 1,
// 空指示器
emptyIndicator: const Center(
child: Text('Nothing Here'),
),
// 卡片排列的角度
cardSpreadInDegrees: 5,
onSwipeLeft: () {
print("左滑");
},
onSwipeRight: () {
print("有滑");
},
onChange: (index) {
print("序号:$index");
},
//列表
widgets: names
.map((e) => GestureDetector(
onTap: () {
print("点击了:$e");
},
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'lib/assets/img/$e',
fit: BoxFit.cover,
),
),
))
.toList(),
),
);
}
}
如果想要变成轮播可以设置一个定时器来改变当前激活项,指示器什么的可以自己做一个放在卡片上面。
Card Swiper
用于创建具有卡片式交互界面的滑动效果。它使用类似于左右滑动手势的方式,让用户可以浏览不同的卡片内容。Card Swiper可以用于创建类似于Tinder应用程序的滑动卡片效果,也可以用于展示图片、信息、商品等内容。
官方地址
https://pub-web.flutter-io.cn/packages/card_swiper
安装
dart
flutter pub add card_swiper
示例1
dart
Center(
child: Swiper(
// 列表数
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Image.asset(
'lib/assets/img/${names[index]}',
fit: BoxFit.fill,
);
},
// 页码(指示器)
pagination: const SwiperPagination(
// 指示器样式,默认是点,可以选择dots、fraction、rect
//builder: SwiperPagination.rect,
// 也可以使用官方提供的类自定义,有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilder
builder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),
// 初始位置
index: 0,
// 是否自动轮播
autoplay: true,
),
)
示例2
dart
Center(
child: Swiper(
// 列表数
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Image.asset(
'lib/assets/img/${names[index]}',
fit: BoxFit.fill,
);
},
// 页码(指示器)
pagination: const SwiperPagination(
// 指示器样式,默认是点,可以选择dots、fraction、rect
//builder: SwiperPagination.rect,
// 也可以使用官方提供的类自定义,有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilder
builder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),
// 初始位置
index: 0,
// 是否自动轮播
autoplay: true,
// 布局样式
layout: SwiperLayout.TINDER,
itemWidth: 240,
itemHeight: 300,
),
)