Flutter UI - 表單系 Widget

時間  2019-12-01
標籤 flutter 表單 widget 欄目 HTML 简体版
原文   原文鏈接

包括如下 widget：正則表達式

  • TextField - 輸入框
  • Switch - 選擇器
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``

TextField

網上的資料包括官方文檔都是一上來一大堆屬性列出來，輸入框可設置的屬性太多了，這樣的話很難看的，很勸退的，因此我努力把這些屬性分門別類按照幾個大的範圍整理下，以往能看的順眼api

屬性大全

// 雖然不想寫，可是仍是寫上吧
  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,  //配合maxLength一塊兒使用，在達到最大長度時是否阻止輸入
    this.onChanged,  //輸入文本發生變化時的回調
    this.onEditingComplete,   //點擊鍵盤完成按鈕時觸發的回調，該回調沒有參數，(){}
    this.onSubmitted,  //一樣是點擊鍵盤完成按鈕時觸發的回調，該回調有參數，參數即爲當前輸入框中的值。(String){}
    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,
  })
複製代碼

鍵盤控制

1. 鍵盤樣式ide

Flutter 內置了很多種鍵盤樣式的，有的我也沒搞明白，就這麼看吧測試

  • TextInputType.text - 普通完整鍵盤
  • TextInputType.number - 數字鍵盤
  • TextInputType.emailAddress - 帶有「@」的普通鍵盤
  • TextInputType.datetime - 帶有「/」和「：」的數字鍵盤）
  • TextInputType.multiline - 帶有選項以啓用有符號和十進制模式的數字鍵盤
  • url - 會顯示「/ .」
  • phone - 會彈出數字鍵盤並顯示"* #"
TextField(
   keyboardType: TextInputType.datetime,
 )
複製代碼

2. 大小寫控制動畫

  • TextCapitalization.none - 所有小寫
  • TextCapitalization.words - 每一個單詞的首字母大寫
  • TextCapitalization.sentences - 每一個句子的首字母大寫
  • TextCapitalization.characters - 每一個字每大寫

我試了試，有的鍵盤貌似無論用，你們仍是本身靠正則或是校驗來控制輸入吧，感受這個設置不靠譜ui

3. 修改鍵盤動做按鈕樣式this

關鍵詞是 textInputAction，改變的是鍵盤右下角那個按鈕的樣式，根據安裝的輸入法的不一樣，有的顯示的是文字，有的顯示的是圖標。Flutter 內置了很多樣式，惋惜沒有預覽，只能看英文本身猜了url

TextField(
  textInputAction: TextInputAction.search,
),
複製代碼

4. 鍵盤動做按鈕點擊響應 - 無參的spa

回調是 onEditingComplete，注意是沒有返回值的code

TextField(
  onEditingComplete: (){
    print("AA");
  },
),
複製代碼

5. 鍵盤動做按鈕點擊響應 - 有參的

回調是 onSubmitted，此次是有返回值的，也就是你輸入的數據

TextField(
  onSubmitted: (inputValue){
    print("輸入數據位: ${inputValue}");
  },
),
複製代碼

監聽事件

  • onChanged - 當用戶輸入就會觸發回調，咱們從中能夠拿到用戶輸入值，通過測試，每次拿到的都是用戶全部的輸入值
TextField(
  keyboardType: TextInputType.datetime,
    onChanged: (inputValue) {
      print("input:${inputValue}");       
    },
)
複製代碼
  • TextEditingController - 官文檔描述爲：文本控制器，目前發現也就是 TextEditingController.text 拿到輸入的內容，Flutter widget 通常都不要用 對象.屬性的去寫，因此提供了這麼一個東西。咱們要 new 一個 TextEditingController 出來，傳給 TextField
