Flutter布局锦囊---轮播图片与滑块

设计给的效果如下：

UI布局图.png

拿到设计后，先把整体拆分成几个部分：

1. “运营位”，可以通过左右滑动来切换图片。
2. “进度条”，显示“运营位”当前位置的进度条。

然后就可以开始进行编码了。

第1步：绘制组件树

轮播图片与滑块的组件树

第2步：实现“运营位”

Flutter没有直接提供可以通过左右滑动来切换图片的组件，不过你可以在Flutter第三方包和插件仓库中找到解决方案，carousel_slider包是一个轮播（CarouselSlider）组件，支持无限滚动和自定义子组件。

import 'package:flutter/material.dart';
// 正常使用carousel_slider包的话，应该是下面这样来引用的：
// import 'package:carousel_slider/carousel_slider.dart';
// 下面这样写是因为我把carousel_slider包的代码复制下来，
// 研究了一下实现细节，然后放在了`../common/carousel_slider.dart`目录下。
import '../common/carousel_slider.dart';

/// 运营位图片列表。
final List<String> imgList = [
  'assets/img_login_01.png',
  'assets/img_login_02.png',
  'assets/img_login_03.png',
];

/// 用给定的处理函数（`handler`）处理给定的列表数据（`list`），
/// 返回处理结果列表（`result`）。
List<T> worker<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }
  return result;
}

class CarouselWithIndicator extends StatefulWidget {
  @override
  _CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();
}

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
  /// 当前页面的索引。
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        // carousel_slider包里的轮播组件（`CarouselSlider`）组件。
        CarouselSlider(
          // 使用自定义的工人`agent`方法生成一个容器组件列表。
          items: worker<Widget>(imgList, (index, i) {
            return Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  // 装饰图片（`DecorationImage`）类的图片（`image`）属性，
                  // 将图像绘制成装饰。
                  // 通常通过资产图片（`AssetImage`）使用随应用程序一起提供的图像，
                  // 或通过网络图像（`NetworkImage`）使用从网络获取的图像。
                  image: AssetImage(i),
                  // 适应属性，如何在框里展示图像。
                  // https://docs.flutter.io/flutter/painting/BoxFit-class.html
                  fit: BoxFit.cover
                )
              ),
            );
          }),
          // 是否自动播放，默认为`false`。
          autoPlay: false,
          // 当前页面在视窗中占用的空间，默认为`0.8`。
          viewportFraction: 1.0,
          // 宽高比例，默认为`16/9`。
          aspectRatio: 3/2,
          // 切换时当前页面逐渐变小，新页面逐渐变大直至完全替代当前页面，
          // 默认为`true`。
          distortion: false,
          // 视窗中页面更新时的回调函数。
          updateCallback: (index) {
            setState(() {
              _current = index;
            });
          },
        ),
        // TODO: 第3步：实现“进度条”
      ],
    );
  }
}

第3步：实现“进度条”

Flutter直接提供的线性进度指示器（LinearProgressIndicator）组件可以轻松的实现“进度条”部分。但是“进度条”的宽度是没有给确定值的，所以你需要扩展（Expanded）组件，用于展开行、垂直或柔性（Flex）组件的子组件，可以实现灵活的布局。

        // TODO: 第3步：实现“进度条”
        Row(
          children: <Widget>[
            // 左边的空白部分，设置占2个弹性因子，高度为30.0以撑起“进度条”的高度。
            Expanded(
              // 柔性属性，用于此子组件的弹性因子。
              flex: 2,
              child: SizedBox(height: 30.0),
            ),
            // 中间的“进度条”，设置占1个弹性因子。
            Expanded(
              flex: 1,
              child: SizedBox(
                height: 4.0,
                // 线性进度指示器（`LinearProgressIndicator`）组件，
                // 显示沿线的进度，也称为进度条。
                child: LinearProgressIndicator(
                  // 背景颜色（`backgroundColor `）属性，进度指示器的背景颜色。
                  backgroundColor: const Color(0xFFE1E1E1),
                  // 值颜色（`valueColor`）属性，指标的颜色是动画的值。
                  valueColor: AlwaysStoppedAnimation(Color(0xFF414141)),
                  // 值（`value `）属性，0.0～1.0对应于进度条当前进度。
                  value: (_current + 1) / imgList.length,
                ),
              ),
            ),
            // 右边的空白部分，设置占2个弹性因子，高度为30.0以撑起“进度条”的高度。
            Expanded(
              flex: 2,
              child: SizedBox(height: 30.0),
            ),
          ],
        ),

第4步：还原效果

轮播图片与滑块的还原效果