Flutter TextField 文本輸入框的基本屬性及詳解

TextField 文本輸入框

源碼分析：

const TextField({
    Key key,
    this.controller,                    // 控制正在編輯文本
    this.focusNode,                     // 獲取鍵盤焦點
    this.decoration = const InputDecoration(),              // 邊框裝飾
    TextInputType keyboardType,         // 鍵盤類型
    this.textInputAction,               // 鍵盤的操做按鈕類型
    this.textCapitalization = TextCapitalization.none,      // 配置大小寫鍵盤
    this.style,                         // 輸入文本樣式
    this.textAlign = TextAlign.start,   // 對齊方式
    this.textDirection,                 // 文本方向
    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),        // 滾動到視圖中時，填充邊距
    this.enableInteractiveSelection,    // 長按是否展現【剪切/複製/粘貼菜單LengthLimitingTextInputFormatter】
    this.onTap,                         // 點擊時回調
})

分析源碼可得，TextField 是有狀態 StatefulWidget，有豐富的屬性，自定義化較高，實踐中須要合理利用各類回調；

一、光標的相關屬性；cursorColor 爲光標顏色，cursorWidth 爲光標寬度，cursorRadius 爲光標圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；

return TextField(cursorColor: Colors.purple.withOpacity(0.4), cursorWidth: 10.0, cursorRadius: Radius.circular(4.0));

二、textAlign 爲文字起始位置，可根據業務光標居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內容方向，從左向右或從右向左；

return TextField(style: TextStyle(color: Colors.purple.withOpacity(0.7), fontSize: 18.0), textAlign: TextAlign.right);

三、maxLength 爲字符長度，設置時默認是展現一行，且右下角有編輯長度與總體長度對比；與 maxLengthEnforced 配合，maxLengthEnforced 爲 true 時達到最大字符長度後不可編輯；爲 false 時可繼續編輯展現有差異；

return TextField(maxLength: 30, maxLengthEnforced: true);
return TextField(maxLength: 30, maxLengthEnforced: false);

四、設置 maxLength 以後右下角默認有字符計數器，設置 TextField.noMaxLength 便可只展現輸入字符數；

return TextField(maxLength: TextField.noMaxLength);

五、maxLines 爲容許展示的最大行數，在使用 maxLength 時內容超過一行不會自動換行，由於默認 maxLines=1，此時設置爲 null 或固定展現行數便可自動換行；區別在於 null 會展現多行，而 maxLines 最多隻展現到設置行數；

return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: null);
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: 2);

六、obscureText 是否隱藏編輯內容，常見的密碼格式；

return TextField(obscureText: true);

七、enableInteractiveSelection 長按是否出現【剪切/複製/粘貼】菜單；不可爲空；

return TextField(enableInteractiveSelection: false);

八、keyboardAppearance 爲鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限於 iOS 設備；

return TextField(keyboardAppearance: Brightness.dark);

九、textCapitalization 文字大小寫；理論上 sentences 爲每句話第一個字母大寫；characters爲每一個字母大寫；words 爲每一個單詞首字母大寫；但該屬性僅限於 text keybord，和尚在本地更換多種方式並未實現，有待研究；

return TextField(textCapitalization: TextCapitalization.sentences);

十、keyboardType 爲鍵盤類型，和尚理解總體分爲數字鍵盤和字母鍵盤等；根據設置的鍵盤類型，鍵盤會有差異；

a. 數字鍵盤
--1-- datetime 鍵盤上可隨時訪問 : 和 /；
--2-- phone 鍵盤上可隨時訪問 # 和 *；
--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤
--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .；
--2-- url 鍵盤上可隨時訪問 / 和 .；
--3-- multiline 適用於多行文本換行；
--4-- text 默認字母鍵盤；

return TextField(keyboardType: TextInputType.number);
return TextField(keyboardType: TextInputType.emailAddress);

十一、textInputAction 一般爲鍵盤右下角操做類型，類型衆多，建議多多嘗試；

return TextField(textInputAction: TextInputAction.search);

十二、autofocus 是否自動獲取焦點，進入頁面優先獲取焦點，並彈出鍵盤，若頁面中有多個 TextField 設置 autofocus 爲 true 則優先獲取第一個焦點；

return TextField(autofocus: true);

1三、focusNode 手動獲取焦點，可配合鍵盤輸入等減小用戶操做次數，直接獲取下一個 TextField 焦點；

FocusScope.of(context).requestFocus(node);

return TextField(focusNode: node);

1四、enabled 設爲 false 以後 TextField 爲不可編輯狀態；

return TextField(enabled: false);

1五、decoration 爲邊框修飾，能夠藉此來調整 TextField 展現效果；能夠設置前置圖標，後置圖片，邊框屬性，內容屬性等，會在後續集中嘗試；若要徹底刪除裝飾，將 decoration 設置爲空便可；

return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));

1六、inputFormatters 爲格式驗證，例如原生 Android 中一般會限制輸入手機號或其餘特殊字符，在 Flutter 中也能夠藉此來進行格式限制，包括正則表達式；使用時須要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長字符；

b. WhitelistingTextInputFormatter 僅容許輸入白名單中字符；如 digitsOnly 僅支持數字 [0-9]；

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強制輸入單行；分析源碼 RegExp("[/\]") 能夠設置正則表達式；

