Flutter 原生分段控件集成插件 native_segments 的使用

可访问的分段控件（iOS）和“顶部”标签栏（Android）用于 Flutter

该插件提供了在 iOS 上可访问的原生 UISegmentedControl 和在 Android 上的 TabLayout（与我的 native_tab_bar 插件不同，后者提供了底部导航标签栏）。

此组件通常用于页面顶部的导航。Flutter 中的“等效”组件是 CupertinoSegmentedControl 和 TabBar 组件。

解决的可访问性问题

由于 Apple 和 Google 在其可访问性 API 中施加的限制，当前 Flutter 引擎无法完全复制这些组件中的原生可访问性行为，因为它们的“特征”仅通过原生视图类可用（Flutter 有自己的渲染引擎，并不会为每种类型的组件实例化原生视图类）。

例如，Flutter 组件试图通过将“按钮”一词和段落索引（如“1/3”等）添加到可访问性标签中来模仿原生组件的行为，但这是一种不正确的做法，因为：

• 盲文显示器用户期望简短的特征描述，如“按钮”和列表项编号，因为盲文显示器价格昂贵且列数有限（通常是 40 列或更少）。
• 使用语音控制/语音访问的用户需要能够只用按钮标签进行语音操作，而无需说出标题加上“按钮 2/3”。
• 当逐字导航时，VoiceOver 和 TalkBack 用户希望只读取按钮标题，而不是“按钮”或“2/3”等。

安装

flutter pub add native_segments

依赖项

• flutter
• plugin_platform_interface
• uuid

使用示例

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

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:native_segments/native_segments.dart';

const Color kPrimaryBlue = Color(0xff0073d1);

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Segments Test',
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  List<NativeSegment> segments = [
    NativeSegment(title: 'first'),
    NativeSegment(title: 'second segment long text'),
    NativeSegment(title: 'third segment'),
  ];

  List<NativeSegment> segments2 = [
    NativeSegment(title: 'another item'),
    NativeSegment(title: 'something else'),
    NativeSegment(title: 'final segment'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Segments Example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const Divider(height: 2),
          NativeSegments(
            onValueChanged: (value) {
              print("#1 CHANGED VALUE: ${value}");
            },
            segments: segments,
            style: NativeSegmentsStyle(
              backgroundColor: Colors.transparent,
              isDarkTheme: false,
              selectedSegmentColor: kPrimaryBlue,
            ),
          ),
          const Divider(height: 2),
          NativeSegments(
            onValueChanged: (value) {
              print("#2 CHANGED VALUE: ${value}");
            },
            segments: segments,
            style: NativeSegmentsStyle(
              backgroundColor: Colors.transparent,
              isDarkTheme: true,
              selectedSegmentColor: kPrimaryBlue,
            ),
          ),
          const Divider(height: 2),
          NativeSegments(
            onValueChanged: (value) {
              print("#3 CHANGED VALUE: ${value}");
            },
            segments: segments2,
            style: NativeSegmentsStyle(
              selectedSegmentColor: kPrimaryBlue,
              backgroundColor: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }
}