Flutter 插件筆記 | 輪播圖 flutter_swiper |

機(jī)緣巧合，我了解到 packages 下的輪播組件 swiper，記錄一下。

?packages 鏈接：flutter_swiper
?Github 鏈接：best-flutter/flutter_swiper

Get

?在項(xiàng)目目錄中的pubspec.yaml文件中的dependencies里導(dǎo)入flutter_swiper: ^1.1.6。運(yùn)行flutter packages get。

dependencies:
   # 最新的版本，版本會(huì)迭代，需保持最新的
   flutter_swiper: ^1.1.6

屬性解讀（常用）

Swiper(
  scrollDirection: Axis.horizontal,// 方向 Axis.horizontal  Axis.vertical
  itemCount: 4, // 展示數(shù)量
  autoplay: true,// 自動(dòng)翻頁
  itemBuilder:(){...},// 布局構(gòu)建
  onTap:(){...}, // 點(diǎn)擊時(shí)間
  pagination: SwiperPagination(), // 分頁指示
  viewportFraction: 0.8, // 視窗比例
  layout: SwiperLayout.STACK, // 布局方式 
  itemWidth: MediaQuery.of(context).size.width, // 條目寬度
  itemHeight: MediaQuery.of(context).size.height, // 條目高度
  autoplayDisableOnInteraction: true, // 用戶進(jìn)行操作時(shí)停止自動(dòng)翻頁
  loop: true, // 無線輪播
  indicatorLayout: PageIndicatorLayout.SLIDE, // 指標(biāo)布局 試了半天也沒試出來這是啥
)

使用示例

?在這展示幾個(gè)小栗子，可直接拿去復(fù)制。

?示例一 四張圖片 自動(dòng)翻頁 左右控制按鈕 頁面指示器（點(diǎn)）


?去掉control:屬性，圖上的左右控制翻頁按鈕就會(huì)消失了。

Container(
  height: ScreenUtil().setHeight(300), // 高度 插件 flutter_screenutil
  child: Swiper(
    scrollDirection: Axis.horizontal,// 橫向
    itemCount: 4,// 數(shù)量
    autoplay: true, // 自動(dòng)翻頁
    itemBuilder: (BuildContext context, int index) {
      return Image.network("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=500542857,4026327610&fm=26&gp=0.jpg",
        fit: BoxFit.fill);
    }, // 構(gòu)建
    onTap: (index) {print('點(diǎn)擊了第${index}');},// 點(diǎn)擊事件 onTap
    pagination: SwiperPagination(// 分頁指示器
      alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
      margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),// 距離調(diào)整
      builder: DotSwiperPaginationBuilder( // 指示器構(gòu)建
        space: ScreenUtil().setWidth(5),// 點(diǎn)之間的間隔
        size: ScreenUtil().setWidth(10), // 沒選中時(shí)的大小
        activeSize: ScreenUtil().setWidth(12),// 選中時(shí)的大小
        color: Colors.black54,// 沒選中時(shí)的顏色
        activeColor: Colors.white)),// 選中時(shí)的顏色
    control: new SwiperControl(color: Colors.pink), // 頁面控制器 左右翻頁按鈕
    scale: 0.95,// 兩張圖片之間的間隔
    ),
 ),

?示例二 四張圖片 自動(dòng)翻頁 頁面指示器（數(shù)字）

Container(
  height: ScreenUtil().setHeight(300), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal,// 橫向
    itemCount: imageList.length,// 數(shù)量
    autoplay: true,// 自動(dòng)翻頁
    itemBuilder: (BuildContext context, int index) {return imageList[index];},// 構(gòu)建
    onTap: (index) {print('點(diǎn)擊了第${index}');},// 點(diǎn)擊事件 onTap
    // 分頁指示器
    pagination: SwiperPagination(
        alignment: Alignment.bottomRight,// 位置 Alignment.bottomCenter 底部中間
        margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),// 距離調(diào)整
        builder: FractionPaginationBuilder( // 指示器構(gòu)建
          color: Colors.white,// 字體顏色
          activeColor: Colors.yellow, // 當(dāng)前的指示字體顏色
          fontSize: ScreenUtil().setSp(30),// 字體大小
          activeFontSize: ScreenUtil().setSp(35),// 當(dāng)前的指示字體大小
        )
    ),
    scale: 0.95,// 兩張圖片之間的間隔
  ),
)

?示例三

