flutter中利用Swiper实现轮播并加入listview实现类豆瓣电影列表页

最新推荐文章于 2024-08-09 08:11:18 发布

zhakesipailuo

最新推荐文章于 2024-08-09 08:11:18 发布

阅读量2.3k

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/zhakesipailuo/article/details/89642765

版权

本文介绍了如何在Flutter应用中使用Swiper组件创建轮播图，并结合ListView构建类似豆瓣电影的列表页面。通过在pubspec.yaml添加第三方库，创建轮播资源和布局，定制列表项的Card组件，最终实现完整的界面展示。

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

本文将实现如下图所示的页面：
整体布局上通过column包括两部分内容；
（包括：上部分的轮播图的实现+下半部分listview实现数据的展示（自定义itemview））
在这里插入图片描述
第一部分：Swiper实现轮播图：
flutter可通过第三方插接快速实现界面功能的开发，例如swiper轮播图的实现：
步骤如下：
1 在pubspec文件中加入必要的插件名称，通过提示同步获取到第三方的库文件。
2 创建轮播资源和轮播布局，核心代码如下；

Container(
                height: 200,
                child: Swiper(
                  pagination: //添加标记码
                      SwiperPagination(alignment: Alignment.bottomCenter),
                  autoplay: true,//设置自动播放
                  itemCount: imageUrls.length, //设置item的个数
                  itemBuilder: (BuildContext context, int index) { //设置item的内容
                    return Image.asset(
                      imageUrls[index],
                      fit: BoxFit.fill,
                    );
                  },
                ),
              ),

3: 准备单个listitem的布局：
通过定义一个方法设置具体的item布局，返回值类型为card，方便在listview中添加：

Card getitem() {
    var row = Container(
      margin: EdgeInsets.all(4.0),
      child: Row(
        children: <Widget>[
          ClipRRect(
            //裁剪一个矩形图片
            borderRadius: BorderRadius.circular(4.0),
            child: Image.asset(
              "images/img06.png",
              width: 100,
              height: 150,
              fit: B