Flutter APP開發 學習記錄: flutter_swiper輪播圖

說點兒閒話

大部分app都有輪播圖，通常是展現一些新聞公告通知等圖片，在flutter最強大的siwiper, 多種佈局方式，無限輪播，Android和IOS雙端適配，github：flutter_swiper

使用：

加載圖片

通常是從本地代碼中或者使用網絡圖片，那麼，首先將資源添加到項目的 pubspec.yaml 文件中（更多細節請參閱Assets and images）：

flutter:
   assets:
   - images/news_1.png
   - images/news_1.png
   - images/news_1.png

若是項目中所須要使用的圖片資源太多，也能夠直接直接這樣寫：
（1）、包含一個目錄下的全部 assets，須要在目錄名稱的結尾加上/：

flutter:
  assets:
    - assets/

注意只包含目錄下根節點的全部文件。
（2）、若是要添加子目錄下的文件，須要給每一個目錄建立節點：

flutter:
    assets: [images/,images/index-icons/] # 配置代碼中使用的圖片所放置的文件夾及其子文件夾

flutter_swiper

在pubspec.yaml文件裏添加

flutter\_swiper : ^lastest\_version

到項目根目錄下的 pubspec.yaml ,而且根目錄運行命令行

flutter packages get

flutter_swiper的最新版本號查看：pub.dev：flutter_swiper

實現輪播圖 代碼

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'message.dart';

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

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

  @override
  void initState() {
    imageList
      ..add(Image.asset(
        'images/news_1.png',
        height: 200,
        fit: BoxFit.fitWidth, // 顯示可能拉伸，可能裁剪，寬度充滿
      ))
      ..add(Image.asset(
        'images/news_2.png',
        height: 200,
        fit: BoxFit.fitWidth,
      ))
      ..add(Image.asset(
        'images/news_3.png',
        height: 200,
        fit: BoxFit.fitWidth,
      ));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            // APP的logo圖
            return Image.asset('images/logo-header.png');
          },
        ),
        title: new Text(
          'APP
          style: TextStyle(fontSize: 18.0, height: 1.2, fontFamily: "Courier"),
        ),
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.message),
              onPressed: () {
                // 右上角的通知消息圖標，點擊進入消息列表
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => new MessageScreen()),
                );
              }),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: new Swiper(
              itemBuilder: _swiperBuilder,
              itemCount: 3,
              itemWidth: MediaQuery.of(context).size.width,
              itemHeight: 200.0,
              loop: true,
              autoplay: true,
              pagination: null,
              control: null,
              viewportFraction: 1,
              scale: 1,
            ),
          ),
          Container(
            // padding: const EdgeInsets.fromLTRB(0, 10, 0, 5),
            width: MediaQuery.of(context).size.width,
            // height: MediaQuery.of(context).size.height,
            // 將上方的header、底部菜單和輪播圖的高度減掉
            height: MediaQuery.of(context).size.height - 400,             
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, //對齊方式：平均間隔
              children: [
              // 下方的其餘頁面佈局
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (imageList[index]);
  }
}

以上是使用靜態資源加載圖片來實現輪播圖，實際項目中，基本都是後端接口返回的數據，這就涉及到另外的知識點， GitHub - dio: 發起網絡請求 這塊的使用會在另外一篇文章裏具體再寫，這裏省略掉了，等以後寫好了dio的相關學習記錄，再來貼文章連接。
經過接口請求後端返回的數據後，對數據進行處理並經過setState來更新視圖，代碼：

setState(() {
        // 處理返回數據
        var rtn = response.data['content'];
        rtn.forEach((f) {
          // print("image title：" + f["title"] + " imageUrl：" + f["imageUrl"]);
          imageList
            ..add(Image.network(
              f["imageUrl"],
              height: 200,
              fit: BoxFit.fitWidth, // 顯示可能拉伸，可能裁剪，寬度充滿
            ));
        });
        // print(imageList);
      });

參考資料：
github：flutter_swiper
Assets and images
pub.dev：flutter_swiper
筆記-Flutter之輪播圖（多樣式）

相關文章

Flutter APP開發 學習記錄: bottomNavigationBar底部導航菜單 本篇文章是底部導航菜單這篇文章中對應的IndexScreen()的佈局