Flutter入門進階之旅（四）文本輸入Widget TextField

上一篇文章中咱們一塊兒學習了什麼是Text跟如何給Text設置字體樣式以及Text Widget的一些經常使用屬性Flutter入門進階之旅（三） Text Widgets，經過對Text的學習咱們瞭解到Text是用於顯示文本的，若是對顯示的文本有一些特殊的要求，好比字體樣式，文字顏色咱們能夠經過TextStyle去給Text指定style來作個性化定製，這一點跟原生Android的TextView很是相似，有了文字顯示就確定會有文字輸入，今天咱們就一塊兒來學習一下Flutter中的文字輸入Widget TextField。

先來看下TextField的構造方法

const TextField({
    Key key,
    this.controller,           ////控制器，控制TextField文字
    this.focusNode,
    this.decoration = const InputDecoration(),    //輸入器裝飾
    TextInputType keyboardType,   ////輸入的類型
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.textAlign = TextAlign.start,   //文字顯示位置
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.maxLines = 1,
    this.maxLength,
    this.maxLengthEnforced = true,
    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),
  })
複製代碼

經過上面的構造方法跟預覽效果圖，熟悉android開發的小夥伴們是否是有種似曾相識的感受，Flutter的TextField跟原生Android中的EditText用法包括部分屬性名幾乎都是同樣的，好比咱們能夠經過keyboardType來指定喚起軟件盤時的輸入方式，例如上圖的兩個輸入框屬性設置：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
 
void main() {
  runApp(new MaterialApp(home: new PullToRefreshDemo()));
}
 
class PullToRefreshDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("文本輸入"),
      ),
      body: new Center(
          child: new Column(
        children: <Widget>[
          new Text("簡單文本輸入框",style: new TextStyle(fontSize: 20.0)),
          new TextField(keyboardType: TextInputType.text,),  //指定輸入方式爲文本輸入
          new TextField(keyboardType: TextInputType.number,),//指定喚起軟鍵盤時默認顯示數字鍵盤
 
        ],
      )),
    );
  }
}
複製代碼

經過上面的構造方法咱們留意到TextField給我提供了onChanged、onSubmitted、OnEditingComplete回調方法幫助咱們監聽輸入框的內容變化、編輯提交、編輯完成等事件，咱們給輸入框綁定上述監聽方法作下測試：

new TextField(
            onSubmitted: (value){
              print("------------文字提交觸發（鍵盤按鍵）--");
            },
            onEditingComplete: (){
              print("----------------編輯完成---");
            },
            onChanged: (value){
              print("----------------輸入框中內容爲:$value--");
            },
            keyboardType: TextInputType.text,
          ),
複製代碼

喚起軟鍵盤後在輸入框中輸入123456，log控制檯打印出：

到此對輸入框的基本使用你已經徹底get到了，可是現實開發過程當中，可能咱們會須要給輸入框指定一些輔助性的說明內容，好比輸入框未輸入內容時添加hint提示，或者在輸入框的旁邊添加Icon指示，或者輸入框內部文字的顯示樣式、背景色等等，這些輔助性的設置在Flutter中統一有一個叫作InputDecoration的裝飾器來完成操做，咱們先來看下InputDecoration的構造方法，而後來簡單嘗試下幾個平常開發中經常使用的操做。

const InputDecoration({
    this.icon, //輸入框左側添加個圖標
    this.labelText,//輸入框獲取焦點/有內容 會移動到左上角，不然在輸入框內labelTex的位置
    this.labelStyle,
    this.helperText,
    this.helperStyle,
    this.hintText, //未輸入文字時，輸入框中的提示文字
    this.hintStyle,
    this.errorText,
    this.errorStyle,
    this.errorMaxLines,
    this.isDense,
    this.contentPadding,
    this.prefixIcon, //輸入框內側左面的控件
    this.prefix,
    this.prefixText,
    this.prefixStyle,
    this.suffixIcon,//輸入框內側右面的圖標
    this.suffix,
    this.suffixText,
    this.suffixStyle,
    this.counterText,
    this.counterStyle,
    this.filled,
    this.fillColor,
    this.errorBorder,
    this.focusedBorder,
    this.focusedErrorBorder,
    this.disabledBorder,
    this.enabledBorder,
    this.border,  //增長一個邊框
    this.enabled = true,
    this.semanticCounterText,
  })

