亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

flutter_swiper實現輪播效果

標簽:
Android

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(),//两侧箭头
          ),

看一下效果
alt

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消