Flutter无障碍功能插件accessibilty的使用

Flutter无障碍功能插件accessibilty的使用

Accessibilty 插件

此Flutter插件可以从iOS和Android设备上收集无障碍数据。它可以收集屏幕阅读器(ScreenReader)、语音识别(VoiceOver)、字体大小等信息。

开始使用

要获取这些数据,只需创建一个该插件的实例并调用getAccessibilityStats()方法。该方法将返回一个字符串,包含基于当前使用的设备和平台的无障碍数据。

响应示例

Android响应示例

{
    "isTouchExplorationEnabled": "false", 
    "isTalkBackEnabled": "false", 
    "isSamsungTalkBackEnabled": "false", 
    "isSelectToSpeakEnabled": "false", 
    "isSwitchAccessEnabled": "false", 
    "isBrailleBackEnabled": "false", 
    "isVoiceAccessEnabled": "false", 
    "fontScale": "1.3", 
    "fontWeightAdjustment": "0", 
    "displayScale": "1.1892857142857143", 
    "isClosedCaptioningEnabled": "false", 
    "isAnimationsDisabled": "false", 
    "enabledAccessibilityServices": "[]", 
    "screenOrientation": "portrait", 
    "applicationId": "ExampleApp", 
    "defaultLanguage": "en-US", 
    "sdkVersion": "33", 
    "manufacturer": "Google", 
    "modelName": "sdk_gphone64_x86_64", 
    "isNightModeEnabled": "false", 
    "daytime": "day"
}

iOS响应示例

{
    "Accessibility_isSpeakScreenEnabled": "false", 
    "Accessibility_isSpeakSelectionEnabled": "false",
    "Watch_supported": "true",
    "Accessibility_uses_any_accessibility_setting": "false",
    "System_model_name": "Simulator",
    "Screen_in_split_screen": "false",
    "Accessibility_isBoldTextEnabled": "false", 
    "Stats_version": "iOS 2022-04-15", 
    "Screen_device_idiom": "phone",
    "Accessibility_isGrayscaleEnabled": "false",
    "Screen_zoomed": "false",
    "Preference_preferred_content_size": "large",
    "Screen_window_width": "393",
    "Accessibility_isSwitchControlRunning": "false",
    "Accessibility_isShakeToUndoEnabled": "true",
    "Screen_scale": "@3x",
    "Accessibility_isClosedCaptioningEnabled": "false",
    "Accessibility_islnvertColorsEnabled": "false",
    "Preference_daytime": "day", 
    "Screen_width": "393",
    "Accessibility_isReduceTransparencyEnabled": "false",
    "System_model_id": "x86_64", 
    "Stats_timestamp": "1696490514.6148028", 
    "App_bundle_identifier": "accessibility.plugin.com.accessibiltyExample",
    "System_OS_major_version": "16",
    "Accessibility_isDarkerSystemColorsEnabled": "false", 
    "Accessibility_isAssistiveTouchRunning_with_isGuidedAccessEnabled": "Unknown", 
    "System_Preferred_language": "nl-US", 
    "System_Dutch_region": "false",
    "Preference_UI_style": "light", 
    "Screen_display_gamut": "P3", 
    "Accessibility_isMonoAudioEnabled": "false",
    "Screen_orientation": "portrait",
    "Accessibility_isVoiceOverRunning": "false",
    "Accessibility_isGuidedAccessEnabled": "false"
}

完整示例代码

以下是使用accessibilty插件的完整示例代码:

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:accessibilty/accessibilty.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _accessibilityStats = '未知';
  final _accessibiltyPlugin = Accessibilty();

  [@override](/user/override)
  void initState() {
    super.initState();
    initAccessibilityStatsState();
  }

  // 平台消息是异步的,因此我们在异步方法中初始化。
  Future<void> initAccessibilityStatsState() async {
    String accessibilityStats;
    // 平台消息可能会失败,所以我们使用try/catch来处理PlatformException。
    // 我们也处理了消息可能返回null的情况。
    try {
      accessibilityStats = await _accessibiltyPlugin.getAccessibilityStats() ??
          '未知无障碍统计信息';
    } on PlatformException {
      accessibilityStats = '获取无障碍统计信息失败。';
    }

    // 如果在异步平台消息飞行时小部件从树中被移除,则我们希望丢弃回复而不是调用setState来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _accessibilityStats = accessibilityStats;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Text('运行于: $_accessibilityStats\n'),
        ),
      ),
    );
  }
}

更多关于Flutter无障碍功能插件accessibilty的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter无障碍功能插件accessibilty的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,无障碍功能(Accessibility)对于提升应用的可访问性至关重要,特别是对于视障用户。Flutter 提供了一套丰富的 API 来支持无障碍功能。accessibility 插件并不是 Flutter 官方提供的一个独立插件,但 Flutter SDK 本身内置了对无障碍功能的支持。以下是如何在 Flutter 应用中使用无障碍功能的代码示例。

1. 基本无障碍标签

为 Widget 添加无障碍标签,使得屏幕阅读器能够识别并朗读这些标签。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Accessibility Example'),
        ),
        body: Center(
          child: Semantics(
            label: 'This is a button',
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中,Semantics widget 被用来为 ElevatedButton 添加一个无障碍标签 label

2. 自定义无障碍行为

除了基本的标签,你还可以自定义无障碍行为,比如无障碍焦点顺序、无障碍动作等。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Accessibility Custom Action Example'),
        ),
        body: Center(
          child: Semantics(
            container: true,
            explicitChildNodes: true,
            label: 'Custom Accessible Widget',
            onTapHint: 'Custom Action',
            child: GestureDetector(
              onTap: () {
                // Perform custom action when tapped
                print('Custom action performed!');
                // Optionally announce something to screen readers
                SystemChannels.accessibilityFeatures.invokeMethod('announce', 'Custom action performed.');
              },
              child: Container(
                width: 200,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Tap Me',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中,Semantics widget 添加了 onTapHint 属性来提示用户这是一个可点击的元素,并且自定义了一个点击动作。当点击时,会在控制台打印消息,并通过 SystemChannels.accessibilityFeatures.invokeMethod 方法向屏幕阅读器宣布一个消息。

3. 无障碍焦点顺序

你可以通过 order 属性来定义无障碍焦点的顺序。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Accessibility Focus Order Example'),
        ),
        body: Semantics(
          container: true,
          explicitChildNodes: true,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Semantics(
                order: 1,
                label: 'First Button',
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text('First'),
                ),
              ),
              Semantics(
                order: 2,
                label: 'Second Button',
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text('Second'),
                ),
              ),
              Semantics(
                order: 3,
                label: 'Third Button',
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text('Third'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中,通过为每个 ElevatedButton 添加 Semantics 并设置 order 属性,定义了无障碍焦点的顺序。

这些示例展示了如何在 Flutter 应用中使用无障碍功能。通过合理使用 Semantics widget 和相关的无障碍属性,你可以大大提升应用的可访问性。

回到顶部