Flutter學習筆記（21）--TextField文本框組件和Card卡片組件

如需轉載，請注明出處：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(),
                ],
              ),
            ),
          ),
        )
      ),
    );
  }
}

 

效果截圖：

以上就是今天的學習內容啦！！！