空格键不适用于 TextField 仅适用于 Flutter Web 生产版本

Question

每当我尝试在 Flutter Web 发布（生产）的TextField中按“空格”时，它什么都不做。 但是，该行为不会在 flutter web 调试环境中复制。 到目前为止我发现了什么：

• Flutter Web 仅受 Chrome 浏览器支持，但截至目前 - 支持 Chrome、Safari、Edge、Firefox （请参阅 Flutter 文档）
• 即使在发布版本中，问题也不会在 Chrome 浏览器上重现。

更新：升级到 Flutter 2.10 后可以使用

Answer 1

如果您在 Flutter web 上的 SingleChildScrollView 或 ListView 中使用Textfield或TextFormField ，空格键将不起作用。

因为它将采用其默认行为，即滚动屏幕。

为避免这种情况，请将可滚动小部件的primary属性设置为false 。

SingleChildScrollView(
    primary: false,  //<------- this one, by default it is true
    child: TextFormField(...),
    )

Answer 2

我通过以下方式修改 MaterialApp 解决了这个问题

return MaterialApp(
   shortcuts: {
     LogicalKeySet(LogicalKeyboardKey.space): ActivateIntent(),
   },
   //...
 );

Answer 3

return MaterialApp(
   shortcuts: {
     LogicalKeySet(LogicalKeyboardKey.space): ActivateIntent(),
   },
   //...
 );

这样做会破坏 FocusTraversalGroup 和 FocusTraversalOrder，而是通过浏览器的按钮制作制表键制表符。 即使使用 KeyboardListener('s) 监听 tab 和这个推荐的代码，除了你的监听器和焦点节点之外，tab 仍然会通过浏览器的按钮，如 next 和 favorites：

document.addEventListener('keydown', function(event) {
            // console.log('event key'+event.code);
            if (event.code == 'Tab') {
                event.preventDefault();
            }
        });