【ShiMetaPi M4-R1】OpenHarmony应用开发01：RArkUI 框架
一、ArkTS语言简介
1、引言
ArkTS，作为OpenHarmony应用开发框架ArkUI的一部分，为开发者提供了一种基于TypeScript（TS）扩展的声明式开发范式。这种开发范式不仅降低了开发门槛，还提升了开发效率，使得开发者能够更加专注于业务逻辑的实现，而不是UI的渲染细节。本文将详细介绍ArkTS语言的基本概念、语法特性以及其在OpenHarmony应用开发中的应用。
2、ArkTS语言基础
1）什么是TS？
TypeScript（简称TS）是JavaScript的一个超集，它支持ECMAScript 6标准，并为其添加了静态类型和基于类的面向对象编程。TS的语法与JavaScript高度兼容，但提供了更强的类型检查和更丰富的语言特性，如接口、枚举和泛型等。
2）TS基础语法
变量声明：在TS中，可以使用var、let或const关键字来声明变量。与JavaScript不同的是，TS允许在声明变量时指定其类型。
类型注解：TS提供了丰富的类型系统，包括基本类型（如number、string、boolean）、数组类型、元组类型、枚举类型和接口等。通过类型注解，开发者可以在编译阶段就捕获到类型错误，从而提高代码的健壮性。
函数：TS中的函数声明与JavaScript类似，但可以在函数参数和返回值上添加类型注解。此外，TS还支持可选参数、默认参数和剩余参数等高级特性。
类：TS引入了类的概念，使得开发者能够以面向对象的方式组织代码。类可以包含属性、方法、构造函数和访问修饰符等。
3）ArkTS特有语法
在ArkTS中，除了TS的基础语法外，还引入了一些特有的语法和概念，如组件、状态和生命周期等。这些概念和语法使得开发者能够以声明式的方式构建UI界面，并实现数据的双向绑定和事件的响应处理。
3、ArkTS在OpenHarmony应用开发中的应用
OpenHarmony应用开发框架ArkUI提供了两种开发范式：基于JS扩展的类Web开发范式和基于TS扩展的声明式开发范式。其中，ArkTS以其强大的类型系统和声明式的编程方式，成为了众多开发者的首选。在OpenHarmony应用开发中，使用ArkTS可以轻松地构建出各种复杂的UI界面，并通过组件化的方式实现界面的复用和扩展。同时，ArkTS还支持与原生代码的互操作，使得开发者可以在需要时调用原生代码实现特定的功能。
二、 UI 组件-Row 容器介绍
本文将带您学习 ArkUI 框架中的重要线性布局容器——Row，其用于实现水平方向的布局。
1、主轴与纵轴概念
在 Row 容器中：
主轴是水平方向，用于排列子组件。
纵轴是垂直方向，用于设置子组件的对齐方式。
理解主轴和纵轴有助于我们灵活控制子组件的布局和对齐。
2、Row 容器的定义与属性
1）Row 容器的定义
Row 容器通过指定可选参数 space，可以设置子组件在水平方向上的间距：
Row({ space: 10 }) {Text("Child 1")Text("Child 2")
}2）Row 容器的属性
alignItems（设置子组件在纵轴上的对齐方式）：
VerticalAlign.Top：顶部对齐。
VerticalAlign.Center（默认值）：居中对齐。
VerticalAlign.Bottom：底部对齐。
justifyContent（设置子组件在主轴上的分布方式）：
FlexAlign.Start：靠近主轴的起点排列。
FlexAlign.Center：居中排列。
FlexAlign.End：靠近主轴的终点排列。
FlexAlign.SpaceBetween：均匀分布子组件，相邻元素之间的间距相等。
FlexAlign.SpaceAround：相邻元素间距相等，但两端的间距为相邻元素间距的一半。
FlexAlign.SpaceEvenly：所有元素之间的间距完全相等。
提示
如果设置了 space 参数，则 justifyContent 属性将被忽略，因为 space 已定义了间距。
3、 Row 演示示例
// xxx.ets
@Entry
@Component
struct RowExample {build() {Column({ space: 5 }) {// 设置子组件水平方向的间距为5Text('space').width('90%')Row({ space: 5 }) {Row().width('30%').height(50).backgroundColor(0xAFEEEE)Row().width('30%').height(50).backgroundColor(0x00FFFF)}.width('90%').height(107).border({ width: 1 })// 设置子元素垂直方向对齐方式Text('alignItems(Bottom)').width('90%')Row() {Row().width('30%').height(50).backgroundColor(0xAFEEEE)Row().width('30%').height(50).backgroundColor(0x00FFFF)}.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })Text('alignItems(Center)').width('90%')Row() {Row().width('30%').height(50).backgroundColor(0xAFEEEE)Row().width('30%').height(50).backgroundColor(0x00FFFF)}.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })// 设置子元素水平方向对齐方式Text('justifyContent(End)').width('90%')Row() {Row().width('30%').height(50).backgroundColor(0xAFEEEE)Row().width('30%').height(50).backgroundColor(0x00FFFF)}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)Text('justifyContent(Center)').width('90%')Row() {Row().width('30%').height(50).backgroundColor(0xAFEEEE)Row().width('30%').height(50).backgroundColor(0x00FFFF)}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)}.width('100%')}
}在这个示例中，以上代码通过ArkUI框架展示了Column和Row组件的嵌套使用，以实现复杂的布局。代码首先使用Column组件设置垂直布局，并在其中嵌套了多个Text和Row组件。Text组件用于显示说明性文本，如“space”、“alignItems(Bottom)”等。Row组件则用于水平布局，展示了如何通过space属性设置子组件间距，以及通过alignItems和justifyContent属性调整子元素在垂直和水平方向上的对齐方式。每个Row组件都设置了不同的宽度、高度、背景色和边框，以展示布局效果。整体布局宽度设置为100%
4、总结
Row容器是ArkUI开发框架中一种非常实用的线性布局容器。通过灵活使用它的属性和参数，我们可以轻松实现各种水平方向的布局需求。无论是简单的子组件排列还是复杂的对齐和分布方式，Row容器都能提供强大的支持。
三、UI 组件-Column 容器介绍
本文将带您学习 ArkUI 框架中的重要线性布局容器——Column，其用于实现垂直方向的布局。
1、主轴与纵轴概念
在 Column 容器中：
主轴是竖直方向，用于排列子组件。
纵轴是水平方向，用于设置子组件的对齐方式。
这与 Row 容器的方向定义正好相反。
2、 Column 容器的定义与属性
1）Column 容器的定义
Column 容器的定义方式与 Row 类似，支持通过参数 space 设置子组件的间距：
Column({ space: 10 }) {Text("Child 1")Text("Child 2")
}2）Column 容器的属性
alignItems（设置子组件在纵轴上的对齐方式）：
HorizontalAlign.Start：起始端对齐。
HorizontalAlign.Center（默认值）：居中对齐。
HorizontalAlign.End：末端对齐。
justifyContent（设置子组件在主轴上的分布方式）：
适用的值与 Row 容器一致，如 FlexAlign.Center、FlexAlign.End 等。
3、Column 容器的使用示例
// xxx.ets
@Entry
@Component
struct ColumnExample {build() {Column({ space: 5 }) {// 设置子元素垂直方向间距为5Text('space').width('90%')Column({ space: 5 }) {Column().width('100%').height(30).backgroundColor(0xAFEEEE)Column().width('100%').height(30).backgroundColor(0x00FFFF)}.width('90%').height(100).border({ width: 1 })// 设置子元素水平方向对齐方式Text('alignItems(Start)').width('90%')Column() {Column().width('50%').height(30).backgroundColor(0xAFEEEE)Column().width('50%').height(30).backgroundColor(0x00FFFF)}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })Text('alignItems(End)').width('90%')Column() {Column().width('50%').height(30).backgroundColor(0xAFEEEE)Column().width('50%').height(30).backgroundColor(0x00FFFF)}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })Text('alignItems(Center)').width('90%')Column() {Column().width('50%').height(30).backgroundColor(0xAFEEEE)Column().width('50%').height(30).backgroundColor(0x00FFFF)}.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })// 设置子元素垂直方向的对齐方式Text('justifyContent(Center)').width('90%')Column() {Column().width('90%').height(30).backgroundColor(0xAFEEEE)Column().width('90%').height(30).backgroundColor(0x00FFFF)}.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)Text('justifyContent(End)').width('90%')Column() {Column().width('90%').height(30).backgroundColor(0xAFEEEE)Column().width('90%').height(30).backgroundColor(0x00FFFF)}.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)}.width('100%').padding({ top: 5 })}
}在这个示例中，以上代码通过ArkUI框架的Column组件展示了垂直布局的使用，并在其中嵌套了多个Text和Column组件。代码首先设置了外层Column的子元素垂直方向间距为5。接着，通过不同的Column嵌套展示了alignItems和justifyContent属性的效果。alignItems用于设置子元素在水平方向上的对齐方式，分别展示了Start（左对齐）、End（右对齐）和Center（居中对齐）的效果。而justifyContent则用于设置子元素在垂直方向上的对齐方式，展示了Center（居中对齐）和End（底部对齐）的效果。每个Column组件都设置了不同的宽度、高度、背景色和边框，以清晰地展示布局效果。整体布局宽度设置为100%，并添加了顶部内边距，使布局更加美观。
4、总结
Column容器是ArkUI开发框架中一种非常重要的布局方式。通过合理使用其属性和子组件的排列方式，我们可以轻松地构建出各种美观且实用的用户界面。
四、UI 组件-Text 组件
文本组件是用于显示一段文本的基础组件，同时支持丰富的样式和布局配置，还可以包含 Span、ImageSpan 等子组件。
1、文本组件的定义与属性
接口：
Text(content?: string | Resource, options?: TextOptions)属性说明：
content：显示的文本内容。
样式设置：可以通过 .style() 方法为文本指定对齐方式、字体大小、边框、填充等样式。
2、使用示例
content：要显示的文本内容，一个简单的例子如下：
// xxx.ets
@Extend(Text)
function style(TextAlign: TextAlign) {.textAlign(TextAlign).fontSize(12).border({ width: 1 }).padding(10).width('100%')
}@Entry
@Component
struct TextExample1 {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {// 文本水平方向对齐方式设置// 单行文本Text('textAlign').fontSize(9).fontColor(0xCCCCCC)Text('TextAlign set to Center.').style(TextAlign.Center)Text('TextAlign set to Start.').style(TextAlign.Start)Text('TextAlign set to End.').style(TextAlign.End)// 多行文本Text('This is the text content with textAlign set to Center.').style(TextAlign.Center)Text('This is the text content with textAlign set to Start.').style(TextAlign.Start)Text('This is the text content with textAlign set to End.').style(TextAlign.End)// 文本超长时显示方式Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)// 超出maxLines截断内容展示Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.').textOverflow({ overflow: TextOverflow.Clip }).maxLines(1).style(TextAlign.Start)// 超出maxLines展示省略号Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.').textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).style(TextAlign.Start)Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)Text('This is the text with the line height set. This is the text with the line height set.').style(TextAlign.Start)Text('This is the text with the line height set. This is the text with the line height set.').style(TextAlign.Start).lineHeight(20)}.height(600).width(340).padding({ left: 35, right: 35, top: 35 })}
}五、UI 组件-Toggle 组件
组件提供勾选框样式、状态按钮样式及开关样式。仅当ToggleType为Button时可包含子组件。
1、定义与参数
Toggle(options: { type: ToggleType, isOn?: boolean })参数说明：
type：切换类型，入Switch（开关）、Checkbox（复选框）、Button（按钮）。
isOn：当前状态（true或false）
2、使用示例
一个简单的例子如下：
// xxx.ets
@Entry
@Component
struct ToggleExample {build() {Column({ space: 10 }) {Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {Toggle({ type: ToggleType.Switch, isOn: false }).selectedColor('#007DFF').switchPointColor('#FFFFFF').onChange((isOn: boolean) => {console.info('Component status:' + isOn)})Toggle({ type: ToggleType.Switch, isOn: true }).selectedColor('#007DFF').switchPointColor('#FFFFFF').onChange((isOn: boolean) => {console.info('Component status:' + isOn)})}Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {Toggle({ type: ToggleType.Checkbox, isOn: false }).size({ width: 20, height: 20 }).selectedColor('#007DFF').onChange((isOn: boolean) => {console.info('Component status:' + isOn)})Toggle({ type: ToggleType.Checkbox, isOn: true }).size({ width: 20, height: 20 }).selectedColor('#007DFF').onChange((isOn: boolean) => {console.info('Component status:' + isOn)})}Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {Toggle({ type: ToggleType.Button, isOn: false }) {Text('status button').fontColor('#182431').fontSize(12)}.width(106).selectedColor('rgba(0,125,255,0.20)').onChange((isOn: boolean) => {console.info('Component status:' + isOn)})Toggle({ type: ToggleType.Button, isOn: true }) {Text('status button').fontColor('#182431').fontSize(12)}.width(106).selectedColor('rgba(0,125,255,0.20)').onChange((isOn: boolean) => {console.info('Component status:' + isOn)})}.width('100%').padding(24)}}
}六、 UI 组件-Slider 组件
滑动条组件，通常用于快速调节设置值的大小，如音量调节、亮度调节等应用场景。
1、定义与参数
接口：
Slider(options?: SliderOptions)参数说明：
value：当前滑动值（支持双向绑定）。
min/max：滑动条的最大值和最小值。
step：滑动步长。
样式：支持OutSet（外置样式）和InSet（内嵌样式）。
2、使用示例
// xxx.ets
@Entry
@Component
struct SliderExample {@State outSetValueOne: number = 40@State inSetValueOne: number = 40@State noneValueOne: number = 40@State outSetValueTwo: number = 40@State inSetValueTwo: number = 40@State vOutSetValueOne: number = 40@State vInSetValueOne: number = 40@State vOutSetValueTwo: number = 40@State vInSetValueTwo: number = 40build() {Column({ space: 8 }) {Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)Row() {Slider({value: this.outSetValueOne,min: 0,max: 100,style: SliderStyle.OutSet}).showTips(true).onChange((value: number, mode: SliderChangeMode) => {this.outSetValueOne = valueconsole.info('value:' + value + 'mode:' + mode.toString())})// toFixed(0)将滑动条返回值处理为整数精度Text(this.outSetValueOne.toFixed(0)).fontSize(12)}.width('80%')Row() {Slider({value: this.outSetValueTwo,step: 10,style: SliderStyle.OutSet}).showSteps(true).onChange((value: number, mode: SliderChangeMode) => {this.outSetValueTwo = valueconsole.info('value:' + value + 'mode:' + mode.toString())})Text(this.outSetValueTwo.toFixed(0)).fontSize(12)}.width('80%')Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)Row() {Slider({value: this.inSetValueOne,min: 0,max: 100,style: SliderStyle.InSet}).blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1').showTips(true).onChange((value: number, mode: SliderChangeMode) => {this.inSetValueOne = valueconsole.info('value:' + value + 'mode:' + mode.toString())})Text(this.inSetValueOne.toFixed(0)).fontSize(12)}.width('80%')Row() {Slider({value: this.inSetValueTwo,step: 10,style: SliderStyle.InSet}).blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1').showSteps(true).onChange((value: number, mode: SliderChangeMode) => {this.inSetValueTwo = valueconsole.info('value:' + value + 'mode:' + mode.toString())})Text(this.inSetValueTwo.toFixed(0)).fontSize(12)}.width('80%')Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)Row() {Slider({value: this.noneValueOne,min: 0,max: 100,style: SliderStyle.NONE}).blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1').showTips(true).onChange((value: number, mode: SliderChangeMode) => {this.noneValueOne = valueconsole.info('value:' + value + 'mode:' + mode.toString())})Text(this.noneValueOne.toFixed(0)).fontSize(12)}.width('80%')Row() {Column() {Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)Row() {Text().width('10%')Slider({value: this.vOutSetValueOne,style: SliderStyle.OutSet,direction: Axis.Vertical}).blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1').showTips(true).onChange((value: number, mode: SliderChangeMode) => {this.vOutSetValueOne = valueconsole.info('value:' + value + 'mode:' + mode.toString())})Slider({value: this.vOutSetValueTwo,step: 10,style: SliderStyle.OutSet,direction: Axis.Vertical}).blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1').showSteps(true).onChange((value: number, mode: SliderChangeMode) => {this.vOutSetValueTwo = valueconsole.info('value:' + value + 'mode:' + mode.toString())})}}.width('50%').height(300)Column() {Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)Row() {Slider({value: this.vInSetValueOne,style: SliderStyle.InSet,direction: Axis.Vertical,reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true}).showTips(true).onChange((value: number, mode: SliderChangeMode) => {this.vInSetValueOne = valueconsole.info('value:' + value + 'mode:' + mode.toString())})Slider({value: this.vInSetValueTwo,step: 10,style: SliderStyle.InSet,direction: Axis.Vertical,reverse: true}).showSteps(true).onChange((value: number, mode: SliderChangeMode) => {this.vInSetValueTwo = valueconsole.info('value:' + value + 'mode:' + mode.toString())})}}.width('50%').height(300)}}.width('100%')}
}七、UI 组件-Animation 组件&Transition 组件
在现代UI界面设计中，动画扮演者举足轻重的角色。它不仅能够提升界面的直观性，还能显著改善应用程序的外观和用户体验。ArkUI开发框架深知动画的重要性，为开发者提供了丰富的动画能力，如属性动画、转场动画及自定义动画等。接下来，本文将详细介绍这些动画类型，并通过实战演示如何在ArkUI中使用它们。
1、 动画介绍
1）属性动画
属性动画允许开发者对UI元素的属性（如位置、大小、颜色等）进行动态改变，从而创建出丰富的动画效果。在ArkUI中，属性动画可以通过设置动画属性、持续时间、延迟时间等参数来定制。
2）转场动画
转场动画主要用于页面之间的切换效果。它能够使界面在切换时更加流畅，提升用户体验。ArkUI提供了多种转场动画效果，如淡入淡出、滑动等，开发者可以根据实际需求选择合适的动画效果。
3）自定义动画
除了属性动画和转场动画外，ArkUI还支持自定义动画。开发者可以通过编写代码来定义自己的动画效果，实现更加复杂和个性化的动画需求。
2、实战演示
接下来，我们将通过实战演示如何在ArkUI中使用这些动画能力。
1）属性动画实战
假设我们有一个按钮元素，想要在用户点击按钮时改变其颜色。我们可以使用属性动画来实现这一效果。首先，我们需要创建一个按钮元素，并为其添加点击事件监听器。然后，在点击事件触发时，我们使用属性动画来改变按钮的颜色。
// 创建按钮元素
Button button = new Button();
button.setText("点击我");// 添加点击事件监听器
button.setOnClickedListener(() -> {// 使用属性动画改变按钮颜色Animation animation = new Animation();animation.setProperty("backgroundColor", Color.RED, Color.BLUE);animation.setDuration(1000); // 设置动画持续时间animation.start(button); // 启动动画
});2）转场动画实战
假设我们有两个页面，想要在用户点击按钮时切换到另一个页面，并添加淡入淡出的转场动画效果。首先，我们需要创建两个页面元素，并为其添加按钮和点击事件监听器。然后，在点击事件触发时，我们使用转场动画来实现页面切换。
// 创建两个页面元素
Page page1 = new Page();
Page page2 = new Page();// 添加按钮和点击事件监听器到page1
Button button = new Button();
button.setText("切换到页面2");
page1.add(button);button.setOnClickedListener(() -> {// 使用转场动画切换到page2Transition transition = new Transition();transition.setType(TransitionType.FADE_IN_FADE_OUT); // 设置淡入淡出效果transition.start(page1, page2); // 启动转场动画
});3）自定义动画实战
假设我们想要创建一个自定义的动画效果，如让一个元素沿着特定路径移动。首先，我们需要定义一个动画路径。然后，我们使用自定义动画来实现元素沿着该路径移动的效果。
// 创建动画路径
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(100, 100);// 创建自定义动画
CustomAnimation customAnimation = new CustomAnimation(path);
customAnimation.setDuration(2000); // 设置动画持续时间// 获取要移动的元素并应用动画
Element element = ...; // 假设已经有一个元素
customAnimation.start(element); // 启动自定义动画需要注意的是，以上代码示例仅用于演示如何在ArkUI中使用动画能力，并非完整的可运行代码。在实际开发中，开发者需要根据自己的需求来创建UI元素、设置动画参数等。综上所述，ArkUI为开发者提供了丰富的动画能力，使得在UI界面中创建出各种动画效果变得更加简单和直观。通过合理使用这些动画能力，开发者可以显著提升应用程序的外观和用户体验。