Flutter實現輪播效果

1.導包

在pubspec.yaml中導入最新的flutter_swiper包，最新版本是1.1.6.

flutter_swiper: ^1.1.6
複製代碼

2.使用

預先準備幾張圖片路徑，這是使用wan安卓中輪播圖的API

List<Image> imgs = [
    Image.network(
      "https://wanandroid.com/blogimgs/8690f5f9-733a-476a-8ad2-2468d043c2d4.png",
      fit: BoxFit.cover,
    ),
    Image.network(
        "https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
        fit: BoxFit.cover),
    Image.network(
        "https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
        fit: BoxFit.cover),
    Image.network(
        "https://www.wanandroid.com/blogimgs/90c6cc12-742e-4c9f-b318-b912f163b8d0.png",
        fit: BoxFit.cover)
  ];
複製代碼

接下來經過flutter_swiper的幾個核心屬性配置輪播圖

child: Swiper(
            itemWidth: double.infinity,//寬度
            itemHeight: 200,//高度，若是Swiper外層爆過了其餘容器，而且也設置了寬高，那麼itemWidth和itemHeight是沒有效果的
            itemCount: imgs.length,//輪播圖的數量
            itemBuilder: (BuildContext context, int index) {
              return imgs[index];
            },//使用預先定義好的Images列表構建輪播項
            autoplay: true,//是否自動輪播
            pagination: new SwiperPagination(builder: SwiperPagination.dots),//指示器樣式，默認是小圓點，能夠設置fraction、rect等形式
            control: new SwiperControl(),//兩側箭頭
          ),
複製代碼

看一下效果