class TestWidgetState extends State<TestWidget> {
  var editContore = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 200,
          child: TextField(
            keyboardType: TextInputType.datetime,
            onChanged: (inputValue) {
              print("input:${inputValue}");
            },
            controller: editContore,
          ),
        ),
        RaisedButton(
          child: Text("請點擊"),
          onPressed: () {
            print("輸入內容：${editContore.text}");
          },
        ),
      ],
    );
  }
}
複製代碼
  • onTap - 在按下開始輸入的那一瞬間觸發，每次輸入只觸發一次
TextField(
  keyboardType: TextInputType.datetime,
    onTap: (){              
      print("tap...");
    },
)
複製代碼
  • onEditingComplete - 鍵盤完成按鈕響應 - 無參數的
  • onSubmitted - 鍵盤完成按鈕響應 - 有參數的
  • 實現右邊圖標點擊 - 默認沒有回調，須要咱們本身寫
class TestWidgetState extends State<TestWidget> {
  var isCan = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 200,
          child: TextField(
            decoration: InputDecoration(
              suffixIcon: isCan
                  ? GestureDetector(
                      child: Icon(Icons.clear),
                      onTap: () {
                        print("AAAAAA");
                      },
                    )
                  : null,
              suffixText: isCan ? "：請確認" : null,
              suffixStyle: TextStyle(fontSize: 16),
            ),
          ),
        ),
      ],
    );
  }
}
複製代碼

輸入框樣式

Flutter 裏修改樣式啥的基本都是 decoration，contain 裏是 BoxDecoration，TextField 的則是 InputDecoration，這部份內容也是至關多的，我拆開來講，我喜歡分門別類

1. 提示文字：

  • labelText/labelStyle - 輸入框標題吧，在輸入內容的上面，在咱們輸入以後，labelText 會有一個縮放的動畫的，style 是文字樣式，注意這個文字樣式只能在輸入以前管事
  • helperText/helperStyle - 輸入內容下部的提示文字
  • errorText/errorStyle - 錯誤提示文字，也是在輸入內容下部
  • hintText/hintStyle - 默認提示文字 
TextField(
  labelText: "姓名：",
  labelStyle: TextStyle(
    fontSize: 22,
  ),
  helperText: '請輸入你的真實姓名',
  helperStyle: TextStyle(
    fontSize: 8,
  ),
  errorText: "請從新輸入",
  errorStyle: TextStyle(
    fontSize: 12,
  ),
  hintText: "請輸入文字",
  hintStyle: TextStyle(
    fontSize: 12,
  ),
)
複製代碼

2. 左右提示和圖片

  • prefixIcon/prefixText/prefixStyle - 左邊的圖標和文字，樣式看下面圖樣，提示文字不會進入到輸入內容的，這個測試過了
  • suffixIcon/suffixText/suffixStyle - 右邊的圖標和文字
  • prefix/suffix - 或者直接本身給一個 widget 也能夠
  • icon - 左邊的圖標，可是圖標在輸入欄的外面，樣子看下面
  • 注意點 - 這裏的提示文字是隻有在輸入框拿到焦點時纔會顯示，不然只會顯示 hint 文字
  • suffix 點擊 - 默認沒提供相關回調，咱們本身套一個 GestureDetector 就行啦，測試過沒問題的，而且不會和 onTap 衝突的
class TestWidgetState extends State<TestWidget> {
  var editContore = TextEditingController();
  var isCan = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 200,
          child: TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.search),
              prefixIcon: isCan ? Icon(Icons.access_alarm) : null,
              prefixText: isCan ? "輸入：" : null,
              prefixStyle: TextStyle(fontSize: 12),
              suffixIcon: isCan
                  ? GestureDetector(
                      child: Icon(Icons.clear),
                      onTap: () {
                        print("AAAAAA");
                      },
                    )
                  : null,
              suffixText: isCan ? "：請確認" : null,
              suffixStyle: TextStyle(fontSize: 16),
            ),
          ),
        ),
      ],
    );
  }
}
複製代碼

3. 右小角統計數字

