設計給的效果如下：

UI布局圖

拿到設計后，先把整體拆分成幾個部分：

1. “手機號輸入框”，使用自定義的登錄表單字段組件實現的輸入框。
2. “驗證碼輸入框”，使用自定義的登錄表單驗證碼組件和登錄表單字段組件組合實現的輸入框。
3. “登錄按鈕”，使用自定義的涂鴉按鈕組件實現的按鈕。

然后就可以開始進行編碼了。

第1步：繪制組件樹

蠟筆畫的表單的組件樹

第2步：實現“手機號輸入框”

首先引入需要的自定義組件，login_form_field.dart文件是《Flutter布局錦囊---帶彩條的文本字段》中的代碼，login_form_code.dart文件是《Flutter布局錦囊---驗證碼倒計時》中的代碼，doodle_button.dart文件是《Flutter布局錦囊---涂鴉風格按鈕》中的代碼。

import 'package:flutter/material.dart'; import 'login_form_field.dart'; import 'login_form_code.dart'; import '../common/doodle_button.dart';/// 自定義的登錄表單組件。 class LoginForm extends StatefulWidget { @override _LoginFormState createState() => _LoginFormState(); } 

然后定義一些用來控制文本字段狀態、驗證碼按鈕狀態的成員變量，同時把UI布局的基本輪廓描繪出來。

/// 與自定義的登錄表單組件關聯的狀態子類。 class _LoginFormState extends State<LoginForm> { /// 手機號文本字段的控制器。 final _phoneController = TextEditingController(); /// 驗證碼文本字段的控制器。 final _codeController = TextEditingController(); /// 發送驗證碼按鈕是否可用。 bool _codeAvailable = false; /// 手機號文本字段是否符合格式。 bool _phoneActivation = false; /// 驗證碼文本字段是否符合格式。 bool _codeActivation = false;@override Widget build(BuildContext context) { return Row( children: <Widget>[ Expanded( flex: 1, child: SizedBox(), ), Expanded( flex: 8, child: Column( children: <Widget>[ // TODO: 實現“手機號輸入框”。 // TODO: 第3步：實現“驗證碼輸入框”。 // TODO: 第4步：實現“登錄按鈕”。 ], ), ), Expanded( flex: 1, child: SizedBox(), ), ] ); } } 

通過《Flutter布局錦囊---帶彩條的文本字段》中實現的LoginFormField組件，你可以迅速實現“手機號輸入框”。

// TODO: 實現“手機號輸入框”。 SizedBox(height: 20.0), LoginFormField( hintText: '請輸入手機號', textEditingController: _phoneController, maxLength: 11, minLength: 7, legitimateCallback: () { setState(() { _phoneActivation = true; _codeAvailable = true;}); }, illegalCallback: () { setState(() { _phoneActivation = false; _codeAvailable = false;}); }, ), 

第3步：實現“驗證碼輸入框”

通過《Flutter布局錦囊---帶彩條的文本字段》中實現的LoginFormField組件、《Flutter布局錦囊---驗證碼倒計時》中實現的LoginFormCode組件，你可以迅速實現“驗證碼輸入框”。

// TODO: 第3步：實現“驗證碼輸入框”。 SizedBox(height: 30.0), Stack( children: <Widget>[ LoginFormField( hintText: '請輸入驗證碼', textEditingController: _codeController, maxLength: 6, minLength: 6, legitimateCallback: () { setState(() { _codeActivation = true; }); }, illegalCallback: () { setState(() { _codeActivation = false; }); }, ), // 對齊（`Align`）組件，用于將其子項與其自身對齊，并根據子級的大小自行調整大小。 Align( // 高度因子（`heightFactor`）屬性，如果為非空值，則將其高度設置為子組件高度乘以此系數。 // 可以更大也可以小于`1.0`，但必須是正數。 heightFactor: 1.7, // 對準（`alignment`）屬性，如何調整子組件。 // 對準（`Alignment`）類的中心右邊（`centerRight`）常量，沿右邊的中心點對準。 alignment: Alignment.centerRight, child: LoginFormCode( countdown: 60, available: _codeAvailable, onTapCallback: () { print(_codeController.text); }, ), ), ], ), 

第4步：實現“登錄按鈕”

最后，通過《Flutter布局錦囊---涂鴉風格按鈕》中的DoodleButton組件，迅速實現“登錄按鈕”。

// TODO: 第4步：實現“登錄按鈕”。 SizedBox(height: 48.0), DoodleButton( promptText: '登錄', activation: _codeActivation && _phoneActivation, onTapCallback: (){ print('點擊了“登錄”按鈕'); }, ), 

第5步：還原效果

蠟筆畫的表單的還原效果
本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/17658.html