ArkUI框架
1.ArkUI 概述
ArkUI（即方舟UI框架），其本质就是开发用户界面的框架，ArkUI包含了丰富的UI组件，如下图所示：文本，图片，进度条，按钮等，这些你能看到的所有界面内容，通通称之为UI组件。
实际上ArkUI就是专门为鸿蒙系统打造的一套UI组件库，通过这套组件库可以构建丰富的应用界面。
学习ArkUI主要学什么呢？
● 组件的代码结构长什么样？
● 常用组件有哪些？（文本、按钮、文本输入、进度条、 复选框等）
● 组件的样式如何设置？
● 如何与组件进行交互？
● 如何改变组件的状态？
● 如何控制组件的显示与隐藏？
● 如何显示相似的组件？
2. 组件分类
为了更快、更好的学习ArkUI这套组件库，我们可以把这些组件进行分类
1. 系统组件：ArkUI自身提供的组件，直接拿来就能用
○ 基础组件：用于显示基本的UI效果
■ 文本、图片、进度条、复选框、单选按钮、输入框等
○ 容器组件：用于包裹其他的基础组件或容器组件，一般用来对页面进行布局
■ 线性布局、层叠布局、相对布局、网格布局、滚动容器、列表等
2. 自定义组件：需要自己写代码，基于已有的组件重组为新的组件。
3.组件结构
在ArkUI中，所有你能在屏幕上看到显示效果的通通称之为组件。不管是系统组件、还是自定义组件，每一个组件都遵循相同的代码结构。
@Component //任何一个组件都必须被@Component
strcut 组件名{build(){ //构建组件的内容}
}
● struct Index用来定义组件，组件名为Index
● @Component 声明Index为一个组件
● @Entry声明该组件为入口组件，页面渲染时，首先显示该组件
● build() 组件的构建函数，通过这个函数描述组件内部的细节
● Column() {} 这是容器组件，组件宽度占100%，高度占100%，容器内容水平、垂直居中
● Text() 这是文本组件，组件内容显示“你好 鸿蒙”，字体大小50，颜色红色，加粗，可以点击。
4.属性样式
ArkUI提供了丰富的UI组件，每一个组件都可以通过属性函数来设置UI的显示样式。
有一些属性函数是所有组件都可以调用的，称为通用属性；有些属性函数是某个组件特点的，称为私有属性。
通用属性：
.width() //设置组件的宽
.height() //设置组件的高度
.backgroundColor() //设置组件的背景颜色
.border() //设置组件的边框
Text私有属性：
.fontSize() //设置字体大小
.fontColor() //设置字体颜色
.fontStyle() //设置字体样式
Text('Hello Harmony').fontSize(30) //字体大小
Text('Hello Harmony').fontColor(Color.Red) //字体颜色.fontSize(20)
Text('Hello Harmony') .fontWeight(FontWeight.Bolder) //字体加粗.fontColor(Color.Green)
Text('Hello Harmony').fontStyle(FontStyle.Italic) //字体倾斜.border({ //边框样式：线粗细、线样式、线颜色width: 1, style: BorderStyle.Solid,color:Color.Red })
Text('Hello Harmony').backgroundColor(Color.Orange) //背景颜色
5.事件监听
组件除了显示信息之外还能与用户进行交互，组件响应用户交互的行为叫做事件，比如最常见的就是点击事件。
事件也分为通用事件和组件私有事件，这里学习两个通用事件，其他的事件在具体学习某一个组件事继续学习。
● 点击事件：手指在组件上按下并抬起，则会响应点击事件
● 触摸事件：手指触摸屏幕时响应
○ 手指按下：手指触摸到组件时触发
○ 手指抬起：手指抬起时触发
○ 手指滑动：手指按下组件后滑动时触发
Text('点我试试').fontSize(30).fontColor(Color.Green).onClick(() => {console.log('你终于点我了') })Text('摸我试试').fontSize(30).fontColor(Color.Red).onTouch((e: TouchEvent) => {if (e.type === TouchType.Down) {console.log("你真敢摸啊")} else if (e.type === TouchType.Up) {console.log("别走啊多摸一会儿")} else if (e.type === TouchType.Move) {console.log("你摸就摸了，你还敢滑")}})
6.组件状态
组件状态指的是组件在
ArkUI采用的是数据更新UI的模式，我们看到的用户界面可以分为两部分：一部分是UI组件本身，另一部分是组件内的数据。
如果希望在程序运行时，组件内的数据发生改变同步更新UI界面，这就需要用到ArkUI提供的状态管理机制。
如下图所示：点击按钮时，改变文本显示内容：
@Entry
@Component
struct Index {@State message: string = 'HelloWorld'build() {Column() {Text(this.message).fontSize(24)Button('改变状态变量').margin({ top: 20 }).onClick(() => {this.message = this.message === 'HelloWorld' ? 'HarmonyOS' : 'HelloWorld'})}.width('100%').alignItems(HorizontalAlign.Center)}
}
7.条件渲染
条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。
@Entry@Componentstruct Index {@State num: number = 1build() {Column() {if (this.num === 1) {Text('HarmonyOS').backgroundColor(Color.Red).fontColor(Color.White)} else if (this.num === 2) {Text('Open Harmony').backgroundColor(Color.Green)} else if (this.num === 3) {Text('Android').backgroundColor(Color.Green)}//点击切换文本Button('点我试试').onClick(() => {this.num++if (this.num === 4) {this.num = 1}})}}}
8.循环渲染
循环渲染指的是，根据数据动态生成用户界面中的多个相似元素。如下图所示，是若干个Text组成的列表，就非常实用用循环渲染。
- 没有使用循环渲染
@Entry
@Component
struct Index {build() {Column() {Text('北京').width('100%').height(30).backgroundColor('#F2F2F2')Text('上海').width('100%').height(30).backgroundColor('#FFFFFF')Text('深圳').width('100%').height(30).backgroundColor('#F2F2F2')Text('广州').width('100%').height(30).backgroundColor('#FFFFFF')Text('武汉').width('100%').height(30).backgroundColor('#F2F2F2')Text('南京').width('100%').height(30).backgroundColor('#FFFFFF')Text('成都').width('100%').height(30).backgroundColor('#F2F2F2')Text('郑州').width('100%').height(30).backgroundColor('#FFFFFF')Text('合肥').width('100%').height(30).backgroundColor('#F2F2F2')Text('乌鲁木齐').width('100%').height(30).backgroundColor('#FFFFFF')}.width('100%').height('100%')}
}
- 使用循环渲染
@Entry
@Component
struct Index {@State citys:string[] = ['北京','上海','深圳','广州','武汉','南京','成都','郑州','合肥','乌鲁木齐']build() {Column() {ForEach(this.citys,(city:string,index:number)=>{Text(city).width('100%').height(30).backgroundColor(index%2===0?'#F2F2F2':'#FFFFFF')})}.width('100%').height('100%')}
}
9. ArkUI 体系结构
鸿蒙学习地址