HarmonyOS NEXT应用元服务开发组合场景

server/2024/12/27 17:36:51/

在一些场景中,一个功能上完整的UI对象可能是由若干个更小的UI组件组合而成的。若每一个小的UI组件都可以获焦并朗读,则会造成信息冗余和效率降低。同时由于可聚焦的组件过多过细,也会影响触摸浏览时走焦的性能体验。在这种情况下,将它们在功能或语义上聚合成一个自然组并作为一个独立可获焦的UI元素来向视障用户表达内容更加合理,且更加高效。

总体原则是:对于表示同一个对象信息的多个组件,需要进行组合标注,对外只暴露一个无障碍焦点。

如下,可以将多个控件设置为一个组,通过对组设置朗读标签,达到整组播报的效果,组内的子控件设置不可获取焦点。

@Component
export struct Rule_2_1_5 {title: string = 'Rule 2.1.5'build() {NavDestination() {Column() {Row(){//默认只有子组件才能获取焦点//日期、天气、温度等信息在每个组件独立获取焦点时分别朗读//在组合式组件规范里是不正确的。Text("23 Dec 2023") // 日期信息。组件可独立对焦和朗读.fontSize(32).fontColor(Color.Red).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).margin({right: 20})Column() // 天气信息。组件可独立对焦和朗读.backgroundColor(Color.Blue).width(50).height(50).accessibilityText("Snow") // 当该组件被屏幕阅读器选中时,该组件不包含文本信息,因此将读取此文本.margin({right: 20})Text("-1") // 温度信息。组件可独立对焦和朗读.fontSize(20).fontColor(Color.Green).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)}.height(50).margin({bottom: 20})Row(){//因为accessibilityGroup属性设置为true,子组件无法获取焦点。//获取焦点时,日期、天气、温度信息一起朗读//此时只有Row可以获取焦点,这是符合组合式组件规范的。Text("24 Dec 2023") //日期信息。组件无法聚焦,无法朗读,因为父组件的accessibilityGroup属性设置为true.fontSize(32).fontColor(Color.Red).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).margin({right: 20})Column() //天气信息组件无法聚焦,无法朗读,因为父组件的accessibilityGroup为true.backgroundColor(Color.Yellow).width(50).height(50).accessibilityText("Sunny") // 组件不包含文本信息,当组件被屏幕阅读器选中时,因此将读取此文本.margin({right: 20})Text("-7") // //温度信息。组件无法聚焦,无法朗读因为父组件的accessibilityGroup为true.fontSize(20).fontColor(Color.Green).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)}.height(50).margin({bottom: 20}).accessibilityGroup(true) // 将accessibilityGroup属性设置为true}.alignItems(HorizontalAlign.Start).padding(10)}.title(this.title)}
}

本文主要引用官方文档材料基API 12 Release


http://www.ppmy.cn/server/137297.html

相关文章

「C/C++」C++标准库之#include<fstream>文件流

✨博客主页何曾参静谧的博客📌文章专栏「C/C」C/C程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

Python之Excel自动化处理(三)

一、Excel数据拆分-xlrd 1.1、代码 import xlrd from xlutils.copy import copydef get_data():wb xlrd.open_workbook(./base_data/data01.xlsx)sh wb.sheet_by_index(0){a: [{},{},{}],b:[{},{},{}],c:[{},{},{}],}all_data {}for r in range(sh.nrows):d {type:sh.cell…

QT——TCP网络调试助手

一.项目概述 学习QTcpServer学习QTcpClicent学习TextEdit特定位置输入的文字颜色学习网络通信相关知识点 二.开发流程 1.首先我们实现当用户选择不同协议类型时不同的UI组件如何切换 绑定信号&QComboBox::currentIndexChanged与QComBobox组件,当QComboBox组件的…

2024 Rust现代实用教程:1.3获取rust的库国内源以及windows下的操作

文章目录 一、使用Cargo第三方库1.直接修改Cargo.toml2.使用cargo-edit插件3.设置国内源4.与windows下面的rust不同点 参考 一、使用Cargo第三方库 1.直接修改Cargo.toml rust语言的库:crate 黏贴至Cargo.toml 保存完毕之后,自动下载依赖 拷贝crat…

AI智能语音机器人打电销为企业带来了哪些变化

在过去的几十年,电话销售已经成为了很多公司的一种核心营销方式。无论是大型客户服务中心还是小型公司,电销行业的存在和发展都是十分必要的,但是随着科技的发展,人们已经开始寻找一些替代方式帮助他们更好地完成电销业务。其中最…

前端vue2迁移至uni-app

1.确定文件存放位置 components: 继续沿用 pages: views内容移动到pages static: assets内容移动到static uni_modules: uni-app的插件存放位置 迁移前 src├─assets│ └─less├─components│ ├─common│ │ ├─CommentPart│ │ └─MessDetail│ ├─home│…

unity中预制体的移动-旋转-放缩

unity中预制体的移动-旋转-放缩 左上侧竖栏图标介绍Tools(手形工具)Move Tool(移动工具,单位米)Rotate Tool(旋转工具,单位角度)Scale Tool(缩放工具,单位倍数)Rect Tool(矩形工具)Transform Tool(变换工具)图标快捷键对照表工具使用的小技巧…

笔记本双系统win10+Ubuntu 20.04 无法调节亮度亲测解决

sudo add-apt-repository ppa:apandada1/brightness-controller sudo apt-get update sudo apt-get install brightness-controller-simple 安装好后找到一个太阳的图标,就是这个软件,打开后调整brightness,就可以调整亮度,可…