Flutter關於TextField你能知道的一切

時間  2019-11-06
標籤 flutter 關於 textfield 知道 一切 简体版
原文   原文鏈接

前言

Hello，你們好這裏是一個苦逼的前Android開發，原本Android乾的開開心心，可是受到一些影響轉行了😂，不過我就是吃不起飯，找不到工做也不會放棄Android開發！，Flutter真香！！我我的自學Flutter以來受到了諸多大佬文章的啓迪，因此也萌生了寫一下分享文章給一樣須要幫助的同窗們。api

TextField 文本輸入框

TextField文本輸入框相信你們都不陌生，本篇文章帶你更加仔細的學習TextField的一切。bash

建議閱讀時間: 沒事能夠多來看看啊😂ide

如何使用TextField

Widget build(BuildContext context) {
    return Container(child: TextField());
}
複製代碼

大功告成？naive，這段代碼收穫的是一段報錯，提煉以後的報錯信息學習

I/flutter ( 7877): No Material widget found.`
I/flutter ( 7877): TextField widgets require a Material widget ancestor.
I/flutter ( 7877): Material itself, such as a Card, Dialog, Drawer, or Scaffold.
複製代碼

這個錯誤很好解決，TextField須要被Material組件包裹才能使用，咱們能夠用Card，Dialog,Drawer,Scaffold,甚至直接用Material。可是咱們不須要直接包裹住，只要TextField渲染時向上查找能夠找到Material組件就ok。 ui

01

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.dragStartBehavior = DragStartBehavior.down,
    this.enableInteractiveSelection,
    this.onTap,
    this.buildCounter,
  })
複製代碼

maxLength/maxLengthEnforced/inputFormatters

02
小tip:若是想要限制字數，同時不想要右下角的計數標記可使用 inputFormatters 

inputFormatters: [LengthLimitingTextInputFormatter(20)]
複製代碼

inputFormatters用來限制輸入內容，咱們能夠自定義一個只接受輸入數字內容的inputFormattersthis

class NumberFormatter extends TextInputFormatter {

  bool isNumber(String value) {
    return RegExp('^[0-9]*\$').hasMatch(value);
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    String value = newValue.text;
    return isNumber(value) ? newValue : oldValue;
  }
}
複製代碼

obscureText/autofocus/focusNode

  1. obscureText用來隱藏輸入內容，通常輸入密碼時須要設置這個屬性。
  2. autofocus用來設置是否自動獲取焦點，默認爲false。注意:設置focusNode後此屬性失效。
  3. focusNode用來控制TextField焦點，也可控制軟鍵盤彈出隱藏~
    03
    04
    若是一個頁面有多個TextField還能夠用focusNode來控制具體哪個TextField獲取焦點
    05
    focusNode還能夠獲取焦點狀態~
FocusNode focusNode = FocusNode();
focusNode.addListener(() {
      if (focusNode.hasFocus)
        print('得到焦點');
      else
        print('失去焦點');
});
複製代碼

cursorWidth/cursorRadius/cursorColor

06

  • cursorWidth設置光標寬度
  • cursorRadius設置光標圓角
  • cursorColor設置光標顏色

enabled/enableInteractiveSelection

  • enabled是否禁用輸入框
  • enableInteractiveSelection值爲true時能夠長按選擇複製粘貼，false時禁用。

onTap/onSubmitted/onEditingComplete

  • onTap單擊輸入框的回調
TextField(
    onTap: () {
       print('onTap()');
}
//單擊時
I/flutter (14649): onTap()
I/flutter (14649): onTap()
複製代碼
  • onSubmitted點擊軟鍵盤確認按鈕的回調 注意這裏的確承認以是done、search、go等
TextField(   
     onSubmitted: (value) {
        print('value:' + value);
})
I/flutter (14978): value:蘇武難飛
I/flutter (14978): value:蘇武難飛
複製代碼

還須要注意的一點就是單獨註冊onSubmitted時點擊後會關閉軟鍵盤~spa

  • onEditingComplete 點擊軟鍵盤確認按鈕的回調😂 這個方法和上面的onSubmitted區別在於
  1. 沒有value回調
  2. 點擊後不會關閉軟鍵盤 適用場景例如:當前頁面有兩個TextField一個負責用戶名一個負責密碼，用戶輸入完用戶名後能夠很天然的點擊軟鍵盤的按鈕使焦點聚焦於密碼框。
TextField(
    onEditingComplete: () {
       print('onEditingComplete()');
       FocusScope.of(context).requestFocus(focusNode);
},
    textInputAction: TextInputAction.next),
TextField(focusNode: focusNode)

I/flutter (15170): onEditingComplete()
I/flutter (15170): onEditingComplete()
複製代碼

textInputAction/textCapitalization/textAlign/textDirection

  • textInputAction用來設置軟鍵盤圖標能夠設置爲Search、Next、go、previous等等，須要注意的是部分InputAction可能只有Android平臺有，部分InputAction可能只有iOS平臺有。
  • textCapitalization用來控制用戶輸入文字大小寫
    07
  • textAlign文本對齊方式 這個其實很好理解，就像原生Android中的Gravity，本章節就拿center舉一個小例子。
    08
  • textDirection控制文本方向

style/decoration

  • style

逐漸到了重頭戲了嗷~，style用來控制輸入文本樣式舉個栗子 3d

09

  • decoration用來控制輸入框樣式 咱們先來作一個很是Material Design的輸入框~
TextField(
    decoration: InputDecoration(labelText: 'Name')
)
複製代碼

10
InputDecoration功能是很是豐富的，咱們還能夠添加 border屬性來讓咱們輸入框更加有 Material感受。

border

  • OutlineInputBorder
TextField(
   decoration: InputDecoration(labelText: 'Name',border:OutlineInputBorder())
)
複製代碼

11

wow~奧搜！不喜歡花裏胡哨就想要個圓角？沒問題~
TextField(
    decoration: InputDecoration(hintText: 'Name',border: OutlineInputBorder(borderRadius:BorderRadius.all(Radius.circular(16.0)))))
複製代碼

12

想要更改邊框顏色？簡單~有兩種方式能夠辦到
  1. 經過屬性更改
TextField(
      decoration: InputDecoration(
          labelText: 'Name',
          labelStyle: TextStyle(color: Colors.red),
          focusedBorder: OutlineInputBorder(
              borderSide: const BorderSide(color:Colors.red)),
          enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color:Colors.red))))
複製代碼

13
注意:單獨更改 border是不生效的，會被 enabledBorder和 focusedBorder所覆蓋。

  1. 經過Theme更改
Theme(
   data: ThemeData(primaryColor: Colors.red),
   child: TextField(
       decoration: InputDecoration(
           labelText: 'Name', border: OutlineInputBorder())),
)
複製代碼

13

還要更改邊框粗細？撒撒水啦~
TextField(
    decoration: InputDecoration(
        labelText: 'Name',
        labelStyle: TextStyle(color: Colors.red),
        focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(
                color: Colors.red, width: 3.0)),
        enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(
                color: Colors.red, width: 3.0))))
複製代碼

14

  • UnderlineInputBorder

表現形式與默認的樣式相同，更改顏色和圓角粗細也與OutlineInputBorder一致~code

Icon/prefixIcon/suffixIcon

15
小tip: suffixIcon能夠用來作清空輸入框的×

suffixText/labelText/counterText/errorText/helperText/prefixText/hintText

16
小tip: errorText與 helperText都有內容時，只有 errorText會生效

filled/fillColor

17

maxLines

Flutter中的TextField默認表現輸入形式是單行輸入，若是咱們設置了maxLines呢？請看圖😂~ orm

18
咱們設置了 maxLines以後總體的高度都被放大了，這顯然不是咱們想要的效果，咱們想要的應該是輸入超出一行後會自動換行，像原生 Android的 EditText同樣,怎麼作呢，其實也很簡單，看圖┗|｀O′|┛ 嗷~~
19

onChanged/TextEditingController

如何處理文本輸入呢，咱們有兩個辦法。

  • onChanged回調

每當用戶輸入時，TextField會調用它的onChanged回調。 您能夠處理此回調以查看用戶輸入的內容。例如，若是您正在輸入搜索字段，則可能須要在用戶輸入時更新搜索結果。

TextField(onChanged: (value) {
    print('value: ${value}');
}

I/flutter (23802): value:蘇
I/flutter (23802): value:蘇武
I/flutter (23802): value:蘇武難
I/flutter (23802): value:蘇武難飛
複製代碼

一個更強大（但更精細）的方法是提供一個TextEditingController做爲TextField的controller屬性。 在用戶輸入時，controller的text和selection屬性不斷的更新。要在這些屬性更改時獲得通知，請使用controller的addListener方法監聽控制器 。 （若是你添加了一個監聽器，記得在你的State對象的dispose方法中刪除監聽器 ）。

TextEditingController _controller = TextEditingController();
_controller.addListener(() {
    String text = _controller.text;
    int length = text.length;
    print('text: ${text} length:${length}');
    if (length >= 5) {
      _controller.clear();
    }
});

I/flutter (23802): text: 蘇 length:1
I/flutter (23802): text: 蘇武難飛 length:4
I/flutter (23802): text: 蘇武難飛帥 length:5
I/flutter (23802): text:  length:0
複製代碼

後記

本篇內容到這裏就結束了，雖然我再也不作Android開發，可是我卻依然喜好懷念作開發的日子。給本身定個小目標，但願下半年能夠在掘金社區有50個贊吧😂

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程