Flutter Web - 在 TextFields 中不使用空格键

Question

当我按下空格键时，空格不会出现，继续按它，就会出现一个"quot；它不再允许我编辑文本。

我声明duranter调试工作正常，但使用发布网站不再工作。我使用的命令是：flutterbuild-web--webrendererhtml--release用于部署webapp。

[✓]Flutter(通道稳定，3.0.5，在macOS 12.6 21G115 darwin arm上，locale it it)•Flutter 3.0.5版本，位于/Users/mauriziomancini/FlutterDev/Flutter•上游存储库https://github.com/flutter/flutter.git•框架修订f1875d570e(2 mesi-fa)，2022-07-13 11:24:16-0700•发动机版本e85ea0e79c•Dart版本2.17.6•DevTools版本2.12.2

[✓]Android工具链-为Android设备开发(Android SDK版本33.0.0-rc1)•Android SDK，位于/Users/mauriziomancini/Library/Android/SDK•平台android-33，构建工具33.0.0-rc1•Java二进制文件，位于：/Applications/Android Studio.app/Contents/jre/Contents/Home/bin/Java•Java版本OpenJDK运行时环境(内部版本11.0.11+0-b60-7772763)•接受所有Android许可证。

[✓]Xcode-为iOS和macOS开发(Xcode 14.0)•Xcode位于/Applications/Xcode.app/Contents/Developer•CocoaPods 1.11.2版

[✓]Chrome-为网络开发•Chrome位于/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓]安卓工作室(版本2021.1)•安卓工作室，位于/Applications/Android Studio.app/Contents•Flutter插件可以从以下位置安装：https://plugins.jetbrains.com/plugin/9212-flutter•Dart插件可以从以下位置安装：https://plugins.jetbrains.com/plugin/6351-dart•Java版本OpenJDK运行时环境(内部版本11.0.11+0-b60-7772763)

[✓]VS代码(版本1.71.2)•VS代码，位于/Applications/Visual Studio Code.app/Contents•Flutter扩展版本3.48.0

[✓]连接的设备(3个可用)•iPhone 14 Pro Max(手机)•8D8DCB54-F212-451-9CD4-B367955056BB•ios•com.apple.CoreSimulator.SimRuntime.iOS-16-0(模拟器)•macOS(台式机)•macOS•darwin-arm64•macOS 12.6 21G115 darwin arm•Chrome(网络)•Chrome•网络javascript•谷歌Chrome 105.0.5195.125

[✓]HTTP主机可用性•所有必需的HTTP主机都可用

•未发现任何问题！

在这里您可以找到代码的摘录

Scaffold(
appBar: AppBar(
backgroundColor: coloreApp,
title: Image.asset("lib/assets/titolo.png"),
actions: [
IconButton(
onPressed: () async {
await FirebaseAuth.instance.signOut();
setState(() {});
},
icon: const Icon(Icons.login_rounded),
),
],
),
body: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20),
child: SizedBox(
child: Image.asset("lib/assets/icona.png"),
height: 80,
),
),
Padding(
padding: const EdgeInsets.all(paddingNumber),
child: TextField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
decoration: inputDecoration("Email"),
),
),

Padding(
padding: const EdgeInsets.all(paddingNumber),
child: TextField(
controller: passwordController,
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: inputDecoration("Password"),
),
),
],
)),
);

你可以在www.leonardowebapp.it 上找到一个不起作用的例子

Answer 1

因为你也可以使用空格键滚动，所以当你点击空格键时，它很可能会被滚动捕获。检查在MaterialApp中配置快捷方式是否有帮助--

@override
Widget build(BuildContext context) {
final shortcuts = Map.of(WidgetsApp.defaultShortcuts);
shortcuts[LogicalKeySet(LogicalKeyboardKey.space)] = ActivateIntent();
return MaterialApp(
shortcuts: kIsWeb? shortcuts : null,
scrollBehavior: MyCustomScrollBehavior(),
home: HomeScreen(),
);
}

Answer 2

我在调试部署工作时遇到了同样的问题，但Flutter web版本导致空间输入无法在TextFields中工作。

因此，按照建议，我最终将其添加到main.dart:中的MaterialApp中

shortcuts: {
LogicalKeySet(LogicalKeyboardKey.space): ActivateIntent(),
},