flutter 自动轮播翻页

最新推荐文章于 2024-09-26 07:45:11 发布

氤氲息

最新推荐文章于 2024-09-26 07:45:11 发布

阅读量405

点赞数

分类专栏： flutter 文章标签： flutter android

本文链接：https://blog.csdn.net/weixin_44911775/article/details/128548240

版权

flutter 专栏收录该内容

146 篇文章 1 订阅

订阅专栏

该代码段展示了如何在Flutter中使用flutter_swiper库创建一个带有null安全的图片轮播器。它包括自动播放功能，自定义布局选项来调整图片的位置、不透明度和大小，并使用AssetImage显示图片。

摘要由CSDN通过智能技术生成

flutter_swiper_null_safety: ^1.0.2

            Container(
                                  width: WidgetAdaptation.getWidth(70 * 5),
                                  height: WidgetAdaptation.getWidth(70),
                                  margin: EdgeInsets.only(
                                      top: WidgetAdaptation.getHeight(5)),
                                  child: Swiper(
                                      itemCount: avatarList.isEmpty
                                          ? 1
                                          : avatarList.length,
                                      autoplay:
                                          avatarList.isEmpty ? false : true,//自动播放
                                      itemWidth: WidgetAdaptation.getWidth(70),//每个图片的大小
                                      layout: SwiperLayout.CUSTOM,//有DEFAULT, STACK, TINDER, CUSTOM，一般用CUSTOM自己调参数
                                      customLayoutOption: CustomLayoutOption(//这个就是CUSTOM的方法了，可调位置偏移，不透明度，大小，翻转
                                              startIndex: 2, stateCount: 7)
                                          .addTranslate([
                                        Offset(-WidgetAdaptation.getWidth(90),
                                            WidgetAdaptation.getHeight(0)),
                                        Offset(-WidgetAdaptation.getWidth(70),
                                            WidgetAdaptation.getHeight(0)),
                                        Offset(-WidgetAdaptation.getWidth(40),
                                            WidgetAdaptation.getHeight(0)),
                                        Offset(WidgetAdaptation.getWidth(0),
                                            WidgetAdaptation.getHeight(0)),
                                        Offset(WidgetAdaptation.getWidth(40),
                                            WidgetAdaptation.getHeight(0)),
                                        Offset(WidgetAdaptation.getWidth(70),
                                            WidgetAdaptation.getHeight(0)),
                                        Offset(WidgetAdaptation.getWidth(90),
                                            WidgetAdaptation.getHeight(0)),
                                      ]).addOpacity(
                                              [0, 1, 1, 1, 1, 1, 0]).addScale([
                                        0,
                                        0.8,
                                        0.9,
                                        1,
                                        0.9,
                                        0.8,
                                        0
                                      ], Alignment.center),
                                      itemBuilder:
                                          (BuildContext context, int index) {
                                        return Container(
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(50),
                                              border: Border.all(
                                                  width: 2.r,
                                                  color: Colors.white)),
                                          child: PhysicalModel(
                                              color: Colors.transparent,
                                              borderRadius:
                                                  BorderRadius.circular(50),
                                              clipBehavior: Clip.antiAlias,
                                              child: Image(
                                                  image: AssetImage(
                                                    avatarList[index],
                                                  ),
                                                  width: 79.r,
                                                  height: 79.r)),
                                        );
                                      })),