這個具體的文字樣式是本身作的，假如想要 6/10 這種樣式的，須要本身 setState 去修改文字

  • counterText - 文字
  • counterStyle - 文字樣式
  • counter - 自定義 widget
  • 要是想達到圖中的效果：
var count = 0;

TextField(
  decoration: InputDecoration(
    counterText: "${count}/10",
  ),
  onChanged: (inputValue) {
    setState(() {
      count = inputValue.length;
    });
  },
)
複製代碼

4. 改顏色

  • filled/fillColor - 修改輸入框背景色，filled 是個 boolean 值，用來控制顏色顯示的
TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.grey,
  ),
)
複製代碼

5. 修改邊框

邊框有3種：

  • InputBorder.none - 沒有邊框，此模式下連下面的線都沒有了
  • OutlineInputBorder - 4面邊框，能夠設置圓角
TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(
      Radius.circular(30), //邊角爲30
      ),
      borderSide: BorderSide(
        color: Colors.amber, //邊線顏色爲黃色
        width: 2, //邊線寬度爲2
      ),
    ),
)
複製代碼
  • UnderlineInputBorder - 底邊線，同樣能夠設置圓角，不過很差看
TextField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(30), //邊角爲30
      ),
      borderSide: BorderSide(
        color: Colors.amber, //邊線顏色爲黃色
        width: 2, //邊線寬度爲2
      ),
    ),
)
複製代碼

輸入驗證

就是 TextInputFormatter 這個東西啦，他是一個抽象接口，具體實現有如下幾種：

  • WhitelistingTextInputFormatter - 白名單校驗，也就是隻容許輸入符合規則的字符
  • BlacklistingTextInputFormatter - 黑名單校驗，除了規定的字符其餘的均可以輸入
  • LengthLimitingTextInputFormatter - 長度限制，跟maxLength做用相似

效果呢就是輸入無效，你輸入的非法字符既沒法顯示，也不被算做輸入以內

inputFormatters: [WhitelistingTextInputFormatter(RegExp("[a-z]"))],
複製代碼

inputFormatters 的特色呢，就是能夠接受多個格式驗證啦

  • 首先 inputFormatters 接受的是 [] 集合參數
  • 再者其實現類，像 WhitelistingTextInputFormatter 他們接受的是 Pattern 類型的數據，而正則 RegExp 偏偏就實現了 Pattern，因此本質上接受的就是正則表達式

固然了，使用 inputFormatters 的話是沒辦法和 errorText 聯動的啦，若是要有這樣的效果，那麼就得本身在 onChange 中本身作正則判斷啦

Switch

Switch 很少作介紹，你們都知道的，flutter 的這個 Switch 能夠設置選中時按鈕的顏色，圖標，橫條的顏色：

  • activeColor - 選中時按鈕的顏色
  • activeThumbImage - 選中時按鈕的圖標
  • activeTrackColor - 選中時和橫條的顏色
  • inactiveThumbColor - 不選時按鈕的顏色
  • inactiveTrackColor - 不選時橫條的顏色
  • inactiveThumbImage - 不選時按鈕的圖標
  • onChanged - 點擊影響
  • value - 當前值，這個必須一開始就寫上哈

Switch 在這裏的最大問題就是此存有點小，你們看下圖，這是相對整個屏幕的大小，並且 Switch 自己還不支持大小調整 

class TestWidgetState extends State<TestWidget> {
  bool _value = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 200,
      decoration: BoxDecoration(
        color: Colors.tealAccent,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('關'),
          Switch(
            value: _value,
            activeColor: Colors.blue,
            activeTrackColor: Colors.green,
            activeThumbImage: AssetImage(('assets/icons/icon_1.gif')),
            inactiveThumbColor: Colors.red,
            inactiveThumbImage: AssetImage(('assets/icons/icon_2.jpg')),
            inactiveTrackColor: Colors.grey,
            onChanged: (newValue) {
              setState(() {
                _value = newValue;
              });
            },
          ),
          Text('開'),
        ],
      ),
    );
  }
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程