设计给的效果如下：
UI布局图
拿到设计后，先把整体拆分成几个部分：
- “堆栈容器”，使用大小框（
SizedBox）和堆栈（Stack）组件搞的容器，用于实现层次结构。 - “下层的导航”，放在堆栈容器下层，由图标按钮（
IconButton）和图片（Image）组件实现的导航。 - “上层的输入区域”，经过简单定制后的文本字段（
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<ComplexNavigation> {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 132.0,
// 堆栈（`Stack`）组件如果没有固定的大小，不方便实现对齐（`Align`）组件。
child: Stack(
children: <Widget>[
// TODO: 第3步：实现“下层的导航”
// TODO: 第4步：实现“上层的输入区域”
],
),
);
}
}
第3步：实现“下层的导航”
先用图标按钮（IconButton）组件自己实现返回上级的导航，再用图片（Image）组件放UI图，两者之间用行（Row）组件来分开放两边。
// TODO: 第3步：实现“下层的导航”
Row(
// 交叉轴对齐（`crossAxisAlignment`）属性，如何将子组件放在十字轴上。
crossAxisAlignment: CrossAxisAlignment.start,
// 主轴对齐（`mainAxisAlignment`）属性，如何将子组件放在主轴上。
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// 图标按钮（`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步：还原效果
带输入字段的应用栏的还原效果
网友评论