ArkUI框架

1.ArkUI 概述

ArkUI（即方舟UI框架），其本质就是开发用户界面的框架，ArkUI包含了丰富的UI组件，如下图所示：文本，图片，进度条，按钮等，这些你能看到的所有界面内容，通通称之为UI组件。
实际上ArkUI就是专门为鸿蒙系统打造的一套UI组件库，通过这套组件库可以构建丰富的应用界面。
ArkUI框架
学习ArkUI主要学什么呢？
● 组件的代码结构长什么样？
● 常用组件有哪些？（文本、按钮、文本输入、进度条、复选框等）
● 组件的样式如何设置？
● 如何与组件进行交互？
● 如何改变组件的状态？
● 如何控制组件的显示与隐藏？
● 如何显示相似的组件？

2. 组件分类

为了更快、更好的学习ArkUI这套组件库，我们可以把这些组件进行分类

1. 系统组件：ArkUI自身提供的组件，直接拿来就能用
○ 基础组件：用于显示基本的UI效果
■ 文本、图片、进度条、复选框、单选按钮、输入框等
○ 容器组件：用于包裹其他的基础组件或容器组件，一般用来对页面进行布局
■ 线性布局、层叠布局、相对布局、网格布局、滚动容器、列表等
2. 自定义组件：需要自己写代码，基于已有的组件重组为新的组件。

ArkUI框架

3.组件结构

在ArkUI中，所有你能在屏幕上看到显示效果的通通称之为组件。不管是系统组件、还是自定义组件，每一个组件都遵循相同的代码结构。


@Component			//任何一个组件都必须被@Component
strcut 组件名{
  build(){		//构建组件的内容
    
  }
}

xml
123456

ArkUI框架
● struct Index用来定义组件，组件名为Index
● @Component 声明Index为一个组件
● @Entry声明该组件为入口组件，页面渲染时，首先显示该组件
● build() 组件的构建函数，通过这个函数描述组件内部的细节
● Column() {} 这是容器组件，组件宽度占100%，高度占100%，容器内容水平、垂直居中
● Text() 这是文本组件，组件内容显示“你好鸿蒙”，字体大小50，颜色红色，加粗，可以点击。

4.属性样式

ArkUI提供了丰富的UI组件，每一个组件都可以通过属性函数来设置UI的显示样式。
ArkUI框架
有一些属性函数是所有组件都可以调用的，称为通用属性；有些属性函数是某个组件特点的，称为私有属性。

通用属性：
.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)	//背景颜色 

xml

1234567891011121314151617

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("你摸就摸了，你还敢滑")
    }
  })

xml

123456789101112131415

6.组件状态

组件状态指的是组件在
ArkUI采用的是数据更新UI的模式，我们看到的用户界面可以分为两部分：一部分是UI组件本身，另一部分是组件内的数据。
如果希望在程序运行时，**组件内的数据发生改变同步更新UI界面，**这就需要用到ArkUI提供的状态管理机制。

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)
  }
}

xml

1234567891011121314151617

7.条件渲染

条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。
ArkUI框架


@Entry
  @Component
  struct Index {
    @State num: number = 1

    build() {
      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
          }
        })
      }
    }
  }

xml

12345678910111213141516171819202122232425

8.循环渲染

循环渲染指的是，根据数据动态生成用户界面中的多个相似元素。如下图所示，是若干个Text组成的列表，就非常实用用循环渲染。
ArkUI框架

没有使用循环渲染


@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%')
  }
}

xml

123456789101112131415161718

使用循环渲染


@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%')
  }
}

xml

123456789101112131415