flutter轮播图Banner功能开发

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

娶老婆

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

阅读量129

点赞数

分类专栏：学习文章标签： flutter

本文链接：https://blog.csdn.net/a646639956/article/details/115286209

版权

学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、在pubspec.yaml文件新增一行代码flutter_swiper:^1.1.4

2、运行并且安装swiper插件

3.打开首页，并且把该插件导入进来

  import 'package:flutter_swiper/flutter_swiper.dart';

4、准备三张图片

      List _imageUrls =[
          "http://laobantequan.oss-cn-shenzhen.aliyuncs.com/image/swiper/1609918789.png",
          "http://laobantequan.oss-cn-shenzhen.aliyuncs.com/image/swiper/1609138816.png",
          "http://laobantequan.oss-cn-shenzhen.aliyuncs.com/image/swiper/1609138824.png"
      ];

5、写上布局Column。Column下面有Container。并设置高度。

6、使用swiper插件

7、使用代码

body: Center(
          child: Column(
            children: <Widget>[
              Container(
                height: 160,
                child: Swiper(
                  itemCount: _imageUrls.length,
                  autoplay: true,
                  itemBuilder:(BuildContext context,int index){
                    return Image.network(
                      _imageUrls[index],
                      fit: BoxFit.fill,
                    );
                  },
                  pagination: SwiperPagination(),
                ),
              )
            ],
          )
        )