Notas de desenvolvimento do Flutter - TextField

1. TextField recebe um valor inicial, que é atribuído quando o Controlador é criado

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

2. Restrinja o tipo de entrada

    a. Não é possível inserir a expressão regular do filtro 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. O teclado virtual ios não pode ser guardado,

Método 1: Configure o parâmetro focusNode.

Método 2: Use com 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: <Widget>[
              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<FocusNode> 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. Texto de várias linhas. E a altura do controle pode ser aumentada com a quebra de linha

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. Remova o sublinhado na parte inferior

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

6. Usado em Linha, você pode adicionar Expandido ou Flexível, ou envolvê-lo com Contêiner e definir a largura e a altura

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

7、

Acho que você gosta

Origin blog.csdn.net/LoveShadowing/article/details/109331677
Recomendado
Clasificación