开源 Arkts 鸿蒙应用 开发（五）控件组成和复杂控件

文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发，公司安排开发app，临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。

 相关链接：

开源 Arkts 鸿蒙应用 开发（一）工程文件分析-CSDN博客

开源 Arkts 鸿蒙应用 开发（二）封装库.har制作和应用-CSDN博客

开源 Arkts 鸿蒙应用 开发（三）Arkts的介绍-CSDN博客

开源 Arkts 鸿蒙应用 开发（四）布局和常用控件-CSDN博客

开源 Arkts 鸿蒙应用 开发（五）控件组成和复杂控件-CSDN博客

 推荐链接：

开源 java android app 开发（一）开发环境的搭建-CSDN博客

开源 java android app 开发（二）工程文件结构-CSDN博客

开源 java android app 开发（三）GUI界面布局和常用组件-CSDN博客

开源 java android app 开发（四）GUI界面重要组件-CSDN博客

开源 java android app 开发（五）文件和数据库存储-CSDN博客

开源 java android app 开发（六）多媒体使用-CSDN博客

开源 java android app 开发（七）通讯之Tcp和Http-CSDN博客

开源 java android app 开发（八）通讯之Mqtt和Ble-CSDN博客

开源 java android app 开发（九）后台之线程和服务-CSDN博客

开源 java android app 开发（十）广播机制-CSDN博客

开源 java android app 开发（十一）调试、发布-CSDN博客

开源 java android app 开发（十二）封库.aar-CSDN博客

推荐链接：

开源C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客

开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-CSDN博客

开源 C# .net mvc 开发（三）WEB内外网访问(VS发布、IIS配置网站、花生壳外网穿刺访问)_c# mvc 域名下不可訪問內網,內網下可以訪問域名-CSDN博客

开源 C# .net mvc 开发（四）工程结构、页面提交以及显示_c#工程结构-CSDN博客

开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-CSDN博客

本章节内容如下：

1.  控件组成分析

2.  页面的跳转

3.  复杂控件

一、控件的组成分析

1.1控件的组成

装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。

自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。

系统组件：ArkUI框架中默认内置的基础和容器组件，可以直接调用，例如示例中的Column、Text、Divider、Button。

属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。

事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()

1.2  控件配置属性

配置组件的多个属性。

Image('test.jpg').alt('error.jpg')    .width(100)    .height(100)

除了直接传递常量参数，还可以传递变量或表达式

Text('hello').fontSize(this.size)
Image('test.jpg').width(this.count % 2 === 0 ? 100 : 200)    .height(this.offset + 100)

1.3  控件配置事件

使用箭头函数配置组件的事件方法

Button('Click me').onClick(() => {this.myText = 'ArkUI';})

使用组件的成员函数配置组件的事件方法，需要bind this。ArkTS语法不建议使用成员函数配合bind this来配置组件的事件方法

myClickHandler(): void {this.counter += 2;
}
...
Button('add counter').onClick(this.myClickHandler.bind(this))

使用声明的箭头函数时可以直接调用，不需要bind this。

fn = () => {console.info(`counter: ${this.counter}`)this.counter++
}
...
Button('add counter').onClick(this.fn)

1.4  控件的循环渲染

ArkUI通过自定义组件的build()函数和@Builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句，针对大数据量场景的数据懒加载语句，针对混合模式开发的组件渲染语句。

@Entry
@Component
struct MyComponent {@State count: number = 0;build() {Column() {Text(`count=${this.count}`)if (this.count > 0) {Text(`count is positive`).fontColor(Color.Green)}Button('increase count').onClick(() => {this.count++;})Button('decrease count').onClick(() => {this.count--;})}}
}

@Entry
@Component
struct Parent {@State simpleList: Array<string> = ['one', 'two', 'three'];build() {Row() {Column() {ForEach(this.simpleList, (item: string) => {ChildItem({ item: item })}, (item: string) => item)}.width('100%').height('100%')}.height('100%').backgroundColor(0xF1F3F5)}
}@Component
struct ChildItem {@Prop item: string;build() {Text(this.item).fontSize(50)}
}

