空格键不适用于仅适用于Flutter Web Production构建的TextField

cgh8pdjw  于 2023-01-27  发布在  Flutter
关注(0)|答案(3)|浏览(161)

每当我尝试在Flutter Web发布(产品)的TextField中按下“Space”时,它什么也不做。然而,该行为在flutter Web调试环境中不会复制。到目前为止,我发现:

  • Flutter Web仅受Chrome浏览器支持,但截至目前,Chrome、Safari、Edge、Firefox均受(See Flutter Documentation)支持
  • 该问题不会在Chrome浏览器上重现,即使在发布版本中也是如此。
    更新:升级到Flutter 2.10后可用
5n0oy7gb

5n0oy7gb1#

如果您在Flutter web上的SingleChildScrollView或ListView中使用TextfieldTextFormField,空格键将不起作用。
因为它将采用其默认行为,即滚动屏幕。
要避免这种情况,请将可滚动小部件的primary属性设置为false

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

vybvopom2#

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

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

txu3uszq3#

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

这样做会破坏FocusTraversalGroup和FocusTraversalOrder,使Tab键通过浏览器的按钮切换。即使KeyboardListener侦听Tab并使用此推荐代码,Tab仍会通过浏览器的按钮切换,如Next和Favorites以及侦听器和焦点节点:

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

相关问题