今天來學習下TextField文本框組件和Card卡片組件。 只要是應用程式就少不了交互，基本上所有的應用程式都會有用戶名、密碼輸入框，搜索框等等，前面我們有寫過一篇基於Form表單的輸入功能，今天來看一下TextField文本框組件，文本輸入是最常見的一種交互方式，TextField組件就是... ...
如需轉載，請註明出處：Flutter學習筆記（21）--TextField文本框組件和Card卡片組件
今天來學習下TextField文本框組件和Card卡片組件。
只要是應用程式就少不了交互，基本上所有的應用程式都會有用戶名、密碼輸入框，搜索框等等，前面我們有寫過一篇基於Form表單的輸入功能，今天來看一下TextField文本框組件，文本輸入是最常見的一種交互方式，TextField組件就是用來做文本輸入的組件。註意這個要和Text組件區分開來，Text組件主要用於顯示文本，並不能接受輸入文本。
-
TextField文本框組件
TextField組件構造方法：
const TextField({ Key key, // controller是TextField的控制器，當TextField在編輯時回調， // 如果不設置則TextField預設創建自己的controller，重點是如果兩個TextField使用一個controller，那麼在一個中輸入內容，另一個會同步 this.controller, this.focusNode,//焦點控制 this.decoration = const InputDecoration(),//TextField裝飾器，主要用於控制TextField的外觀及提示等 TextInputType keyboardType,//鍵盤類型，有number、phone、emailAddress、text等 this.textInputAction,//鍵盤事件類型，有send、search等 this.textCapitalization = TextCapitalization.none,// this.style,//輸入文本的樣式 this.strutStyle, this.textAlign = TextAlign.start,//對齊方式，預設開始位置對齊 this.textDirection,//文本方向，預設從左到右 this.autofocus = false,//是否自動獲得焦點，預設false this.obscureText = false,//文本內容是否加密，預設false this.autocorrect = true,//是否自動更正 this.maxLines = 1,//最大行數 this.minLines,//最小行數 this.expands = false, this.maxLength,//最大長度 this.maxLengthEnforced = true,//超過最大長度輸入，是否提示錯誤，預設true，如果設置了false，可以繼續輸入但是會提示錯誤 this.onChanged,//內容改變時回調 this.onEditingComplete,//編輯完成時回調 this.onSubmitted,//提交時回調 this.inputFormatters,//允許輸入的格式，比如只能輸入數字或字母 this.enabled,//是否禁用 this.cursorWidth = 2.0,//游標寬度 this.cursorRadius,//游標圓角 this.cursorColor,//游標顏色 this.keyboardAppearance, this.scrollPadding = const EdgeInsets.all(20.0), this.dragStartBehavior = DragStartBehavior.start, this.enableInteractiveSelection, this.onTap,//點擊控制項時調用 this.buildCounter, this.scrollPhysics, })
簡單實現一個登陸的功能，限制用戶名輸入框輸入的內容長度為10位，不到10位長度，給toast提示，Demo示例：
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ final TextEditingController _useController = new TextEditingController(); final TextEditingController _pwdController = new TextEditingController(); @override Widget build(BuildContext context) { _useController.addListener((){ Fluttertoast.showToast(msg: '您輸入的內容為：${_useController.text}'); }); return new MaterialApp( title: 'TextField And Card Demo', debugShowCheckedModeBanner: false, home: new Scaffold( appBar: AppBar( title: new Text('TextField And Card Demo'), ), body: new Column( children: <Widget>[ Padding( padding: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0), child: TextField( controller: _useController,//綁定controller maxLines: 1,//最多一行 maxLength: 10,//最多輸入10個字元 autofocus: true,//自動獲取焦點 textAlign: TextAlign.left,//從左到右對齊 style: new TextStyle(color: Colors.white,fontSize: 20.0),//輸入內容顏色和字體大小 cursorColor: Colors.deepPurple,//游標顏色 keyboardType: TextInputType.phone, decoration: InputDecoration( //添加裝飾效果 filled: true,//背景是否填充 fillColor: Colors.redAccent,//添加黃色填充色（filled: true必須設置，否則單獨設置填充色不會生效） helperText: '用戶名', prefixIcon: Icon(Icons.person_add),//左側圖標 suffixText: '用戶名',//右側文本提示 suffixStyle: new TextStyle(fontSize: 20),//右側提示文案字體大小 hintText: 'input user name',//hint提示文案 hintStyle: new TextStyle(color: Colors.amber),//hint提示文案字體顏色 border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.0),//添加圓角 ), ) ), ), Padding( padding: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0), child: TextField( controller: _pwdController,//綁定controller maxLines: 1,//最多一行 maxLength: 10,//最多輸入10個字元 autofocus: true,//自動獲取焦點 textAlign: TextAlign.left,//從左到右對齊 style: new TextStyle(color: Colors.white,fontSize: 20.0),//輸入內容顏色和字體大小 cursorColor: Colors.deepPurple,//游標顏色 keyboardType: TextInputType.phone, decoration: InputDecoration( //添加裝飾效果 filled: true,//背景是否填充 fillColor: Colors.redAccent,//添加黃色填充色（filled: true必須設置，否則單獨設置填充色不會生效） helperText: '密 碼', prefixIcon: Icon(Icons.person_add),//左側圖標 suffixText: '密 碼',//右側文本提示 suffixStyle: new TextStyle(fontSize: 20),//右側提示文案字體大小 hintText: 'input user pwd',//hint提示文案 hintStyle: new TextStyle(color: Colors.amber),//hint提示文案字體顏色 border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.0),//添加圓角 ), ) ), ), RaisedButton( onPressed: _loginSubmit, child: new Text('登陸'), ) ], ), ), ); } void _loginSubmit() { if(_useController.text.length != 10){ Fluttertoast.showToast(msg: '用戶名長度為11位'); } } }
效果截圖：
上面的各類屬性設置都有很詳細的註釋，這裡就挑幾個容易踩的坑來講一下吧！
1.多個TextField一定要對應多個controller，不然多個TextField用同一個controller的話，會導致一個輸入框的內容會同步到其他輸入框內：
final TextEditingController _useController = new TextEditingController(); final TextEditingController _pwdController = new TextEditingController();
2.如果要給TextField設置背景填充色，filled和fillColor這兩個屬性一定要成對出現，不然你會發現設置不生效：
filled: true,//背景是否填充 fillColor: Colors.redAccent,//添加黃色填充色（filled: true必須設置，否則單獨設置填充色不會生效）
3.通過controller獲取輸入框內輸入的內容：
_useController.text
4.TextField內容變化監聽，一般可用作金額輸入進行動態計算操作：
onChanged: (value){
Fluttertoast.showToast(msg: value);
},
5.TextField裝飾器構造方法
InputDecoration({ this.icon, //位於裝飾器外部和輸入框前面的圖片 this.labelText, //用於描述輸入框，例如這個輸入框是用來輸入用戶名還是密碼的，當輸入框獲取焦點時預設會浮動到上方， this.labelStyle, // 控制labelText的樣式,接收一個TextStyle類型的值 this.helperText, //輔助文本，位於輸入框下方，如果errorText不為空的話，則helperText不會顯示 this.helperStyle, //helperText的樣式 this.hintText, //提示文本，位於輸入框內部 this.hintStyle, //hintText的樣式 this.hintMaxLines, //提示信息最大行數 this.errorText, //錯誤信息提示 this.errorStyle, //errorText的樣式 this.errorMaxLines, //errorText最大行數 this.hasFloatingPlaceholder = true, //labelText是否浮動，預設為true，修改為false則labelText在輸入框獲取焦點時不會浮動且不顯示 this.isDense, //改變輸入框是否為密集型，預設為false，修改為true時，圖標及間距會變小 this.contentPadding, //內間距 this.prefixIcon, //位於輸入框內部起始位置的圖標。 this.prefix, //預先填充的Widget,跟prefixText同時只能出現一個 this.prefixText, //預填充的文本，例如手機號前面預先加上區號等 this.prefixStyle, //prefixText的樣式 this.suffixIcon, //位於輸入框後面的圖片,例如一般輸入框後面會有個眼睛，控制輸入內容是否明文 this.suffix, //位於輸入框尾部的控制項，同樣的不能和suffixText同時使用 this.suffixText,//位於尾部的填充文字 this.suffixStyle, //suffixText的樣式 this.counter,//位於輸入框右下方的小控制項，不能和counterText同時使用 this.counterText,//位於右下方顯示的文本，常用於顯示輸入的字元數量 this.counterStyle, //counterText的樣式 this.filled, //如果為true，則輸入使用fillColor指定的顏色填充 this.fillColor, //相當於輸入框的背景顏色 this.errorBorder, //errorText不為空，輸入框沒有焦點時要顯示的邊框 this.focusedBorder, //輸入框有焦點時的邊框,如果errorText不為空的話，該屬性無效 this.focusedErrorBorder, //errorText不為空時，輸入框有焦點時的邊框 this.disabledBorder, //輸入框禁用時顯示的邊框，如果errorText不為空的話，該屬性無效 this.enabledBorder, //輸入框可用時顯示的邊框，如果errorText不為空的話，該屬性無效 this.border, //正常情況下的border this.enabled = true, //輸入框是否可用 this.semanticCounterText, this.alignLabelWithHint, })
-
Card卡片組件
Card即卡片組件塊，內容可以由大多數類型的Widget構成，但通常和ListTitle一起使用，Card有一個child，但它可以是支持多個child的列、行、網格或其他小部件。預設情況下，Card將其大小縮小為0像素，你可以使用SizeBox來限制Card的大小，在Flutter中，Card具有圓角和陰影。
demo示例：
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return new MaterialApp( title: 'TextField And Card Demo', home: Scaffold( appBar: AppBar( title: new Text('TextField And Card Demo'), ), body: Center( child: new SizedBox( height: 360, child: Card( color: Colors.white, margin: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),//設置圓角 child: Column( children: <Widget>[ new ListTile( leading: Icon(Icons.add_circle_outline), title: new Text('TextField And Card Demo1'), subtitle: new Text('副標題1'), ), new Divider(), new ListTile( leading: Icon(Icons.add_circle_outline), title: new Text('TextField And Card Demo2'), subtitle: new Text('副標題2'), onTap: (){ }, ), new Divider(), new ListTile( leading: Icon(Icons.add_circle_outline), title: new Text('TextField And Card Demo3'), subtitle: new Text('副標題3'), ), new Divider(), new ListTile( leading: Icon(Icons.add_circle_outline), title: new Text('TextField And Card Demo4'), subtitle: new Text('副標題4'), ), new Divider(), ], ), ), ), ) ), ); } }
效果截圖：
以上就是今天的學習內容啦！！！
