flutter 轮播图

最新推荐文章于 2024-08-09 08:28:38 发布

yinyiYi159

最新推荐文章于 2024-08-09 08:28:38 发布

阅读量450

点赞数 1

文章标签： dart flutter

本文链接：https://blog.csdn.net/yinyiYi159/article/details/107555981

版权

引言：记录一下flutter的学习成果，今天来写flutter实现的轮播图
1，首先添加依赖
在这里插入图片描述
2.使用起来很简单

 Swiper(
                  itemCount: swiperDateList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ClipRRect(
                        borderRadius:
                            BorderRadius.circular(ScreenUtil().setHeight(30)),
                        child: Image.network(swiperDateList[index]['image'],
                            fit: BoxFit.fitWidth));
                  },
                  pagination: SwiperPagination(),
                  autoplay: true,
                ),

完整代码

//首页轮播组件
class SwiperDiy extends StatelessWidget {
  List swiperDateList;
  // SwiperDiy({Key key, this.swiperDateList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: Provider.of<TrendListProvider>(context, listen: false)
            .getBannerList(),
        builder: (context, snapshot) {
          swiperDateList =
              Provider.of<TrendListProvider>(context).swiperDateList;
          if (snapshot.hasData||(null!=swiperDateList&&swiperDateList.length>1)) {
            if (null == swiperDateList || swiperDateList.length < 1) {
              return Center(
                child: Text('Loading...'),
              );
            } else {
              return Container(
                height: ScreenUtil().setHeight(364),
                width: ScreenUtil().setWidth(690),
                margin:
                    EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(30)),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                        Radius.circular(ScreenUtil().setHeight(30)))),
                child: Swiper(
                  itemCount: swiperDateList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ClipRRect(
                        borderRadius:
                            BorderRadius.circular(ScreenUtil().setHeight(30)),
                        child: Image.network(swiperDateList[index]['image'],
                            fit: BoxFit.fitWidth));
                  },
                  pagination: SwiperPagination(),
                  autoplay: true,
                ),
              );
            }
          } else {
            return Center(child: Text('Loading...2'));
          }
        });
  }
}

效果图：
轮播效果图