筆記-Flutter之輪播圖（多樣式）

時間 2019-11-30

標籤筆記 flutter 樣式简体版

原文原文鏈接

樣式一

先看效果圖：ios

這是最終的實現效果，下面仔細看一下實現方式

實現方式

引入`flutter_swiper`庫

flutter_swiper利用的是這個庫，能夠實現多樣式的佈局。先說說庫的導入。以前的文章有提到過本地圖片的加載方式，是進入到pubspec.yaml文件裏添加，同時，引入三方庫也是同樣。數組

找到這個地方，增長一行代碼

flutter_swiper: ^1.0.6bash

而後到項目的目錄下運行下面命令行 (這個過程可能會等一會，反正我是等了一會)app

flutter packages getide

等到提示完成的時候，那麼這個庫就導入完成了，下面看具體的實現。oop

具體代碼實現

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';    // 引入頭文件


class SwiperView extends StatefulWidget {
  @override
  _SwiperViewState createState() => _SwiperViewState();
}

class _SwiperViewState extends State<SwiperView> {
  // 聲明一個list，存放image Widget
  List<Widget> imageList = List();

  @override
  void initState() {
    imageList
    ..add(Image.network(
      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2726034926,4129010873&fm=26&gp=0.jpg',
      fit: BoxFit.fill,
    ))
    ..add(Image.network(
      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3485348007,2192172119&fm=26&gp=0.jpg',
      fit: BoxFit.fill,
    ))
    ..add(Image.network(
      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2594792439,969125047&fm=26&gp=0.jpg',
      fit: BoxFit.fill,
    ))
    ..add(Image.network(
      'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=190488632,3936347730&fm=26&gp=0.jpg',
      fit: BoxFit.fill,
    ));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black12,
      appBar: AppBar(title: Text('輪播圖'),),
        body: ListView(     // 這裏使用listView是由於本地寫了幾組不一樣樣式的展現，太懶了，因此這裏就沒有改
          children: <Widget>[
            firstSwiperView()
          ],
        )
    );
  }
  
  Widget firstSwiperView() {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 50, 0, 5),
      width: MediaQuery.of(context).size.width,
      height: 300,
      child: Swiper(
        itemCount: 4,
        itemBuilder: _swiperBuilder,
        pagination: SwiperPagination(
            alignment: Alignment.bottomRight,
            margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),
            builder: DotSwiperPaginationBuilder(
                color: Colors.black54,
                activeColor: Colors.white
            )
        ),
        controller: SwiperController(),
        scrollDirection: Axis.horizontal,
        autoplay: true,
        onTap: (index) => print('點擊了第$index'),
      ),
    );
  }
  
  Widget _swiperBuilder(BuildContext context, int index) {
    return (imageList[index]);
  }
}
複製代碼

下面介紹一下幾個經常使用的Swiper屬性：佈局

Swiper({
    this.itemBuilder,
    this.indicatorLayout: PageIndicatorLayout.NONE,
    ///
    this.transformer,
    @required this.itemCount,                               // 個數
    this.autoplay: false,                                   // 是否自動播放，默認false
    this.layout: SwiperLayout.DEFAULT,                      // 設置樣式，後面會介紹，default就是上面輪播的樣式
    this.autoplayDelay: kDefaultAutoplayDelayMs,
    this.autoplayDisableOnInteraction: true,                // 用戶拖拽的時候，是否中止自動播放
    this.duration: kDefaultAutoplayTransactionDuration,     // 動畫時間，默認300.0毫秒
    this.onIndexChanged,                                    // 當用戶手動拖拽或自動播放引發下標改變的時候調用
    this.index,                                             // 初始播放輪播時的下標位置
    this.onTap,                                             // 點擊輪播的事件
    this.control,                                           // 分頁按鈕（通常是左右或上下兩邊的箭頭按鈕）
    this.loop: true,                                        // 無限輪播模式開關
    this.curve: Curves.ease,                                // 動畫的方式
    this.scrollDirection: Axis.horizontal,                  // 滾動方式
    this.pagination,                                        // 分頁指示器（下面跟着滾動的點）
    this.plugins,
    this.physics,
    Key key,
    this.controller,
    this.customLayoutOption,

    /// since v1.0.0
    this.containerHeight,
    this.containerWidth,
    this.viewportFraction: 1.0,
    this.itemHeight,
    this.itemWidth,
    this.outer: false,
    this.scale,
    this.fade,
  })
