[Flutter / Dart]：如何在表单中动态更改TextFormField的键盘类型？ [英] [Flutter/Dart]: How to dynamically change the keyboard type for a TextFormField in a Form?

问题描述

我有一个小部件，可呈现TextFormFields的ListView来输入数据。但是，我想动态更改我的一个文本字段的键盘类型。以下是Widget的概述：

I have a Widget that renders a ListView of TextFormFields to input data. However, I want to change the keyboard type for one of my textfields dynamically. Here is an overview of the Widget:

class CreateTodo extends StatefulWidget {
  @override
  _CreateTodoState createState() => _CreateTodoState();
}

class _CreateTodoState extends State<CreateTodo> {
  final _formKey = GlobalKey<FormState>();
  final double formWidth = 175.0;

  final Map<String, Icon> itemsMap = {
    'Heading': Icon(Icons.title),
    'Description': Icon(Icons.edit),
    'Date': Icon(Icons.calendar_today)
  };

  final items = ['Heading', 'Description', 'Date'];

  _changeKeyboardType(entry) {
    if (entry == "Description") {
      return TextInputType.multiline;
    }

    return TextInputType.text;
  }

  ListView createListItems() {
    return ListView.builder(
      padding: EdgeInsets.only(
        left: 50.0,
        right: 50.0,
        top: 20.0
      ),
      scrollDirection: Axis.vertical,
      itemCount: 3,
      itemBuilder: (context, index) {
        var currentHeading = this.items[index];
        var currentIcon = this.itemsMap[currentHeading];

        return Padding(
          padding: EdgeInsets.only(bottom: 50.0),
          child: new TextFormField(
              validator: (input) {
                if (input.isEmpty) {
                  return 'You must enter a ${currentHeading.toLowerCase()} for your to-do';
                }
              },
              keyboardType: this._changeKeyboardType(currentHeading),
              decoration: new InputDecoration(
                prefixIcon: currentIcon,
                labelText: currentHeading,
                border: OutlineInputBorder(),
              ),
            )
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      autovalidate: true,
      child: Expanded(
        child: (this.createListItems())
      )
    );
  }
}

不起作用的主线是： keyboardType：this._changeKeyboardType（currentHeading） ...我是否以错误的方式处理此问题？任何方向都将非常有帮助。我基本上希望描述的textFormFeld是多行的，以便用户可以更好地可视化其描述。

The main line that isn't working is: keyboardType: this._changeKeyboardType(currentHeading) ... Am I approaching this problem the wrong way? Any direction will be super helpful. I basically want the textFormFeld for the description being multiline so users can have a better visualization of their description.

推荐答案

我的工作解决方案现在：

My working solution for now:

// Where entry is an object containing its focusNode and textInputType
entry.focusNode.unfocus();
setState(() {
  entry.textInputType = type;
});
// The delay was necessary, otherwise only the 2nd tap would actually change
Future.delayed(const Duration(milliseconds: 1), () {
  FocusScope.of(context).requestFocus(entry.focusNode);
});

唯一的缺点是到目前为止，我无法解决的问题是键盘在重新出现之前消失了新的 TextInputType 。

Only downside I couldn't fix so far is that the keyboard is disappearing before it re-appears with the new TextInputType.

Google的Spreadsheet应用程序无需关闭即可立即执行，很想知道是否以及如何做到这一点

Google's Spreadsheet app does it instantaneous without the close, would love to know if and how that'll be doable in Flutter.

由于我的示例是异步的，因此您必须更改逻辑。

请告诉我这是否有帮助或如果您需要更多帮助。

或者，如果您已经弄清楚了，您是怎么做的

You'd have to change your logic as my example is asynchronous.
Let me know if that helps or if you need more help.
Or, if you've already figured it out, how you did it

信用：它受 https://stackoverflow.com/a/58498474/3484824

这篇关于[Flutter / Dart]：如何在表单中动态更改TextFormField的键盘类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！