【Flutter 專題】06 圖解基礎【登錄】頁面并學習相關 Widget

小菜最近在利用業余時間學習 flutter，還真的是值得研究。小菜覺得學習一門技術最好的方式就是動手，在實踐過程中結合官網文檔才能更快的學習和理解。因為小菜技術太差，花了很久才搭建了一個最簡單的【登錄】頁面，對于同一個頁面，搭建的方式千差萬別，小菜的方式也絕非最佳，現在僅結合這個基本的【登錄】頁面記錄整理一下遇到的問題。

小菜這次整理的小博客只是單純的搭建頁面，不涉及以無邏輯和頁面跳轉，畢竟小菜還沒研究到那部分。

技術積累

【登錄】頁面很基本，整個頁面分為標題欄 Title 和內容塊 Content 兩部分，標題欄不用處理，主要是編輯內容塊部分。內容塊包括一個應用 Logo，兩個圖標，兩個輸入框，一個按鈕。

因此需要用到的控件包括：圖片，文本輸入框，按鈕，布局等。當然 flutter 最大的優勢就是一切都是 widget。

實操問題 + 解決方案

在根目錄下新建 images 文件夾，將本地圖片拷貝到該文件夾下，文件格式包括 JPEG / WebP / GIF / 動畫WebP / GIF / PNG / BMP / WBMP 等格式；

在 pubspec.yaml 文件中添加相應的圖片文件指向，如：- images/icon_username.png，特別注意：images 與 ‘-’ 之間一定要有空格！！！

Content 中添加圖片即可，如：

new Image.asset( 'images/ic_launcher.png', ),

水平排列控件需要用到 Row，豎直排列控件需要 Column；

小菜需要在同一行中添加一個圖標和一個輸入框 TextField，單獨的一個文本輸入框沒問題，但是直接放在 Row 中缺報錯；

child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new Image.asset( 'images/icon_username.png', width: 40.0, height: 40.0, fit: BoxFit.fill, ), new TextField( decoration: new InputDecoration( hintText: '請輸入用戶名', ), ) ]), ),

可以設置文本輸入框的固定長度，或是在文本輸入框外添加一層 widget，小菜理解為添加一層父布局，限制文本輸入框寬度，如下：

new Padding( padding: new EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 40.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0), child: new Image.asset( 'images/icon_password.png', width: 40.0, height: 40.0, fit: BoxFit.fill, ), ), new Expanded( child: new TextField( decoration: new InputDecoration( hintText: '請輸入密碼', ), obscureText: true, )) ]), ),

Flutter 沒有直接的 Button，小菜用的是 FlatButton，但是這僅僅是一個按鈕，樣式需要自己調整，配合 Card 實現圓角和投影，但是按鈕長度按照文字長度展示；

依舊是在按鈕外添加一層父布局，按需求調整固定長度，如下：

new Container( width: 340.0, child: new Card( color: Colors.blue, elevation: 16.0, child: new FlatButton( child: new Padding( padding: new EdgeInsets.all(10.0), child: new Text( '極速登錄', style: new TextStyle(color: Colors.white, fontSize: 16.0), ), )), ), )

相關延展

Flutter 中引用圖片有四種方式，小菜認為目前用的較多的為 網絡圖片 和 Assets 圖片，引用網絡圖片方式也很簡單，如下：

new Image.network( 'http://XXX.jpg', scale: 4.0, ),

對于文本輸入框中明文顯示或密碼顯示，主要通過 obscureText: true, 屬性，當該屬性為 true 時為密碼隱文展示；

對于位置方面內邊距，小菜目前用到兩個，分別是 EdgeInsets.all 和 EdgeInsets.fromLTRB；all 只有一個參數，類似于 Android 中 android:padding=“10dp”；fromLTRB 有四個參數，分別對應上下左右四個高度，而順序也是按照 L->left T->Top R->Right B->Bottom 順序排列，剛開始沒明白，后來反應過來發現很方便；

對于 Card 中陰影效果，需要 elevation: 16.0, 屬性，值越大并非代表陰影效果越深，只是代表陰影距離離控件越遠；

Flutter 中 ’ , ’ 類似于 Java 中 ’ ; ’ 建議編輯完一個屬性后添加 ’ , ’ 而且 Flutter 很貼心的地方是默認后面會有提示，對應的 ’ ) ’ 級別，方便修改的時候查找，如圖：

對于圖片比例，小菜用的是 scale: 4.0, 測試發現 scale 值越大圖片反而越小。

主要源碼

import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: '輕簽到', home: new Scaffold( appBar: new AppBar( title: new Text('極速登錄'), ), body: new Column( // Column is also layout widget. It takes a list of children and // arranges them vertically. By default, it sizes itself to fit its // children horizontally, and tries to be as tall as its parent. // // Invoke "debug paint" (press "p" in the console where you ran // "flutter run", or select "Toggle Debug Paint" from the Flutter tool // window in IntelliJ) to see the wireframe for each widget. // // Column has various properties to control how it sizes itself and // how it positions its children. Here we use mainAxisAlignment to // center the children vertically; the main axis here is the vertical // axis because Columns are vertical (the cross axis would be // horizontal). mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: [ new Padding( padding: new EdgeInsets.all(30.0), child: new Image.asset( 'images/ic_launcher.png', scale: 1.8, )), new Padding( padding: new EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 15.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0), child: new Image.asset( 'images/icon_username.png', width: 40.0, height: 40.0, fit: BoxFit.fill, ), ), new Expanded( child: new TextField( decoration: new InputDecoration( hintText: '請輸入用戶名', ), )) ]), ), new Padding( padding: new EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 40.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0), child: new Image.asset( 'images/icon_password.png', width: 40.0, height: 40.0, fit: BoxFit.fill, ), ), new Expanded( child: new TextField( decoration: new InputDecoration( hintText: '請輸入密碼', ), obscureText: true, )) ]), ), new Container( width: 340.0, child: new Card( color: Colors.blue, elevation: 16.0, child: new FlatButton( child: new Padding( padding: new EdgeInsets.all(10.0), child: new Text( '極速登錄', style: new TextStyle(color: Colors.white, fontSize: 16.0), ), )), ), ), ], ), ), ); } }

GitHub Demo

小菜也是剛接觸 Flutter，還有很多不清楚和不理解的地方，如果又不對的地方還希望多多指出。

來源：阿策小和尚

Android Flutter

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。