flutter:轮播

前言

介绍几个比较有不错的轮播库

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,
      ),
    )
相关推荐
Jinkey13 小时前
FlutterBasic - GetBuilder、Obx、GetX<Controller>、GetxController 有啥区别
android·flutter·ios
Summer不秃17 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰17 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
sunly_17 小时前
Flutter:AnimatedSwitcher当子元素改变时,触发动画
flutter
AiFlutter17 小时前
Flutter封装Coap
flutter
旭日猎鹰1 天前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰1 天前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神1 天前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱1 天前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart1 天前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter