Flutter / Android - 将焦点从 TextField 移动到 DropdownButton答案

【问题标题】：Flutter / Android - moving focus from a TextField to a DropdownButtonFlutter / Android - 将焦点从 TextField 移动到 DropdownButton
【发布时间】：2018-07-26 08:21:49
【问题描述】：

我在屏幕上有一个文本字段和一个下拉按钮。当我从文本字段移动到选择一个项目，然后回到文本字段时，我觉得这有点尴尬。

在文本字段中输入
点击两次选择下拉菜单

我的问题是您必须点击两次，一次退出文本字段，第二次访问下拉列表 - 有没有办法退出文本字段并一次点击打开下拉列表？这是内置在 Android 中还是 Flutter 控件中？

这是一些显示下拉列表和文本框的颤振代码...

class _TextAndDropdownState extends State<TextAndDropdown> {
  int selectedDropdown;
  String selectedText;
  final textController = new TextEditingController();

  @override
  void initState() {
    super.initState();

    selectedDropdown = 1;

    textController.addListener(() => print(''));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Text and dropdown'),
      ),
      body: Container(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10.0),
            ),
            DropdownButton(value: selectedDropdown, onChanged: _dropdownChange, items: [
              DropdownMenuItem(
                child: Text('First'),
                value: 1,
              ),
              DropdownMenuItem(child: Text('Seconds')),
            ]),
            TextField(controller: textController),
          ],
        ),
      ),
    );
  }

  void _dropdownChange(val) {
    setState(() {
      selectedDropdown = val;
    });
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

抱歉，回答迟了...我也在寻找解决方案。现在我明白了。

只有你必须添加这个

 FocusScope.of(context).requestFocus(new FocusNode());

在你的

_dropdownChange(val)方法

void _dropdownChange(val) {
                      FocusScope.of(context).requestFocus(new FocusNode());///It will clear all focus of the textfield
            setState(() {
              selectedDropdown = val;
                     });
                           }

also refer Abdul Wahab answer

【讨论】：

工作得更好更简单。

【解决方案2】：

@Dithest 的答案是正确的，但是在这个用例中仍然存在一个问题是，当用户在下拉菜单之外点击然后文本字段重新聚焦和键盘打开时。我解决此问题的方法是在 DropDownButton 的 onTap 侦听器中添加以下代码

FocusScope.of(context).requestFocus(new FocusNode());///它将清除文本字段的所有焦点

【讨论】：

【解决方案3】：

flutter GitHub 存储库中目前存在一个关于此问题的持续问题。目前还没有解决，但是this comment 暗示有一个方便的解决方法。

您可以将FocusManager.instance.primaryFocus.unfocus(); 添加到DropdownButton 的onTap() 事件中，该事件应该“窃取”先前关注下拉点击的TextField 的焦点。

【讨论】：

【解决方案4】：

另一种方法是创建FocusNode。（在我的例子中，Dropdown 小部件设置为在获得焦点时显示特定内容，这最终对我来说很有效）。

所以创建一个FocusNode 变量...

final FocusNode _focusNode = FocusNode();

在您的Dropdown 小部件中，将focusNode 设置为您刚刚创建的那个

那么最后在onChanged()，这样做...

onChanged: (String? newValue) {
  FocusScope.of(context).requestFocus(_focusNode);
    setState(() {
      dropdownValue = newValue!;
    });
},

【讨论】：