点击按钮时如何移动无障碍焦点？iOS/Android屏幕阅读器焦点控制问询

嘿，这个需求我刚好在项目里处理过！在Flutter中要实现点击切换按钮时，让VoiceOver（iOS）/TalkBack（Android）的焦点跳转到新页面开头，确实不能只靠默认的Semantics组件，下面给你两种亲测有效的方案：

这个方案精准可控，能直接把焦点定位到页面开头，同时引导屏幕阅读器播报：

1. 给每个页面的根节点创建独立的FocusNode：

final _page1FocusNode = FocusNode();
final _page2FocusNode = FocusNode();
final _page3FocusNode = FocusNode();

2. 用Focus组件包裹每个页面的根内容，绑定对应的焦点节点：

// 第1页的结构示例
Focus(
  focusNode: _page1FocusNode,
  // 确保这个节点能被无障碍识别
  child: Semantics(
    label: '第1页内容',
    child: Page1Content(),
  ),
)

3. 在切换按钮的回调里，等页面切换完成后，主动请求对应页面的焦点并触发播报：

ElevatedButton(
  onPressed: () {
    const targetPage = 1; // 示例目标页
    _pageController.animateToPage(
      targetPage,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    ).then((_) {
      // 页面切换完成后，定位焦点+播报
      switch(targetPage) {
        case 0:
          _page1FocusNode.requestFocus();
          SemanticsService.announce('已切换到第1页', TextDirection.ltr);
          break;
        case 1:
          _page2FocusNode.requestFocus();
          SemanticsService.announce('已切换到第2页', TextDirection.ltr);
          break;
        case 2:
          _page3FocusNode.requestFocus();
          SemanticsService.announce('已切换到第3页', TextDirection.ltr);
          break;
      }
    });
  },
  child: const Text('切换到第2页'),
)

原理说明：requestFocus()会强制把无障碍焦点移动到绑定的节点，SemanticsService.announce()则会主动触发屏幕阅读器播报指定内容，完美匹配你的需求。

如果不想手动管理焦点，也可以通过重建页面让屏幕阅读器重新扫描整个语义树：

1. 在状态类里维护当前页面的索引，给每个页面的根节点绑定动态Key：

int _currentPage = 0;
final _pageController = PageController();

// PageView的itemBuilder示例
itemBuilder: (context, index) {
  return KeyedSubtree(
    key: ValueKey<int>(_currentPage),
    child: index == 0 ? Page1Content() : 
           index == 1 ? Page2Content() : Page3Content(),
  );
}

2. 切换页面时，更新当前页索引并触发播报：

onPressed: () {
  const targetPage = 2;
  _pageController.animateToPage(
    targetPage,
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeInOut,
  ).then((_) {
    setState(() {
      _currentPage = targetPage;
    });
    SemanticsService.announce('已切换到第3页', TextDirection.ltr);
  });
}

原理说明：当KeyedSubtree的Key变化时，Flutter会重建这个页面的Widget树，屏幕阅读器会自动重新扫描该页面的语义结构，配合播报就能让用户感知到页面切换并聚焦到开头。

• 一定要在开启VoiceOver/TalkBack的情况下测试，普通模式看不到焦点变化效果；
• SemanticsService.announce()的文本要简洁清晰，符合无障碍设计规范，避免冗余描述；
• 如果页面本身有默认可聚焦元素（比如输入框），焦点定位到页面根节点后，屏幕阅读器会自动遍历到第一个可聚焦元素，这是符合用户预期的行为。

内容的提问来源于stack exchange，提问作者LorenzOliveto