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 {
  // 声明一个list，存放image Widget
  List 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: [
          new IconButton(
              icon: new Icon(Icons.message),
              onPressed: () {
                // 右上角的通知消息图标，点击进入消息列表
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => new MessageScreen()),
                );
              }),
        ],
      ),
      body: Column(
        children: [
          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()的布局