Flutter原生标签栏插件native_tab_bar的使用

可访问的标签导航栏插件适用于Flutter

此插件为Flutter提供了可访问、可自定义样式、本地化的底部标签导航组件，适用于Android和iOS平台。它几乎可以作为BottomNavigationBar Flutter小部件的直接替代品。在iOS上渲染UITabBar，在Android上渲染BottomNavigationView（与Material 3兼容）。其行为类似于BottomNavigationBarType.fixed，不提供典型的Flutter动画，而是尊重iOS和Android用户熟悉的本机平台行为和动画。

解决的无障碍问题

Flutter的BottomNavigationBar小部件存在一些无障碍问题。

1. iOS上的大内容查看器支持不足

   • 由于空间限制，标签字体大小不应缩放，这给低视力用户造成了障碍。

2. iOS或Android上的标签角色或索引不正确

   • Flutter小部件标签的无障碍标签如下：“主页标签1/3”，“下载标签2/3”，“设置标签3/3”

   • 它们应该被标记为：“主页”，“下载”，“设置”

   • Voice Control 在iOS上无法识别Flutter小部件。例如，如果用户说：“点击主页”，Voice Control不会识别该标签，因为它认为标签是“主页标签1/3”。即使用户说：“点击主页标签一/三”，Voice Control也无法识别。

   • 盲文显示器用户 会因为较长的标签而感到困惑和不便，因为盲文显示器对标签有简短的表示方法，而这些标签却详细说明了它们。

此插件通过在各自的平台本地组件中提供本机iOS和Android行为来解决所有这些问题，以满足无障碍用户的需求。

安装

flutter pub add native_tab_bar

依赖项

• cupertino_icons
• plugin_platform_interface
• uuid
• visibility_detector

开发依赖项（仅在开发此插件时需要）

• pigeon（用于API生成）

使用示例

完整的使用示例请参见example/lib/main.dart。

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentTabIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('NativeTabBar Example')),
      bottomNavigationBar: NativeTabBar(
        onTap: (index) {
          print("Selected tab index: $index");
          setState(() {
            currentTabIndex = index;
          });
        },
        tabs: <NativeTab>[
          NativeTab(
            title: 'Home',
            nativeTabIcon: NativeTabIcon.adaptive(
              material: Icons.home, // 材质设计未选中图标
              materialSelected: Icons.home_filled, // 材质设计选中图标
              cupertino: CupertinoIcons.house, // iOS未选中图标
              cupertinoSelected: CupertinoIcons.house_fill, // iOS选中图标
            ),
          ),
          NativeTab(
            title: 'Downloads',
            nativeTabIcon: NativeTabIcon.adaptive(
              material: Icons.download_outlined, // 材质设计未选中图标
              materialSelected: Icons.download, // 材质设计选中图标
              cupertino: CupertinoIcons.cloud_download, // iOS未选中图标
              cupertinoSelected: CupertinoIcons.cloud_download_fill, // iOS选中图标
            ),
          ),
          NativeTab(
            title: 'Settings',
            nativeTabIcon: NativeTabIcon.adaptive(
              material: Icons.settings_outlined, // 材质设计未选中图标
              materialSelected: Icons.settings, // 材质设计选中图标
              cupertino: CupertinoIcons.gear_alt, // iOS未选中图标
              cupertinoSelected: CupertinoIcons.gear_alt_fill, // iOS选中图标
            ),
          ),
        ],
        style: NativeTabBarStyle(
          selectedItemColor: Colors.lightBlue, // 选中标签的颜色
          materialIndicatorBackgroundColor: Colors.lightBlue, // 材质设计指示器背景颜色
          materialIndicatorForegroundColor: Colors.white, // 材质设计指示器前景颜色
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Home page content goes here."),
          ),
        ],
      ),
    );
  }
}