return TextField(inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(12),
  WhitelistingTextInputFormatter.digitsOnly,
  BlacklistingTextInputFormatter.singleLineFormatter
]);

1七、onChanged 文本內容變動時回調，可實時監聽 TextField 輸入內容；

Center(child: Text(_textStr))
return TextField(onChanged: (text) {
  setState(() {
    _textStr = text;
  });
});

1八、controller 文本控制器，監聽輸入內容回調；

TextEditingController controller = TextEditingController();

@override
void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {
      _textStr = controller.text;
    });
  });
}

return TextField(controller: controller);

1九、onTap 點擊 TextField時回調；

return TextField(
  onTap: () {
    Toast.show('onTap!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.TOP);
  },
);

20、onEditingComplete 在提交內容時回調，一般是點擊回車按鍵時回調；

return TextField(
  onEditingComplete: () {
    Toast.show('onEditingComplete!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

2一、onSubmit 在提交時回調，不可與 onEditingComplete 同時使用，區別在於 onSubmit 是帶返回值的回調；

return TextField(
  onEditingComplete: () {
    Toast.show('onSubmitted -> $text!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

問題小結：

1. 鍵盤彈出會把輸入框或其它組件頂上去？

      當 TextField 獲取焦點彈出輸入框時，輸入框可能會將頁面中元素頂上去，爲避免此狀況，可將 Scaffold 中 resizeToAvoidBottomPadding: false 便可，resizeToAvoidBottomPadding設置是否自動調整body屬性控件的大小，以免 Scaffold 底部被覆蓋；

resizeToAvoidBottomPadding: false

2. 長按輸入框出現【剪切/複製/粘貼】的菜單如何設置中文？

當 TextField 設置 enableInteractiveSelection 屬性後長按會出現菜單，默認爲英文，可經過設置 Flutter 國際化來處理；

（1）在 pubspec.yaml 中集成 flutter_localizations；

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

（2）在 MaterialApp 中設置本地化代理和支持的語言類型；

return MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh', 'CN'),
    const Locale('en', 'US'),
  ]
}

3. 使用 maxLength 時如何取消文本框右下角字符計數器？

（1）將 maxLength 設置爲 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符；

return TextField(maxLength: null, inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(10)
]);

（2）設置 InputDecoration 中 **decoration** 屬性爲空；可是底部有空餘，只是隱藏而並不是消失；

return TextField(decoration: InputDecoration(counterText: ""), maxLength: 10);

以上轉自：阿策小和尚，僅做我的學習

 

光有輸入框還不行，還得獲取其中的內容，因此須要傳遞controller：

TextEditingController titleController = TextEditingController();
。。。
TextField(
     controller: this.titleController,
。。。
onChanged: (value){
    //保存輸入框的值
    setState(() {
        titleController.text = value;
    });
},

通常是在點擊按鈕的時候直接讀取controller.text的值

decoration能夠給TextField添加裝飾：

TextField(
      decoration:
          InputDecoration(fillColor: Colors.blue.shade100, filled: true, labelText: 'Hello', hintText: 'Hello', errorText: 'error'),
);

fillColor設置填充顏色，labelText設置標籤文字，這個標籤在沒有輸入的時候是佔滿輸入框的，當輸入聚焦之後，就會縮小到輸入框左上角；hintText就是普通的placeholder，輸入後就不顯示了，errorText是錯誤提示。

這些還不過癮，我不喜歡這個安卓風格的下面的裝飾線，我想變成圓角矩形的邊框：

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
  Widget buildTextField() {
    return TextField(
      decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10.0),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15.0),
//            borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//沒什麼卵效果
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField'),
      ),
      body: Container(
        color: Colors.blue.shade100,
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: buildTextField(),
        ),
      ),
    );
  }
}

改變裝飾線顏色：

不管是下面的裝飾線，仍是矩形邊框裝飾線，對焦後顯示的顏色，都是主題顏色的primaryColor，失去焦點之後就是黑色，這顯然不能知足自定義的需求，可是經過各類努力發現，改變邊框顏色很困難，因此正確的設置邊框顏色的方式是這樣的：

 

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
  Widget buildTextField() {
    return Theme(
      data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
      child: TextField(
        decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15.0),
//            borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//沒什麼卵效果
            )),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: buildTextField(),
      ),
    );
  }
}

改變邊框的粗細：

這些TextField的decoration完全不能知足要求了，須要重構成這種方式：

import 'package:flutter/material.dart';

class TextFieldPage extends StatelessWidget {
  Widget buildTextField() {
    return Container(
      padding: const EdgeInsets.all(8.0),
      alignment: Alignment.center,
      height: 60.0,
      decoration: new BoxDecoration(
          color: Colors.blueGrey,
          border: new Border.all(color: Colors.black54, width: 4.0),
          borderRadius: new BorderRadius.circular(12.0)),
      child: new TextFormField(
        decoration: InputDecoration.collapsed(hintText: 'hello'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: buildTextField(),
      ),
    );
  }
}

InputDecoration.collapsed能夠禁用裝飾線，而是使用外面包圍的Container的裝飾線。

以上轉自：Realank。