Flutter布局锦囊---绑定手机页

设计给的效果如下：

UI布局图

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

1. “顶部导航栏”，标题+取消按钮+跳过按钮的应用栏。
2. “手机号输入框”，用于获取手机号码的圆角边框输入字段。
3. “验证码输入框”，用于获取验证码的圆角边框输入字段，还包括获取验证码的按钮。
4. “提交按钮”，在满足条件后让用户点击的提交按钮。

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

第1步：绘制组件树

绑定手机页的组件树

第2步：实现“顶部导航栏”

下面的代码导入了一堆东西，大概说一下都是些什么吧。../common/first_navigation.dart是《Flutter布局锦囊---简单的应用栏》，不过针对这个需求做了一些小改动。../common/doodle_button.dart是《Flutter布局锦囊---涂鸦风格按钮》。../common/round_form_field.dart是《Flutter布局锦囊---圆框的表单字段》。widgets/login_form_code.dart是《Flutter布局锦囊---验证码倒计时》。

import 'package:flutter/material.dart';
import '../common/first_navigation.dart';
import '../common/doodle_button.dart';
import '../common/round_form_field.dart';
import 'widgets/login_form_code.dart';

/// 自定义的绑定页面组件。
class Binding extends StatefulWidget {

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

下面代码的主体是《Flutter布局锦囊---简单的应用栏》中自定义的一级导航（firstNavigation）组件，不过这里你要把行动（actions）和主导（leading）属性设置成可以配置的，如果没有则为空值（null）。

/// 与自定义的绑定页面组件关联的状态子类。
class _BindingState extends State<Binding> {
  /// 手机号表单字段的控制器。
  final _phoneController = TextEditingController();
  /// 验证码表单字段的控制器。
  final _codeController = TextEditingController();
  /// 发送验证码按钮是否可用。
  bool _codeAvailable = false;
  /// 手机号表单字段是否符合格式。
  bool _phoneActivation = false;
  /// 验证码表单字段是否符合格式。
  bool _codeActivation = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: firstNavigation(
        '绑定手机',
        // 墨水瓶（`InkWell`）组件，响应触摸的矩形区域。
        leading: InkWell(
          child: Text(
            '  取消  ',
            style: TextStyle(
              color: Color(0xFF777777),
              fontSize: 16.0,
            ),
          ),
          onTap: (){
            Navigator.of(context).pop();
          },
        ),
        actions: InkWell(
          child: Text(
            '  跳过  ',
            style: TextStyle(
              color: Color(0xFFFF6B47),
              fontSize: 16.0,
            ),
          ),
          onTap: (){
            Navigator.of(context).pushNamedAndRemoveUntil('/', (Route<dynamic> route) => false);
          },
        ),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(horizontal: 20.0),
        children: <Widget>[
          // TODO: 第3步：实现“手机号输入框”
          // TODO: 第4步：实现“验证码输入框”
          // TODO: 第5步：实现“提交按钮”
        ],
      ),
    );
  }
}

第3步：实现“手机号输入框”

下面代码的主体是《Flutter布局锦囊---圆框的表单字段》中自定义的圆框表单字段（RoundFormField）组件。这个就可以直接使用了，不用像上面那一步修改代码。

          // TODO: 第3步：实现“手机号输入框”
          Container(
            padding: EdgeInsets.symmetric(vertical: 20.0),
            child: Text(
              '绑定手机后可以直接使用手机号码登录',
              style: TextStyle(
                color: Color(0xFF777777),
                fontSize: 14.0,
              ),
            ),
          ),
          RoundFormField(
            hintText: '请输入手机号',
            textEditingController: _phoneController,
            checkCallback: (value){
              if(value.trim().length == 11) {
                _codeAvailable = true;
                _phoneActivation = true;
              } else {
                _codeAvailable = false;
                _phoneActivation = false;
              }
              setState(() {});
            },
          ),
          SizedBox(height: 20),

第4步：实现“验证码输入框”

下面代码的主体是《Flutter布局锦囊---圆框的表单字段》中自定义的圆框表单字段（RoundFormField）组件，再佐以《Flutter布局锦囊---验证码倒计时》中自定义的倒计时（LoginFormCode）组件作为调料。它们共同完成了验证码输入框。

          // TODO: 第4步：实现“验证码输入框”
          Stack(
            children: <Widget>[
              RoundFormField(
                hintText: '请输入验证码',
                textEditingController: _codeController,
                checkCallback: (value){
                  if(value.trim().length == 6) {
                    _codeActivation = true;
                  } else {
                    _codeActivation = false;
                  }
                  setState(() {});
                },
              ),
              // 对齐（`Align`）组件，用于将其子项与其自身对齐，并根据子级的大小自行调整大小。
              Align(
                // 高度因子（`heightFactor`）属性，如果为非空值，则将其高度设置为子组件高度乘以此系数。
                heightFactor: 2.0,
                // 对准（`alignment`）属性，如何调整子组件。
                alignment: Alignment.centerRight,
                child: LoginFormCode(
                  countdown: 60,
                  available: _codeAvailable,
                  onTapCallback: () {
                    // 根据需求写提交的过程以及后续操作～
                  },
                ),
              ),
            ],
          ),

第5步：实现“提交按钮”

下面代码的主体是《Flutter布局锦囊---涂鸦风格按钮》中自定义的涂鸦按钮（DoodleButton）组件，注意要通过setState(() {});来改变按钮的可点击状态。

        // TODO: 第5步：实现“提交按钮”
          SizedBox(height: 40),
          DoodleButton(
            promptText: '绑定',
            activation: _phoneActivation && _codeActivation,
            onTapCallback: (){
              setState(() {
                _codeActivation = false;
              });
              // 根据需求写提交的过程以及后续操作～
              setState(() {
                _codeActivation = true;
              });
            },
          ),

第6步：还原效果

绑定手机页的还原效果