Flutter：如何将可访问性焦点集中到自定义应用栏

Posted 2023-02-22

【中文标题】Flutter：如何将可访问性焦点集中到自定义应用栏

【英文标题】：Flutter: How to get accessibility focus to custom appbar

【发布时间】：2020-09-14 07:49:30

【问题描述】：

如果您使用带有默认应用栏的默认 Material 脚手架，并使用 TalkBack 打开应用，则辅助功能焦点会自动移动到应用栏中的第一项（通常是“返回”按钮）。

我希望我的 appbar 比默认的高，所以我创建了一个自定义的并将其传递给脚手架：

class CustomAppbar extends StatelessWidget implements PreferredSizeWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
      height: 120,
      child: Semantics(
        focused: true,
        child: RaisedButton(
          child: Text('Test'),
          onPressed: () ,
        ),
      ),
    );
  

  @override
  Size get preferredSize => Size.fromHeight(120);

Widget build(BuildContext context) 
    return Scaffold(
      appBar: CustomAppbar(),
      body: SafeArea(
        child: Stack(children: <Widget>[
          Column(children: <Widget>[
            _buildContent(),
          ]),
        ]),
      ),
    );
  

问题是，如果我不使用默认的 AppBar，我无法将焦点移到第一个按钮，即使我用语义包装它。

默认的 Scaffold 如何处理自动对焦？我在代码中搜索并找不到它。

【问题讨论】：

试试FocusNodeapi.flutter.dev/flutter/widgets/FocusNode-class.html

FocusNode 与语义焦点不同。

根据其他答案***.com/questions/57273232/…，我知道那个“解决方案”，但这似乎是一个黑客行为。无论如何，谢谢。

请参阅api.flutter.dev/flutter/semantics/SemanticsNode-class.html。您可以使用visitChildren 方法以编程方式聚焦项目

【参考方案1】：

所以flutter为我们提供了一个小部件PreferredSize，我们可以在其中覆盖它的高度和宽度，我就这样解决了我的问题

 Widget appBar() 
        return PreferredSize(
          preferredSize: Size.fromHeight(120.0),
          child: AppBar(
            automaticallyImplyLeading: false,
            elevation: 0,
            backgroundColor: Colors.blue,
            flexibleSpace: SafeArea(
              child: Container(
                padding: EdgeInsets.only(
                  left: 16,
                  right: 16,
                  top: 16,
                  bottom: 16
                ),
                child: Container(
                  // make any type of view
                ),
              ),
            ),
          ),
        );
      

【讨论】：

我的示例代码已经实现了那个小部件。问题不在于获得自定义高度，而是保持可访问性功能。

【参考方案2】：

您可以使用语义节点包装您的 AppBar 并设置focused:true。

在这里阅读更多： https://api.flutter.dev/flutter/semantics/SemanticsProperties/focused.html