Container(
  color: Colors.black,
  padding: const EdgeInsets.only(top: 10),
  height: ScreenUtil().setHeight(380), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal, // 橫向
    itemCount: 4,// 數(shù)量
    autoplay: true,// 自動(dòng)翻頁
    itemBuilder: (BuildContext context, int index) {// 構(gòu)建
      return Container(
        margin: const EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3932546523,304539533&fm=26&gp=0.jpg'),
                     fit: BoxFit.fill),
                borderRadius: BorderRadius.all(Radius.circular(10))),
      );
    },
    onTap: (index) {print('點(diǎn)擊了第${index}');},// 點(diǎn)擊事件 onTap
    pagination: SwiperPagination( // 分頁指示器
        alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距離調(diào)整
        builder: DotSwiperPaginationBuilder(
          activeColor: Colors.yellow,
          color: Colors.white,
          size: ScreenUtil().setWidth(15),
          activeSize: ScreenUtil().setWidth(25),
          space: ScreenUtil().setWidth(10),
       )),
    viewportFraction: 0.8,// 當(dāng)前視窗展示比例 小于1可見上一個(gè)和下一個(gè)視窗
    scale: 0.8, // 兩張圖片之間的間隔
  ),
)

?示例四


?代碼中的_imageHttpsList是一個(gè)存儲(chǔ)了四個(gè)圖片鏈接的List：

Container(
  color: Colors.black,
  padding: const EdgeInsets.only(top: 10),
  height: ScreenUtil().setHeight(380), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal, // 橫向
    itemCount: _imageHttpsList.length,// 數(shù)量
    autoplay: false,// 自動(dòng)翻頁
    itemBuilder: (BuildContext context, int index) {// 構(gòu)建
      return Container(
        margin: const EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(_imageHttpsList[index]),fit: BoxFit.fill),
            borderRadius: BorderRadius.all(Radius.circular(10))),
      );
    },
    onTap: (index) {print('點(diǎn)擊了第${index}');},// 點(diǎn)擊事件 onTap
    pagination: SwiperPagination( // 分頁指示器
        alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距離調(diào)整
        builder: FractionPaginationBuilder(
          activeColor: Colors.yellow,
          color: Colors.white,
          fontSize: ScreenUtil().setSp(15),
          activeFontSize: ScreenUtil().setSp(25),
       )),
    viewportFraction: 0.8,// 當(dāng)前視窗展示比例 小于1可見上一個(gè)和下一個(gè)視窗
    scale: 0.8, // 兩張圖片之間的間隔
    layout: SwiperLayout.TINDER,
    itemWidth: MediaQuery.of(context).size.width,
    itemHeight: MediaQuery.of(context).size.height,
  ),
)

?示例五


?這里面有個(gè)很神奇的地方itemWidth: MediaQuery.of(context).size.width - 100，以后某些特殊的寬度可以這樣設(shè)置。

Container(
  color: Colors.black,
  padding: const EdgeInsets.only(top: 10),
  height: ScreenUtil().setHeight(380), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal, // 橫向
    itemCount: _imageHttpsList.length,// 數(shù)量
    autoplay: false,// 自動(dòng)翻頁
    itemBuilder: (BuildContext context, int index) {// 構(gòu)建
      return Container(
        margin: const EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    _imageHttpsList[index]),
                fit: BoxFit.fill),
            borderRadius: BorderRadius.all(Radius.circular(10))),
      );
    },
    onTap: (index) {print('點(diǎn)擊了第${index}');},// 點(diǎn)擊事件 onTap
    pagination: SwiperPagination( // 分頁指示器
        alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距離調(diào)整
        builder: FractionPaginationBuilder(
          activeColor: Colors.yellow,
          color: Colors.white,
          fontSize: ScreenUtil().setSp(15),
          activeFontSize: ScreenUtil().setSp(25),
        )),
    viewportFraction: 0.8,// 當(dāng)前視窗展示比例 小于1可見上一個(gè)和下一個(gè)視窗
    scale: 0.8, // 兩張圖片之間的間隔
    layout: SwiperLayout.STACK,
    itemWidth: MediaQuery.of(context).size.width - 100,
    itemHeight: MediaQuery.of(context).size.height,
  ),
)

?示例六


?這個(gè)只是把示例五的scrollDirection改成Axis.vertical。

Container(
  ...
  child: Swiper(
    scrollDirection: Axis.vertical, // 豎向
    ...
  ),
)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在過去七年里，作為Hotwire.com的聯(lián)合創(chuàng)始人和房地產(chǎn)資訊網(wǎng)站Zillow的首席執(zhí)行官（注：zillow相當(dāng)...
    米逍遙閱讀 838評(píng)論 0贊 0
  • 陽氣上升，萬物復(fù)蘇 生生不息，又是輪回 減去冬藏，復(fù)又春歸 死去活來，來來回回 阿彌陀佛，阿彌陀佛 自然而然，不已己悲
    雨墨_1eac閱讀 294評(píng)論 0贊 3
  • 家電家具大家覺得階梯電價(jià)土豆燉雞東京鐵塔到家太多太多6健康6記憶猶新九陰真經(jīng)有辛苦辛苦也許可以7kkkkkkkkk...
    1f55b75e5847閱讀 227評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容