Question

我想专注于DropdownButtonFormField中使用this.weekAgendaLogicHandler()或FocusScope.of(context).nextFocus()的TextFormField中的Form。

问题在于DropdownButtonFormField不提供FocusScope.of(context).requestFocus(_myNextNode)属性。

我看到DropdownButton中已有focusNode。

SampleApp代码：

focusNode

你知道怎么做吗？

Answer 1

尽管DropdownButtonFormField小部件没有focusNode属性，但是您可以将此小部件包装为Focus和Listener以达到所需的结果。下面的示例工作代码：

FocusNode _node = new FocusNode();

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(),
            body: Form(
                key: _formKey,
                child: Column(children: <Widget>[
                  TextFormField(
                    onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
                  ),
                  Focus(
                      focusNode: _node,
                      onFocusChange: (bool focus) {
                        setState((){});
                      },
                      child: Listener(
                          onPointerDown: (_) {
                            FocusScope.of(context).requestFocus(_node);
                          },
                          child: DropdownButtonFormField(
                            value: dropdownValue,
                            items: <String>['One', 'Two', 'Free', 'Four']
                                .map<DropdownMenuItem<String>>((String value) {
                              return DropdownMenuItem<String>(
                                value: value,
                                child: Text(value),
                              );
                            }).toList(),
                            onChanged: (String newValue) {
                              setState(() {
                                dropdownValue = newValue;
                              });
                            },
                            iconSize: 50,
                            style: TextStyle(color: _node.hasFocus ? Colors.black : Colors.white70, fontSize: 24),

                            hint: Text('Select',
                              style: TextStyle(color: _node.hasFocus ? Colors.white : Colors.white70),
                            ),

                          )

                      )
                  )]))));

结果为：当您在textfield中输入一些文本并单击选项卡时，它将焦点移到dropdownbuttonformfield中的第一项上。然后，您可以使用键盘的Tab键浏览其中的其他项目。在突出显示的项目上按Enter键将使该项目在下拉菜单中被选中。

此解决方案源自this的讨论。

希望这能回答您的问题。

如何使用FocusNode（）专注于Flutter中的DropdownButtonFormField？

1 个答案: