我在一个Flutter 的Web应用程序中使用了自动完成功能(使用Web呈现器html,但这并不重要).键盘导航有一个问题:如果我翻转我的用户界面(多个文本字段/自动完成+一个按钮),并通过下拉列表 Select 自动完成中的一个项目,焦点不会返回到文本字段.

请看以下专栏:

return Column(
    children: [
      ElevatedButton(
          onPressed: () {  },
          child: Text("Button1")
      ),
      Autocomplete<String>(
          optionsBuilder: (TextEditingValue value) {
            return ["ABC", "DEF"];
          }
      ),
      ElevatedButton(
        onPressed: () {  },
        child: Text("Button2")
      )
    ]
);

使用TAB,我首先导航到Button1,然后导航到AutoComplete.我通过按Enter键 Select 了一些条目,然后焦点似乎消失了,因此下一个TAB再次从Button1开始.这是一些视障用户的抱怨.

推荐答案

我曾经遇到过这个问题,我用Autocomplete个小工具中的fieldViewBuilder个解决了这个问题,以便在 Select 一个选项后重新获得焦点.我不确定这是不是一个完美的解决方案,但它对我很管用:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  FocusNode? _focusNode;
  final GlobalKey _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(onPressed: () {}, child: const Text("Button1")),
      Autocomplete<String>(
        onSelected: (value) {
          _focusNode?.requestFocus();
        },
        fieldViewBuilder: (context, controller, focusNode, onFieldSubmitted) {
          _focusNode = focusNode;
          return TextField(
            key: _key,
            controller: controller,
            focusNode: focusNode,
            onSubmitted: (value) => onFieldSubmitted(),             
          );
        },
        optionsBuilder: (TextEditingValue value) {
        return ["ABC", "DEF"];
      }),
      ElevatedButton(onPressed: () {}, child: const Text("Button2"))
    ]);
  }
}

Flutter相关问答推荐

类型int不是可迭代动态tmdbapi类型的子类型<>

SingleChildScrollView正在将Container的高度限制为子对象,尽管使用了Expanded Inside Row()

ProviderContainer和GoRouter

相同的Flutter 代码库,但Firebase登录适用于Web应用程序,但无法登录iOS应用程序

更改BottomNavigationBar onTap?的大小

如何在2024年使用Ffltter将用户数据保存在云FireStore中?

将图标呈现在Flutter 克牌小工具的角落上

为什么我的PUT请求不能正常工作?

缩短经常使用的行Theme.of(context).colorScheme

摆动更改标记可轻敲文本按钮样式

在Dart中使用Riverpod代码生成时出现问题(addListener)

如何在flutter中将所有单词的第一个字母大写

2023 年如何使用 youtube_explode_dart 包下载 URL?

如何从 Flutter 中的 App2 远程点击 App1 中的按钮

应用程序和应用程序内的 webview 之间的单点登录

如何在向下滚动时隐藏顶部卡片并在向上滚动时出现?

如何对齐卡片小部件中的图标按钮?

如何让多个图标转到不同的网址

在 flutter 中使用 StreamBuilder 在文本字段中键入时显示过滤记录

Flutter - 如何调用此函数?