Flutter控件--TextFiled

一。 TextFiled

flutter控件練習demo地址：github

1.1 TextFiled簡介

Text： 文本輸入框，至關於 android 中的 EditText 和 Ios 中的 UITextField

1.2 基本屬性

1.2.1 重點屬性

• controller 控制器，能夠拿到 TextFiled 的文本和清除文本框內容。若是用戶沒有設置此屬性，TextField 自動會設置個默認的
• decoration = const InputDecoration裝飾TextFiled，默認下面有一條橫線，能夠有icon ，error ，hint 文字等等
• keyboardType 當獲取焦點，打開軟鍵盤的時候優先打開的類型(注意，不是鎖定類型， 仍是能夠切換的)
  • TextInputType.text 文本
  • TextInputType.number 數字
  • TextInputType.emailAddress 等等等
• style 輸入文本的樣式
• autofocus = false 是否自動獲取焦點，，默認是false
• obscureText = false 是否以密碼格式爲輸入，默認是false
• maxLength 限制文本最大長度。同時右下角會出現 當前長度和最大長度 ，好比手機號11位
• onChanged 文本變化以後的回調 方法參數是 String
• inputFormatters 限制文本輸入的類型，總共有兩種 正則表達式
  (好比：只能是數字) inputFormatters: [WhitelistingTextInputFormatter (RegExp("[1234567890]"))] package:flutter/services.dart 別忘了導包
  • WhitelistingTextInputFormatter （白名單） 只能輸入 如下內容
  • BlacklistingTextInputFormatter （黑名單） 除了 如下內容 所有都能輸入
• onTap 文本框點擊事件

1.2.2 不經常使用屬性

• focusNode 控制焦點的

• textInputAction軟鍵盤裏面顯示的樣式（軟鍵盤的功能鍵）。好比 TextInputAction.go（開始） TextInputAction.search（搜索）TextInputAction.next（下一步）
  

• onEditingComplete 當點擊軟鍵盤裏面的（軟鍵盤的功能鍵） 下一步 或者 搜索 或者 開始 等等的時候

• onSubmitted 當點擊軟鍵盤裏面的（軟鍵盤的功能鍵） 下一步 或者 搜索 或者 開始 等等的時候 參數是 String 也就是 TextField 的文本
  當 onSubmitted 和 onEditingComplete 同時出現的時候 onEditingComplete屬性被忽略 不起做用

• textAlign = TextAlign.start 文本對齊方式

• textDirection 文本流向

• autocorrect = true 是否自動更正，默認是true

• maxLines = 1 是說文本框的大小是 幾個文本的高度，文本框高度固定的

• maxLengthEnforced = true 限制文本maxLength是否失效。可是仍是會出現右下角會出現 當前長度和最大長度

• cursorWidth = 2.0 光標的寬度 默認是 2.0

• cursorRadius 光標的圓角 此屬性 要把 cursorWidth 設置大一點才能看出來

• cursorColor 光標的顏色

• keyboardAppearance 只用在ios

• enabled 是否禁用

1.3 demo圖片

1.4 demo代碼

注意： 本代碼 引用了個第三方 toast ，在 pubspec.yaml 中 加入 fluttertoast: ^3.0.4

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';

class TextFieldDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFieldStateDemo();
  }
}

class TextFieldStateDemo extends State {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    _pressed() {
      Fluttertoast.showToast(
          msg: _controller.text,
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIos: 1,
          textColor: Colors.white);
      print(_controller.text);
    }

    _clear() {
      _controller.clear();
    }

    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField"),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
                //控制器，能夠拿到 TextFiled 的文本和清除文本框內容。若是用戶沒有設置此屬性，TextField 自動會設置個默認的
                controller: _controller,
                // keyboardType 當獲取焦點，打開軟鍵盤的時候優先打開的類型
                keyboardType: TextInputType.number,
                // 軟鍵盤裏面顯示的樣式（軟鍵盤的功能鍵），好比 TextInputAction.go（開始） TextInputAction.search（搜索）TextInputAction.next（下一步）
                textInputAction: TextInputAction.next,
                // 輸入文本的樣式，與 lableText hitetext 無關
                style: TextStyle(color: Colors.red),
                // 文本對齊方式
                textAlign: TextAlign.start,
                //是否自動獲取焦點，，默認是false
                autofocus: false,
                // 是否以密碼格式爲輸入
//                obscureText: true,
                //是否自動更正
                autocorrect: true,
                // 是說文本框的大小是 幾個文本的高度，文本框高度固定的
                maxLines: 1,
                // 限制文本最大長度。同時右下角會出現 當前長度和最大長度 ，好比手機號11位
                maxLength: 11,
                // 限制文本maxLength是否失效。可是仍是會出現右下角會出現 當前長度和最大長度
//                maxLengthEnforced: false,
                // 文本變化以後的回調 方法參數是 String
//                onChanged: (String textAfterChanged) {
//                  Fluttertoast.showToast(
//                    msg: textAfterChanged,
//                  );
//                },

                // 當點擊軟鍵盤裏面的（軟鍵盤的功能鍵） 下一步 或者 搜索 或者 開始 等等的時候  參數是 String 也就是 TextField 的文本
                onSubmitted: (String s) {
                  Fluttertoast.showToast(
                    msg: s,
                  );
                },
                // 當點擊軟鍵盤裏面的（軟鍵盤的功能鍵） 下一步 或者 搜索 或者 開始 等等的時候
                // 當 onSubmitted 和 onEditingComplete 同時出現的時候 onEditingComplete屬性被忽略 不起做用
                onEditingComplete: () {
                  Fluttertoast.showToast(
                    msg: "輸入完畢",
                  );
                },
                // 限制文本輸入的類型 總共有兩種 正則表達式
                // WhitelistingTextInputFormatter （白名單） 只能輸入 如下內容
                // BlacklistingTextInputFormatter （黑名單） 除了 如下內容 所有都能輸入
                //上面兩個屬於 package:flutter/services.dart 別忘了導包
                inputFormatters: [
                  WhitelistingTextInputFormatter(RegExp("[1234567890]"))
                ],
                // 是否禁用
                enabled: true,
                // 光標的寬度  默認是 2.0
//                cursorWidth: 20,
                // 光標的圓角 此屬性 要把 cursorWidth 設置大一點才能看出來
//                cursorRadius: Radius.circular(20),
                // 光標的顏色
                cursorColor: Colors.blue,
//                keyboardAppearance: Brightness.dark,
                // 文本框點擊事件
                onTap: () {
//                  Fluttertoast.showToast(
//                    msg: "點擊我了",
//                  );
                },
                decoration: InputDecoration(
                  icon: Icon(Icons.account_circle),
//                  fillColor: Colors.red,
//                  // 填充的顏色
//                  filled: true,
                  // 是否有填充顏色  默認是false
                  labelText: "用戶名",
                  hintText: "請輸入用戶名",
                )),
            TextField(
                decoration: InputDecoration(
              icon: Icon(Icons.lock),
              labelText: "密碼",
              hintText: "請輸入密碼",
            )),
            RaisedButton(
              onPressed: _pressed,
              child: Text("顯示TextField文字"),
            ),
            RaisedButton(
              onPressed: _clear,
              child: Text("清除TextField文字"),
            )
          ],
        ),
      ),
    );
  }
}

複製代碼