Flutter 开发笔记 —— TextField

1、TextField赋初始值,在创建Controller的即赋值

///对应创建TextEditingController
        for (int i = 0; i < items.length; i++) {
          _controllerLists
              .add(TextEditingController(text: items[i].patchNum.toString()));
          _focusList.add(FocusNode());
        }

2、限制输入类型

    a、不能输入表情    emoji过滤正则表达式:"[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]"

RegExp _blacklistedPattern = RegExp("[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]");

             TextField(
                    inputFormatters:  i != 5 ?
                            [WhitelistingTextInputFormatter(RegExp("[0-9]"))]
                                :[BlacklistingTextInputFormatter(_blacklistedPattern)],
                    keyboardType: i != 5 ?
                                defaultTargetPlatform == TargetPlatform.iOS
                                    ? null
                                    : TextInputType.number
                                 :TextInputType.text,

                )

3、ios 软键盘无法收起问题,

方法一:配置focusNode参数。

方法二:结合KeyboardActions使用

方式一:
FocusNode _nodeText;       

TextField(
        onEditingComplete: () {
                              
                 _nodeText = items[postion].glassNode;
                 _nodeText.unfocus();
        },
)

方式二:

@override
  Widget build(BuildContext context) {
    return KeyboardActions(
      config: Utils.getKeyboardActionsConfig(context, _nodeList),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextField(
                keyboardType: TextInputType.number,
                focusNode: _nodeList[1],
                decoration: InputDecoration(
                  hintText: "Input Number",
                ),
              ),
              TextField(
                keyboardType: TextInputType.text,
                focusNode: _nodeList[1],
                decoration: InputDecoration(
                  hintText: "Input Text with Custom Done Button",
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }



//键盘关闭处理,返回KeyboardActionsConfig,配置KeyboardActions的config
  //需传递当前页面的所有TextField的所有node
  //使用时KeyboardActions包裹页面
  static KeyboardActionsConfig getKeyboardActionsConfig(BuildContext context, List list) {
    return KeyboardActionsConfig(
      keyboardBarColor: Colors.grey[100],
      nextFocus: true,
      actions: List.generate(
          list.length,
              (i) => KeyboardActionsItem(
            focusNode: list[i],
            toolbarButtons: [
                  (node) {
                return GestureDetector(
                  onTap: () => node.unfocus(),
                  child: const Padding(
                    padding: EdgeInsets.only(right: 16.0),
                    child: Text('关闭'),
                  ),
                );
              },
            ],
          )),
    );
  }

4、多行文本. 并且控件高度可以随着换行而增高

TextField(
        controller: controller,
        focusNode: node,
        maxLines: 3,  //
        minLines: 1,
        decoration: InputDecoration(
          isDense: true,
          labelText: labelText,
          contentPadding: EdgeInsets.all(5),
        ),
      ),

a、只指定maxLines. 输入框会从一开始显示指定行数的高度, 不是随着换行而增高, 这时需要同时添加minLines: 1属性
b、自适应,用InputDecoration中的isDense, 去掉冗余边距, 只显示指定的contentPadding

5、去掉底部下划线

   TextField(
      decoration: InputDecoration(
         border: InputBorder.none,
      ),
    )

6、Row中使用,可加 Expanded或 Flexible,或者用Container包裹并设置宽高

           Row(
              children: [
                Text("*", style: TextStyle(color: Colors.red),),
                Text("业务员:"),
                Expanded(
                  child: TextField(
                    controller: _salerController,
                    focusNode: _salerNode,
                  ),
                ),
              ],
            )

7、

你可能感兴趣的:(#Flutter实践问题收集,Flutter学习笔记,flutter,ios)