Flutter布局锦囊---带输入字段的应用栏

设计给的效果如下：

UI布局图

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

1. “堆栈容器”，使用大小框（SizedBox）和堆栈（Stack）组件搞的容器，用于实现层次结构。
2. “下层的导航”，放在堆栈容器下层，由图标按钮（IconButton）和图片（Image）组件实现的导航。
3. “上层的输入区域”，经过简单定制后的文本字段（TextField）组件。

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

第1步：绘制组件树

带输入字段的应用栏的组件树

第2步：实现“堆栈容器”

首先把文本字段（TextField）组件使用的样式都抽出来。

import 'package:flutter/material.dart';

/// 文本域（`TextField`）组件使用的样式。
final TextStyle _textFieldStyle = TextStyle(
  // 字体大小。
  fontSize: 36.0,
  // 颜色。
  color: const Color(0xFF4A4A4A),
  // 字体重量，加粗。
  fontWeight: FontWeight.bold,
);

/// 输入装饰（`InputDecoration`）组件的提示样式（`hintStyle`）属性值。
final TextStyle _hintStyle = TextStyle(
  fontSize: 36.0,
  color: const Color(0xFFCCCCCC),
  fontWeight: FontWeight.bold,
);

然后通过堆栈（Stack）组件实现一个可以区分层次结构的容器，下面就可以将“下层的导航”和“上层的输入区域”作为子组件放到这里来。

/// 自定义的复合导航组件。
class ComplexNavigation extends StatefulWidget {
  /// 文本字段的控制器。
  final TextEditingController textEditingController;
  /// 文本内容非空时的回调函数。
  final Function nonEmptyCallback;

  ComplexNavigation({
    this.textEditingController,
    this.nonEmptyCallback,
  });

  @override
  _ComplexNavigationState createState() => _ComplexNavigationState();
}

/// 与自定义的登录表单字段组件关联的状态子类。
class _ComplexNavigationState extends State {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 132.0,
      // 堆栈（`Stack`）组件如果没有固定的大小，不方便实现对齐（`Align`）组件。
      child: Stack(
        children: [
          // TODO: 第3步：实现“下层的导航”
          // TODO: 第4步：实现“上层的输入区域”
        ],
      ),
    );
  }
}

第3步：实现“下层的导航”

先用图标按钮（IconButton）组件自己实现返回上级的导航，再用图片（Image）组件放UI图，两者之间用行（Row）组件来分开放两边。

          // TODO: 第3步：实现“下层的导航”
          Row(
            // 交叉轴对齐（`crossAxisAlignment`）属性，如何将子组件放在十字轴上。
            crossAxisAlignment: CrossAxisAlignment.start,
            // 主轴对齐（`mainAxisAlignment`）属性，如何将子组件放在主轴上。
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 图标按钮（`IconButton`）组件，图标按钮。
              IconButton(
                // 图标（`Icons`）类，支持的图标标识符，与图标（`Icon`）组件一起使用以显示特定图标。
                // https://material.io/tools/icons/
                icon: Icon(Icons.keyboard_arrow_left),
                // 图标大小（`iconSize`）属性，按钮内图标的大小。
                iconSize: 37.0,
                onPressed: (){
                  Navigator.of(context).pop();
                },
              ),
              // 图片（`Image`）组件，显示图像的组件。
              // 图片.资产（`Image.asset`）构造函数，创建一个窗口组件，显示从资产包中获取的图片流（`ImageStream`）。
              Image.asset(
                'assets/img_login_bg_texture.png',
                // 适应属性，如何在框里展示图像。
                // https://docs.flutter.io/flutter/painting/BoxFit-class.html
                fit: BoxFit.cover,
                height: 120.0,
                width: 120.0,
              ),
            ],
          ),

第4步：实现“上层的输入区域”

通过对齐（Align）组件把“上层的输入区域”放在“堆栈容器”的左下方，再使用容器（Container）组件控制文本字段（TextField）组件与左边框的距离。

          // TODO: 第4步：实现“上层的输入区域”
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 40.0),
              child: TextField(
                // 控制器属性，控制正在编辑的文本。
                controller: widget.textEditingController,
                // 光标颜色属性，绘制光标时使用的颜色。
                cursorColor: const Color(0xFFFF6B47),
                // 样式属性，用于正在编辑的文本的样式。
                style: _textFieldStyle,
                decoration: InputDecoration(
                  // 边框属性，装饰的容器周围绘制的形状。
                  border: InputBorder.none,
                  // 提示样式属性，用于提示文本（`hintText`）的样式。
                  hintStyle: _hintStyle,
                  // 提示文本属性，提示字段接受哪种输入的文本。
                  hintText: '起个名字',
                ),
                // 在改变属性，当正在编辑的文本发生更改时调用。
                onChanged: (value) {
                  // 当前文本字段中值的长度。
                  int fieldValue = value.trim().length;
                  if (fieldValue != 0) {
                    widget.nonEmptyCallback();
                  }
                },
              ),
            ),
          ),

第5步：还原效果

带输入字段的应用栏的还原效果