設計給的效果如下：

UI布局圖

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

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

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

第1步：繪制組件樹

手機號登錄頁的組件樹

第2步：實現(xiàn)“運營位”

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

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(); } 

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

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

第3步：實現(xiàn)“登錄表單”

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

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

第4步：實現(xiàn)“用戶協(xié)議”

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

// TODO: 第4步：實現(xiàn)“用戶協(xié)議”，實現(xiàn)“相對下方”布局。 /// 屏幕下方的剩余高度。 double screenHeight;// 媒體查詢（`MediaQuery`）類，建立媒體查詢解析給定數(shù)據的子樹，返回媒體查詢數(shù)據（`MediaQueryData`）類。 // 媒體查詢數(shù)據（`MediaQueryData`）類的方向（`orientation`）屬性，媒體的方向，即設備是處于橫向還是縱向模式。 if (MediaQuery.of(context).orientation == Orientation.portrait) { // 媒體查詢數(shù)據（`MediaQueryData`）類的大?。╜size`）屬性，邏輯像素中的媒體大小，即屏幕的大小。 // 媒體查詢數(shù)據（`MediaQueryData`）類的填充（`padding`）屬性，應用程序可以呈現(xiàn)的顯示矩形每一側的物理像素數(shù)。 // 填充（`padding`）屬性的頂部（`top`）值是狀態(tài)欄高度，底部（`bottom`）值是系統(tǒng)操作欄高度。 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步：實現(xiàn)“用戶協(xié)議”。 // 通過大小框（`SizedBox`）組件來利用屏幕剩余的空間，實現(xiàn)從屏幕下方布局。 SizedBox( height: screenHeight, child: Align( alignment: Alignment.bottomCenter, child: Column( // 垂直（`Column`）組件的主軸對齊（`mainAxisAlignment`）屬性，如何將子組件放在主軸上。 mainAxisAlignment : MainAxisAlignment.end, children: <Widget>[ UserAgreement(), SizedBox(height: 20.0), ], ), ), ), 

第5步：還原效果

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