Flutter學習筆記（21）--TextField文字框元件和Card卡片元件
阿新 • • 發佈：2019-08-22
如需轉載，請註明出處：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(),
],
),
),
),
)
),
);
}
}
效果截圖：
以上就是今天的學習內容啦！！！
&n