二、页面的跳转，实现了从index页面跳转到pageone页面的功能

Router路由的页面是一个@Entry修饰的Component，每一个页面都需要在main_page.json中声明。

main_page.json代码

// main_page.json
{"src": ["pages/Index","pages/pageOne",]
}

index.etsd代码

// index.ets
import { router } from '@kit.ArkUI';@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('router to pageOne', { stateEffect: true, type: ButtonType.Capsule }).width('80%').height(40).margin(20).onClick(() => {this.getUIContext().getRouter().pushUrl({url: 'pages/pageOne' // 目标url}, router.RouterMode.Standard, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');})})}.width('100%')}.height('100%')}
}

pageone.ets代码

// pageOne.ets
import { router } from '@kit.ArkUI';@Entry
@Component
struct pageOne {@State message: string = 'This is pageOne';build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button('router back to Index', { stateEffect: true, type: ButtonType.Capsule }).width('80%').height(40).margin(20).onClick(() => {this.getUIContext().getRouter().back();})}.width('100%')}.height('100%')}
}

三、复杂控件

3.1 选项卡，鸿蒙的选项卡编程比安卓确实方便了许多

下面为代码

import  {MainPage} from 'library'
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
//Tabs({ barPosition: BarPosition.End })，使用这句设置为底部Tabs() { TabContent() {Text('首页的内容').fontSize(30)}.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')TabContent() {Text('发现的内容').fontSize(30)}.tabBar('发现')TabContent() {Text('我的内容').fontSize(30)}.tabBar("我的")}}
}

以下为显示效果

3.2  listview

index.ets代码

import { router } from '@kit.ArkUI';@Entry
@Component
struct Index {// 列表数据 - 字符串数组private dataList: string[] = ["苹果","香蕉","橙子","西瓜","葡萄","芒果","草莓"];build() {Column() {// 列表标题Text('水果列表').fontSize(24).fontWeight(FontWeight.Bold).margin({ top: 20, bottom: 10 })// ListView 实现List({ space: 10 }) {ForEach(this.dataList, (item: string) => {ListItem() {Text(item).fontSize(18).width('100%').height(60).textAlign(TextAlign.Center).backgroundColor(Color.White).borderRadius(8)}.onClick(() => {// 点击跳转到详情页，传递当前项内容router.push({url: 'pages/page1',params: {content: item  // 传递字符串内容}});})})}.width('100%').layoutWeight(1)  // 占据剩余空间.margin(10).divider({strokeWidth: 1,color: '#EEEEEE',startMargin: 20,endMargin: 20})}.width('100%').height('100%').backgroundColor('#F5F5F5')}
}

Page1.ets代码

import { router } from '@kit.ArkUI';@Entry
@Component
struct DetailPage {// 接收的内容状态@State private receivedContent: string = '';// 页面显示时获取路由参数onPageShow() {const params = router.getParams();console.log("test"+ params.toString());/*if (params && params['content']) {this.receivedContent = String(params['content']);} else {this.receivedContent = '未接收到内容';}* */}build() {Column({ space: 20 }) {// 页面标题Text('详情页面').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 20 })// 内容显示区域Column() {Text('接收到的内容:').fontSize(18).fontColor('#666').margin({ bottom: 10 })Text(this.receivedContent).fontSize(20).fontWeight(FontWeight.Medium).fontColor('#409EFF')}.width('90%').padding(20).backgroundColor(Color.White).borderRadius(12).shadow({ radius: 6, color: '#00000020', offsetX: 2, offsetY: 4 })// 返回按钮Button('返回').width(120).height(40).fontSize(16).margin({ top: 30 }).onClick(() => {router.back();})}.width('100%').height('100%').padding(20).backgroundColor('#F8F8F8').justifyContent(FlexAlign.Center)}
}

程序运行的效果