概述
为满足不同用户的阅读习惯,ArkUI提供了镜像能力。在特定情况下将显示内容在X轴上进行镜像反转,由从左向右显示变成从右向左显示。
镜像前 | 镜像后 |
---|---|
当组件满足以下任意条件时,镜像能力生效:
-
组件的direction属性设置为Direction.Rtl;
-
组件的direction属性设置为Direction.Auto,且当前的系统语言(如维吾尔语)的阅读习惯是从右向左。
基本概念
- LTR:顺序为从左向右
- RTL:顺序为从右向左
使用约束
ArkUI 如下能力已默认适配镜像:
类别 | 名称 |
---|---|
基础组件 | Swiper、Tab、TabContent、List、Progress、CalendarPicker、CalendarPickerDialog、TextPicker、TextPickerDialog、DatePicker、DatePickerDialog、Grid、WaterFlow、Scroll、ScrollBar、AlphabetIndexer、Stepper、SideBarContainer、Navigation、NavDestination、Rating、Slider、Toggle、Badge、Counter、Chip、SegmentButton、bindMenu、bindContextMenu、TextInput、TextArea、Search、Stack、GridRow、Text、Select、Marquee、Row、Column、Flex、RelativeContainer、ListItemGroup |
高级组件 | SelectionMenu 、TreeView 、Filter、SplitLayout、ToolBar、ComposeListItem、EditableTitleBar、ProgressButton、SubHeader 、Popup、Dialog、SwipeRefresher |
通用属性 | position、markAnchor、offset、alignRules、borderWidth、borderColor、borderRadius、padding、margin |
接口 | AlertDialog、ActionSheet、promptAction.showDialog、promptAction.showToast |
界面布局、边框设置:关于方向类的通用属性,如果需要支持镜像能力,使用泛化的方向指示词 start/end 入参类型 替换 left/right、x/y等绝对方向指示词的入参类型,来表示自适应镜像能力。但如下三种场景还需要进行适配:
-
Canvas组件只有限支持文本绘制的镜像能力。
-
XComponent组件不支持组件镜像能力。
界面布局和边框设置
目前,以下三类通用属性需要使用新入参类型适配:
位置设置:position、markAnchor、offset、alignRules
边框设置:borderWidth、borderColor、borderRadius
尺寸设置:padding、margin
以position为例,需要把绝对方向x、y描述改为新入参类型start、end的描述,其他属性类似。
import { LengthMetrics } from '@kit.ArkUI';
@Entry
@Component
struct Index1 {
build() {
Stack({ alignContent: Alignment.TopStart }) {
Stack({ alignContent: Alignment.TopStart }) {
Column()
.width(100)
.height(100)
.backgroundColor(Color.Red)
.position({ start: LengthMetrics.px(200), top: LengthMetrics.px(200) }) //需要同时支持LTR和RTL时使用API12新增的LocalizedEdges入参类型,
//仅支持LTR时等同于.position({ x: '200px', y: '200px' })
}.backgroundColor(Color.Blue)
}.width("100%").height("100%").border({ color: '#880606' })
}
}
自定义绘制Canvas组件
Canvas组件的绘制内容和坐标均不支持镜像能力。已绘制到Canvas组件上的内容并不会跟随系统语言的切换自动做镜像效果。
CanvasRenderingContext2D的文本绘制支持镜像能力,在使用时需要与Canvas组件的通用属性direction(组件显示方向)和CanvasRenderingContext2D的属性direction(文本绘制方向)协同使用。具体规格如下:
- 优先级:CanvasRenderingContext2D的direction属性 > Canvas组件通用属性direction > 系统语言决定的水平显示方向。
- Canvas组件本身不会自动跟随系统语言切换镜像效果,需要应用监听到系统语言切换后自行重新绘制。
- CanvasRenderingContext2D绘制文本时,只有符号等文本会对绘制方向生效,英文字母和数字不响应绘制方向的变化。
import { BusinessError, commonEventManager } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
@State message: string = 'Hello world';
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
aboutToAppear(): void {
// 监听系统语言切换
let subscriber: commonEventManager.CommonEventSubscriber | null = null;
let subscribeInfo2: commonEventManager.CommonEventSubscribeInfo = {
events: ["usual.event.LOCALE_CHANGED"],
}
commonEventManager.createSubscriber(subscribeInfo2, (err: BusinessError, data: commonEventManager.CommonEventSubscriber) => {
if (err) {
console.error(`Failed to create subscriber. Code is ${err.code}, message is ${err.message}`);
return;
}
subscriber = data;
if (subscriber !== null) {
commonEventManager.subscribe(subscriber, (err: BusinessError, data: commonEventManager.CommonEventData) => {
if (err) {
console.error(`订阅语言地区状态变化公共事件失败. Code is ${err.code}, message is ${err.message}`);
return;
}
console.info('成功订阅语言地区状态变化公共事件: data: ' + JSON.stringify(data))
// 监听到语言切换后,需要重新绘制Canvas内容
this.drawText();
})
} else {
console.error(`MayTest Need create subscriber`);
}
})
}
drawText(): void {
console.error("MayTest drawText")
this.context.reset()
this.context.direction = "inherit"
this.context.font = '30px sans-serif'
this.context.fillText("ab%123&*@", 50, 50)
}
build() {
Row() {
Canvas(this.context)
.direction(Direction.Auto)
.width("100%")
.height("100%")
.onReady(() =>{
this.drawText()
})
.backgroundColor(Color.Pink)
}
.height('100%')
}
}
镜像前 | 镜像后 |
---|---|
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。
点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助!~
鸿蒙(HarmonyOS NEXT)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
2.视频学习资料+学习PDF文档
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、(南向驱动、嵌入式等)鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。
HarmonyOS Next 最新全套视频教程
大厂面试必问面试题
鸿蒙南向开发技术
鸿蒙APP开发必备
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
《鸿蒙开发进阶》
《鸿蒙进阶实战》
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。