在Flutter Web上,文本表单字段存在画外音焦点问题

z9ju0rcb  于 2023-03-19  发布在  Flutter
关注(0)|答案(1)|浏览(165)

在flutter web上,使用TextFormFields上的VoiceOver时,无法始终获得焦点。请参考图像。观察辅助功能焦点已移动到第二个输入,而输入光标仍在第一个输入上。
请参考https://github.com/mfdcoder/flutter-form-voiceover处的代码
重现步骤
1.使用Ctl + Option +右箭头键导航到
1.继续导航到第二个、第三个和第四个文本表单字段
1.注意到画外音提示“您在文本字段中。要在此字段中输入文本,请键入”。
1.具有焦点的输入通常不接受用户键入的内容。
1.结果不一致。TextFormFields随机获得/不获得焦点
同样的内容可以在flutter gallery演示应用程序www.example.com上复制https://gallery.flutter.dev/#/demo/text-field
医生摘要(要查看所有详细信息,请运行flutter doctor -v):抖动(通道稳定,3.7.0,在macOS 12.5 21 G72达尔文-x64上,Android工具链-为Android设备开发(Android SDK版本33.0.0)Xcode -为iOS和macOS开发(Xcode 14.1)Chrome -为Web开发Android Studio(版本2021.2)VS代码(版本1.75.1)连接的设备(5可用)HTTP主机可用性
Accessibility focus and form focus do not match

Semantics(
    focusable: true,
    focused: _addressLine2.hasFocus,
    child: TextFormField(
        autovalidateMode: AutovalidateMode.onUserInteraction,
        controller: _addressLine2Controller,
        keyboardType: TextInputType.text,
        textInputAction: TextInputAction.next,
        validator: (value) {
            if (value == null || value.isEmpty) {
                return 'Please enter some text in line 2';
            }
            return null;
        },
        inputFormatters: [LengthLimitingTextInputFormatter(255)],
        decoration: const InputDecoration(
        hintText: 'Address Line 2',
        labelText: 'Address Line 2',
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(6)),
          borderSide: BorderSide(color: Colors.red),
        )),
        focusNode: _addressLine2,
        onSaved: (value) {
            _city.requestFocus();
        },
    ),
),
ijnw1ujt

ijnw1ujt1#

FocusTrabesalGroup包裹你的主屏幕,它会改变flutter web应用程序窗口小部件层次结构中的焦点顺序。

return MaterialApp(
  home:FocusTraversalGroup(
    policy: WidgetOrderTraversalPolicy(),
    child: Scaffold(
      body: Container(),
    ),
  ),
);

相关问题