??????小菜前兩天花了很久才搭建了一個(gè)最簡(jiǎn)單的【登錄】頁(yè)面幔烛，但依然還有很多需要優(yōu)化的地方赘淮，小菜又花了很久的時(shí)間嘗試做了一點(diǎn)點(diǎn)的優(yōu)化，僅針對(duì)優(yōu)化的部分簡(jiǎn)單整理一下碉考。
優(yōu)化一：解決 OverFlowed 遮擋文本框問(wèn)題
-
小菜剛開(kāi)始在編輯內(nèi)容塊 content 時(shí)占锯，以為涉及的 widget 元素不多袒哥，所占不會(huì)超過(guò)屏幕，所以根 widget 使用的是 body: new Container()消略，但是在點(diǎn)擊文本框 TextField 時(shí)堡称，彈出的鍵盤會(huì)擋住部分 widget，并提示 Bottom OverFlowed By 85 pixels艺演，如圖：
-
小菜查了一下官網(wǎng)却紧，調(diào)整方式很簡(jiǎn)單，將根 widget 調(diào)整為 body: new ListView()胎撤，Flutter 中的 ListView 不僅代表列表 (ListView/RecycleView)啄寡，還可以代表一個(gè)可滑動(dòng)布局 (ScrollView)，如圖：
優(yōu)化二：文本框 TextField 中尾部添加【清空數(shù)據(jù)】圖標(biāo)
方式一：使用層布局 Stack哩照，在輸入文本框 TextField 上一層添加一個(gè)【清空數(shù)據(jù)】圖標(biāo)；
new Padding(
padding: new EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 15.0),
child: new Stack(
alignment: new Alignment(1.0, 1.0),
//statck
children: <Widget>[
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(
controller: _phonecontroller,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
hintText: '請(qǐng)輸入用戶名',
),
),
),
]),
new IconButton(
icon: new Icon(Icons.clear, color: Colors.black45),
onPressed: () {
_phonecontroller.clear();
},
),
],
),
),
方式二：使用文本框 TextField 自帶的屬性【后綴圖標(biāo) suffixIcon】懒浮，文本框 TextField 提供了很多便利的屬性飘弧，例如：【前綴圖標(biāo) prefixIcon】【文本框前圖標(biāo) icon】；
new Expanded(
child: new TextField(
controller: _pwdcontroller,
decoration: new InputDecoration(
hintText: '請(qǐng)輸入密碼',
suffixIcon: new IconButton(
icon: new Icon(Icons.clear,
color: Colors.black45),
onPressed: () {
_pwdcontroller.clear();
},
),
),
obscureText: true,
),
),
??????Tips: 小菜更傾向于方法二砚著，方法一采用的是層布局次伶，如果超過(guò)圖標(biāo)所在位置，若不做特別處理稽穆，之后輸入的內(nèi)容會(huì)被圖標(biāo)擋住冠王，而且相較于方法二使用了更多的 widget。小菜為了測(cè)試舌镶，在【輸入用戶名】模塊采用了方法一柱彻，【輸入密碼】模塊采用了方法二豪娜。
優(yōu)化三：調(diào)整鍵盤彈出樣式
??????設(shè)置文本框 TextField 中 keyboardType: TextInputType.phone, Flutter 提供了多種彈出鍵盤的方式：text/datetime/phone/url/number/multiline/emailAddress...
優(yōu)化四：根據(jù)輸入文本框添加【溫馨提示】對(duì)話框
??????Flutter 提供了創(chuàng)建和顯示彈出對(duì)話框的功能，如：showDialog/showMenu/showModalBottomSheet 等哟楷，小菜采用的是對(duì)話框方式瘤载，可設(shè)置標(biāo)題/內(nèi)容/按鈕等各屬性。
??????Tips: 對(duì)話框中 barrierDismissible: false, 屬性卖擅，若為false鸣奔，點(diǎn)擊對(duì)話框周圍，對(duì)話框不會(huì)關(guān)閉惩阶；若為true挎狸，點(diǎn)擊對(duì)話框周圍，對(duì)話框自動(dòng)關(guān)閉断楷。
相關(guān)注意
??????Flutter 提供了很多便利的小圖標(biāo)锨匆，使用起來(lái)非常方便，小菜但就一個(gè)小【×】找到了好幾個(gè)類似的圖脐嫂，希望可以多多嘗試统刮，體驗(yàn)一下。如圖：
主要源碼
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '輕簽到',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: '極速登錄'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _phoneState, _pwdState = false;
String _checkStr;
TextEditingController _phonecontroller = new TextEditingController();
TextEditingController _pwdcontroller = new TextEditingController();
void _checkPhone() {
if (_phonecontroller.text.isNotEmpty &&
_phonecontroller.text.trim().length == 11) {
_phoneState = true;
} else {
_phoneState = false;
}
}
void _checkPwd() {
if (_pwdcontroller.text.isNotEmpty &&
_pwdcontroller.text.trim().length >= 6 &&
_pwdcontroller.text.trim().length <= 10) {
_pwdState = true;
} else {
_pwdState = false;
}
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '輕簽到',
home: new Scaffold(
appBar: new AppBar(
title: new Text('極速登錄'),
),
body: new ListView(
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(30.0),
child: new Image.asset(
'images/ic_launcher.png',
scale: 1.2,
)),
new Padding(
padding: new EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 15.0),
child: new Stack(
alignment: new Alignment(1.0, 1.0),
//statck
children: <Widget>[
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(
controller: _phonecontroller,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
hintText: '請(qǐng)輸入用戶名',
),
),
),
]),
new IconButton(
icon: new Icon(Icons.clear, color: Colors.black45),
onPressed: () {
_phonecontroller.clear();
},
),
],
),
),
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(
controller: _pwdcontroller,
decoration: new InputDecoration(
hintText: '請(qǐng)輸入密碼',
suffixIcon: new IconButton(
icon: new Icon(Icons.clear,
color: Colors.black45),
onPressed: () {
_pwdcontroller.clear();
},
),
),
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),
),
),
onPressed: () {
_checkPhone();
_checkPwd();
if (_phoneState && _pwdState) {
_checkStr = '頁(yè)面跳轉(zhuǎn)下期見(jiàn)咯账千！';
} else {
if (!_phoneState) {
_checkStr = '請(qǐng)輸入11位手機(jī)號(hào)侥蒙！';
} else if (!_pwdState) {
_checkStr = '請(qǐng)輸入6-10位密碼！';
}
}
print(_checkStr);
showDialog<Null>(
context: context,
barrierDismissible: false,
child: new AlertDialog(
title: new Text(
'溫馨提示',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text(_checkStr),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('確定')),
],
),
);
},
),
),
),
],
),
],
),
),
);
}
}
??????GitHub Demo
??????小菜也是剛接觸 Flutter匀奏，還有很多不清楚和不理解的地方鞭衩，如果又不對(duì)的地方還希望多多指出。
來(lái)源：阿策小和尚