複製代碼

給輸入框添加輸入輔助性輸入說明：

body: new Center(
          child: new TextField(
            decoration: new InputDecoration(
                labelText: "請輸入內容",//輸入框內無文字時提示內容，有內容時會自動浮在內容上方
                helperText: "隨便輸入文字或數字", //輸入框底部輔助性說明文字
                prefixIcon: new Icon(Icons.print), //輸入框左邊圖標
                suffixIcon: new Icon(Icons.picture_as_pdf), //輸入框右邊圖片
                contentPadding: const EdgeInsets.only(bottom:15.0)),
            keyboardType: TextInputType.number,
          ),
        ));
複製代碼

經過給InputDecoration設置border給輸入框添加邊框：

body: new Center(
          child: new TextField(
            decoration: new InputDecoration(
                border: new OutlineInputBorder(  //添加邊框
                  gapPadding: 10.0,
                  borderRadius: BorderRadius.circular(20.0),
                ),
                prefixIcon: new Icon(Icons.print),
                contentPadding: const EdgeInsets.all(15.0)),
            keyboardType: TextInputType.number,
          ),

複製代碼

其餘樣式跟屬性讀者可自行運行體驗，我就不逐一列舉說明了，總之參考文檔再結合原生開發的經驗去使用TextField仍是比較簡單的。下面我分享一個完整的登陸UI的例子供你們參考：

完整代碼：

import 'package:flutter/material.dart';
 
void main() {
  runApp(new MaterialApp(home: new MyApp()));
}
 
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}
 
class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    TextEditingController _userPhoneController = new TextEditingController();
    TextEditingController _userPasswordController = new TextEditingController();
 
    /**
     * 清空輸入框內容
     */
    void onTextClear() {
      setState(() {
        _userPhoneController.text = "";
        _userPasswordController.text = "";
      });
    }
 
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("登陸"),
        ),
        body: new Column(
          children: <Widget>[
            new TextField(
              controller: _userPhoneController,
              keyboardType: TextInputType.number,
              decoration: new InputDecoration(
                  contentPadding: const EdgeInsets.all(10.0),
                  icon: new Icon(Icons.phone),
                  labelText: "請輸入手機號",
                  helperText: "註冊時填寫的手機號"),
              onChanged: (String str) {
                //onChanged是每次輸入框內每次文字變動觸發的回調
                print('手機號爲：$str----------');
              },
              onSubmitted: (String str) {
                //onSubmitted是用戶提交而觸發的回調{當用戶點擊提交按鈕（輸入法回車鍵）}
                print('最終手機號爲:$str---------------');
              },
            ),
            new TextField(
              controller: _userPasswordController,
              keyboardType: TextInputType.text,
              decoration: new InputDecoration(
                  contentPadding: const EdgeInsets.all(10.0),
                  icon: new Icon(Icons.nature_people),
                  labelText: "請輸入名字",
//                  hintText: "fdsfdss",
                  helperText: "註冊名字"),
            ),
            new Builder(builder: (BuildContext context) {
              return new RaisedButton(
                onPressed: () {
                  if (_userPasswordController.text.toString() == "10086" &&
                      _userPhoneController.text.toString() == "10086") {
                    Scaffold.of(context)
                        .showSnackBar(new SnackBar(content: new Text("校驗經過")));
                  } else {
                    Scaffold.of(context)
                        .showSnackBar(new SnackBar(content: new Text("校驗有問題，請從新輸入")));
                    onTextClear(); //狀況輸入內容，讓用戶從新輸入
                  }
                },
                color: Colors.blue,
                highlightColor: Colors.deepPurple,
                disabledColor: Colors.cyan,
                child: new Text(
                  "登陸",
                  style: new TextStyle(color: Colors.white),
                ),
              );
            })
          ],
        ));
  }
}
複製代碼