複製代碼

分頁指示器pagination

分頁指示器繼承子SwiperPlugin，設置SwiperPagination()展現默認分頁動畫

const SwiperPagination(
      {this.alignment,                          // 修改指示器的位置，默認bottomCenter（上面gif修改了這個屬性）
      this.key,
      this.margin: const EdgeInsets.all(10.0),  // 分頁指示器與容器邊框的距離（意味着可隨意改變它的位置）
      this.builder: SwiperPagination.dots});    // 默認的分頁指示器的樣式：SwiperPagination.dots(點形式)、SwiperPagination.fraction(分數形式)，也可徹底自定義哦

  Widget build(BuildContext context, SwiperPluginConfig config) {
    Alignment alignment = this.alignment ??
        (config.scrollDirection == Axis.horizontal
            ? Alignment.bottomCenter
            : Alignment.centerRight);
    Widget child = Container(
      margin: margin,
      child: this.builder.build(context, config),
    );
複製代碼

SwiperPagination.dots(點形式)

pagination: SwiperPagination(
            builder: DotSwiperPaginationBuilder(
                color: Colors.white70,              // 其餘點的顏色
                activeColor: Colors.redAccent,      // 當前點的顏色
                space: 2,                           // 點與點之間的距離
                activeSize: 20                      // 當前點的大小
            )
        )
複製代碼

效果如圖： ui

SwiperPagination.fraction(分數形式)

builder: FractionPaginationBuilder(
          color: Colors.white,
          activeColor: Colors.redAccent,
          activeFontSize: 40
        )
複製代碼

效果如圖：this

徹底自定義

pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return CustomPagination();
        }
    )
複製代碼

分頁按鈕control

分頁按鈕也是繼承SwiperPlugin，設置SwiperControl()展現默認控制按鈕。

const SwiperControl(
      {this.iconPrevious: Icons.arrow_back_ios,         // 上一個的Icons
      this.iconNext: Icons.arrow_forward_ios,           // 下一個的Icons
      this.color,                                       // 按鈕顏色 （默認爲主題色）
      this.disableColor,                                // 禁用色（字面意思，說真的，我也不知道這貨幹嗎的😊）
      this.key,
      this.size: 30.0,                                  // 控制按鈕的大小，默認30.0
      this.padding: const EdgeInsets.all(5.0)});        // 控制按鈕與容器的距離（位置隨意咱們安排😂）
複製代碼

效果如圖：

以上基本的控件和屬性說完了，下面重點來了啊，如何利用上面說的這些知識實現不一樣樣式的輪播圖。

樣式二

實現代碼：

Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Container(                     // 用Container實現圖片圓角的效果
            decoration: BoxDecoration(
              image: DecorationImage(
                image: secondImageList[index],  // 圖片數組
                fit: BoxFit.cover,
              ),
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
            ),
          );
        }
    )
複製代碼

樣式三

實現代碼：

Swiper(
        itemCount: secondImageList.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: secondImageList[index],
                    fit: BoxFit.fill
                ),
                borderRadius: BorderRadius.all(
                    Radius.circular(10)
                )
            ),
          );
        },
        layout: SwiperLayout.STACK              // stack樣式
    )
複製代碼

樣式四

實現代碼：

Swiper(
        layout: SwiperLayout.CUSTOM,            // custom樣式
        customLayoutOption: CustomLayoutOption(
            startIndex: -1,
            stateCount: 3
        ).addRotate([
          -100.0/180,
          0.0,
          100.0/180
        ]).addTranslate([
          Offset(-470.0, -40.0),
          Offset(0.0, 0.0),
          Offset(470.0, -40.0)
        ]),
        itemWidth: 300,
        itemHeight: 200,
        itemBuilder: (context, index) {
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: secondImageList[index],
                    fit: BoxFit.fill
                ),
                borderRadius: BorderRadius.all(
                    Radius.circular(10)
                )
            ),
          );
        },
        pagination: SwiperPagination(
            builder: DotSwiperPaginationBuilder(
                color: Colors.white,
                activeColor: Colors.blue
            )
        ),
        itemCount: secondImageList.length,
        autoplay: true,
        autoplayDisableOnInteraction: true,
      )
複製代碼

面對Flutter輪播圖一頭霧水的我找到了flutte_swiper庫，而後參考flutter 輪播組件 Swiper，本身也寫了一個demo，效果不錯，這裏也分享給你們，但願可以幫助小夥伴們。