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

news2024/11/27 0:35:37

在一些场景中,一个功能上完整的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.coloradmin.cn/o/2233793.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024双11高端家用投影仪哪个牌子好?当贝因何力压极米坚果

随着生活水平的日益提升与科技的飞速进步,人们不只通过外出游玩来获得身心的愉悦,也通过提升家庭娱乐生活的品质,来获得足不出户的快乐。在2024年双11购物狂欢节之际,很多家庭都纷纷将高端家用投影仪加入购物清单,但各…

SpringBoot day 1104

ok了家人们这周学习SpringBoot的使用,和深入了解,letgo 一.SpringBoot简介 1.1 设计初衷 目前我们开发的过程当中,一般采用一个单体应用的开发采用 SSM 等框架进行开发,并在 开发的过程当中使用了大量的 xml 等配置文件&#x…

HCIP(7)-边界网关协议BGP基本配置(对等体peer,宣告network,引入import)

边界网关协议(Border Gateway Protocol,BGP)是一种用来在路由选择域之间交换网络层可达性信息(Network Layer Reachability Information,NLRI)的路由选择协议。由于不同的管理机构分别控制着他们各自的路由…

算法: 链表题目练习

文章目录 链表题目练习两数相加两两交换链表中的节点重排链表合并 K 个升序链表K 个一组翻转链表 总结 链表题目练习 两数相加 坑: 两个链表都遍历完后,可能需要进位. class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {ListNode cur1 l1;ListNode…

HTML 基础标签——元数据标签 <meta>

文章目录 1. `<meta>` 标签概述2. 属性详解2.1 `charset` 属性2.2 `name` 属性2.3 `content` 属性2.4 `http-equiv` 属性3. 其他常见属性小结在 HTML 文档中,元数据标签 <meta> 是一种重要的标签,用于提供关于文档的信息,这些信息不直接显示在网页内容中,但对于…

新闻稿件管理系统:SpringBoot框架深度解析

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

【网络】自定义协议——序列化和反序列化

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是序列化和分序列&#xff0c;并且自己能手撕网络版的计算器。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不…

CTFshow之信息收集第1关到10关。详细讲解

得而不惜就该死&#xff01; --章总 开始新的篇章&#xff01; 零、目录 一、实验准备 1、ctf网站&#xff1a;ctf.show 2、工具&#xff1a;chrome浏览器、hackbar插件 3、burpsuite抓包工具 二、实验技巧 &#xff08;一&#xff09;F12摸奖 源码泄露 &#xff08;二…

Redis ——发布订阅

问题引入&#xff1a; 服务器A、B、C、D&#xff0c;客户端&#xff1a;C1&#xff0c;C2&#xff0c;C3&#xff0c;C4&#xff1b; 客户端基于集群聊天服务器的负载均衡分配&#xff1b; C1 被分配到A&#xff0c;C2 被分配到B&#xff0c;C3 被分配到C&#xff0c;C4 被分…

【漏洞复现】某平台-QRcodeBuildAction-LoginSSO-delay-mssql-sql注入漏洞

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…

API网关 - JWT认证 ; 原理概述与具体实践样例

API网关主要提供的能力&#xff0c;就是协议转换&#xff0c;安全&#xff0c;限流等能力。 本文主要是分享 如何基于API网关实现 JWT 认证 。 包含了JWT认证的流程&#xff0c;原理&#xff0c;与具体的配置样例 API网关认证的重要性 在现代Web应用和微服务架构中&#x…

Excel:vba实现批量插入图片

实现的效果&#xff1a; 实现的代码&#xff1a; Sub InsertImageNamesAndPictures()Dim PicPath As StringDim PicName As StringDim PicFullPath As StringDim RowNum As IntegerDim Pic As ObjectDim Name As String 防止表格里面有脏数据Cells.Clear 遍历工作表中的每个图…

什么是 OpenTelemetry?

OpenTelemetry 定义 OpenTelemetry (OTel) 是一个开源可观测性框架&#xff0c;允许开发团队以单一、统一的格式生成、处理和传输遥测数据&#xff08;telemetry data&#xff09;。它由云原生计算基金会 (CNCF) 开发&#xff0c;旨在提供标准化协议和工具&#xff0c;用于收集…

电商美工必备神器:千鹿 AI 轻松解决场景图主图尺寸问题

前言 在电商领域&#xff0c;美工在做详情页设计时&#xff0c;常常会为图片尺寸问题而苦恼。而 AI 扩图在此刻就成为了美工们的得力助手。其中&#xff0c;场景图主图太小是一个让人颇为头疼的难题。千鹿 AI 作为一款强大的工具&#xff0c;能够一键将图片改成指定尺寸&#…

关于 PDF 抽取的吐槽

今天一下午写了8&#xff0c;9个 PDF 抽取的脚本。最后又回归最开始简单的模式了&#xff0c;要疯了&#xff0c;谁懂啊。 我是下午的工作是这样的(我是这么疯的) 最开始使用最简单的策略&#xff0c;先使用 PyPDF2.PdfReader(file) 读取文件&#xff0c;然后在每一页使用 pag…

无人机避障——(局部规划方法)DWA(动态窗口法)

传统的DWA算法更加倾向于车辆等差速无人车&#xff0c;旋翼无人机是全速的&#xff0c;全向的。 全局路径是通过A*算法生成的 局部路径规划效果&#xff1a; DWA算法效果&#xff1a; 过程图&#xff1a; 完整过程&#xff1a; PID算法效果&#xff1a; 过程图&#xff1a…

知识吾爱纯净版小程序系统 leibiao SQL注入漏洞复现(XVE-2024-30663)

0x01 产品简介 知识吾爱纯净版小程序系统是一款基于微信小程序平台开发的知识付费应用,旨在帮助用户快速建立自己的知识付费平台,实现支付变现和流量主收益。它提供了简洁明了的用户界面和良好的用户体验,同时注重用户隐私保护,确保用户信息的安全存储和传输。 0x02 漏洞…

基于web的便捷饭店点餐小程序的设计与实现(lw+演示+源码+运行)

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…

全面解析:深度学习技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;深度学习技术及其应用 全面解析&#xff1a;深度学习技术及其应用 全面解析&#xff1a;深度学习技术及其应…

项目实战使用gitee

1.创建本地仓库 2.进行提交到本地仓库 创建仓库后在idea中会显示图标&#xff0c;点击绿色的√进行快速提交 3.绑定远程仓库 4.番外篇-创建gitee仓库 注意不要勾选其他