前言

介紹幾個(gè)比較有不錯(cuò)的輪播庫(kù)

swipe_deck

與輪播沾邊，但是更多的是一種卡片式的交互式界面設(shè)計(jì)。它的主要概念是用戶(hù)可以通過(guò)左右滑動(dòng)手勢(shì)瀏覽不同的卡片，每張卡片上都有不同的信息或功能。

Swipe deck通常用于展示圖片、產(chǎn)品信息、新聞文章、社交媒體帖子等。用戶(hù)可以通過(guò)滑動(dòng)手勢(shì)快速瀏覽不同的卡片，并可以選擇喜歡的內(nèi)容進(jìn)行進(jìn)一步互動(dòng)，比如點(diǎn)擊卡片獲取更多詳細(xì)信息、分享內(nèi)容或執(zhí)行特定的操作。

官方地址
https://pub-web.flutter-io.cn/packages/swipe_deck

安裝

flutter pub add swipe_deck

示例

class SwitcherContainerState extends State<SwitcherContainer> {// 圖片列表List<String> names = ['a1.jpg', 'a2.jpg', 'a3.jpg'];@overrideWidget build(BuildContext context) {return Center(child: SwipeDeck(//  開(kāi)始位置startIndex: 1,//  空指示器emptyIndicator: const Center(child: Text('Nothing Here'),),//  卡片排列的角度cardSpreadInDegrees: 5,onSwipeLeft: () {print("左滑");},onSwipeRight: () {print("有滑");},onChange: (index) {print("序號(hào)：$index");},//列表widgets: names.map((e) => GestureDetector(onTap: () {print("點(diǎn)擊了：$e");},child: ClipRRect(borderRadius: BorderRadius.circular(10),child: Image.asset('lib/assets/img/$e',fit: BoxFit.cover,),),)).toList(),),);}
}

如果想要變成輪播可以設(shè)置一個(gè)定時(shí)器來(lái)改變當(dāng)前激活項(xiàng)，指示器什么的可以自己做一個(gè)放在卡片上面。

Card Swiper

用于創(chuàng)建具有卡片式交互界面的滑動(dòng)效果。它使用類(lèi)似于左右滑動(dòng)手勢(shì)的方式，讓用戶(hù)可以瀏覽不同的卡片內(nèi)容。Card Swiper可以用于創(chuàng)建類(lèi)似于Tinder應(yīng)用程序的滑動(dòng)卡片效果，也可以用于展示圖片、信息、商品等內(nèi)容。

官方地址
https://pub-web.flutter-io.cn/packages/card_swiper

安裝

flutter pub add card_swiper

示例1

Center(child: Swiper(// 列表數(shù)itemCount: 3,itemBuilder: (BuildContext context, int index) {return Image.asset('lib/assets/img/${names[index]}',fit: BoxFit.fill,);},// 頁(yè)碼（指示器）pagination: const SwiperPagination(//  指示器樣式，默認(rèn)是點(diǎn)，可以選擇dots、fraction、rect//builder: SwiperPagination.rect,//  也可以使用官方提供的類(lèi)自定義，有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilderbuilder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),//   初始位置index: 0,// 是否自動(dòng)輪播autoplay: true,),)

示例2

Center(child: Swiper(// 列表數(shù)itemCount: 3,itemBuilder: (BuildContext context, int index) {return Image.asset('lib/assets/img/${names[index]}',fit: BoxFit.fill,);},// 頁(yè)碼（指示器）pagination: const SwiperPagination(//  指示器樣式，默認(rèn)是點(diǎn)，可以選擇dots、fraction、rect//builder: SwiperPagination.rect,//  也可以使用官方提供的類(lèi)自定義，有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilderbuilder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),//   初始位置index: 0,// 是否自動(dòng)輪播autoplay: true,//  布局樣式layout: SwiperLayout.TINDER,itemWidth: 240,itemHeight: 300,),)