設計給的效果如下：

UI布局圖

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

1. “運營位”，使用自定義的旋轉木馬滑塊組件實現可以滾動的運營位。
2. “登錄表單”，使用自定義的登錄表單組件實現手機號、驗證碼登錄的表單。
3. “用戶協議”，使用自定義的用戶協議組件實現用戶協議的聲明文本。

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

第1步：繪制組件樹

手機號登錄頁的組件樹

第2步：實現“運營位”

先把需要引用的自定義組件一次引入，carousel_with_indicator.dart、login_form.dart和user_agreement.dart文件，它們分別對應《Flutter布局錦囊---輪播圖片與滑塊》、《Flutter布局錦囊---蠟筆畫的表單》和《Flutter布局錦囊---用戶協議聲明》。

import 'package:flutter/material.dart'; import 'widgets/carousel_with_indicator.dart'; import 'widgets/login_form.dart'; import 'widgets/user_agreement.dart';/// 登錄頁面組件。 class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); } 

實現“運營位”的UI很簡單，因為在《Flutter布局錦囊---輪播圖片與滑塊》中，已經完成了具體的實現，你只需要調用CarouselWithIndicator組件就可以了。

/// 與登錄頁面組件關聯的狀態子類。 class _LoginPageState extends State<LoginPage> { @override Widget build(BuildContext context) { // TODO: 第4步：實現“用戶協議”，實現“相對下方”布局。// 腳手架（`Scaffold`）組件，實現基本Material設計視覺布局結構。 return Scaffold( body: SafeArea( child: ListView( children: <Widget>[ CarouselWithIndicator(), // TODO: 第3步：實現“登錄表單”。 // TODO: 第4步：實現“用戶協議”。 ], ), ), ); } } 

第3步：實現“登錄表單”

同上，實現“登錄表單”也只需要調用LoginForm組件即可，具體實現在《Flutter布局錦囊---蠟筆畫的表單》中。

// TODO: 第3步：實現“登錄表單”。 LoginForm(), 

第4步：實現“用戶協議”

實現“用戶協議”的時候比較困難，因為你需要相對于屏幕下方來放置組件。筆者沒有在Flutter文檔中找到能同時實現靈活布局和相對屏幕下方布局的方法，只能采取非常土的方法，先計算出屏幕上剩余的空間。

// TODO: 第4步：實現“用戶協議”，實現“相對下方”布局。 /// 屏幕下方的剩余高度。 double screenHeight;// 媒體查詢（`MediaQuery`）類，建立媒體查詢解析給定數據的子樹，返回媒體查詢數據（`MediaQueryData`）類。 // 媒體查詢數據（`MediaQueryData`）類的方向（`orientation`）屬性，媒體的方向，即設備是處于橫向還是縱向模式。 if (MediaQuery.of(context).orientation == Orientation.portrait) { // 媒體查詢數據（`MediaQueryData`）類的大小（`size`）屬性，邏輯像素中的媒體大小，即屏幕的大小。 // 媒體查詢數據（`MediaQueryData`）類的填充（`padding`）屬性，應用程序可以呈現的顯示矩形每一側的物理像素數。 // 填充（`padding`）屬性的頂部（`top`）值是狀態欄高度，底部（`bottom`）值是系統操作欄高度。 screenHeight = MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top -MediaQuery.of(context).padding.bottom - 536; } else { // 橫屏時的高度，用于避免因為切換橫豎屏導致的異常顯示。 screenHeight = 82.0; } 

然后用大小框（SizedBox）組件來占據屏幕剩余的空間，再通過垂直（Column）組件的主軸對齊（mainAxisAlignment）屬性把UserAgreement組件布局于屏幕下方。

// TODO: 第4步：實現“用戶協議”。 // 通過大小框（`SizedBox`）組件來利用屏幕剩余的空間，實現從屏幕下方布局。 SizedBox( height: screenHeight, child: Align( alignment: Alignment.bottomCenter, child: Column( // 垂直（`Column`）組件的主軸對齊（`mainAxisAlignment`）屬性，如何將子組件放在主軸上。 mainAxisAlignment : MainAxisAlignment.end, children: <Widget>[ UserAgreement(), SizedBox(height: 20.0), ], ), ), ), 

第5步：還原效果

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