源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd
开天辟地 HarmonyOS(鸿蒙) - 开发基础: ArkUI 基础
示例如下:
pages\basic\Hello.ets
/** ArkUI 基础** ArkUI 使用的是声明式 UI（declarative UI），不是传统的命令式编程* 1、UI 的命令式编程：先实例化一个 UI 对象，然后按需求修改这个对象* 2、UI 的声明式编程：描述你需要的 UI 即可，需要修改时就重新描述* 3、类似的声明式 UI 编程框架还有 Flutter, SwiftUI, Jetpack Compose*/import { TitleBar } from '../TitleBar';
import { promptAction } from '@kit.ArkUI';// @ 开头的被称为装饰器，比如 @Entry, @Component, @State 等// @Entry 表示该自定义组件为入口组件
@Entry
// @Component 表示自定义组件
@Component
// 通过 struct 定义组件（不支持继承，请通过组合的方式来实现组件的复用以及界面的构建）
struct Hello {// 定义普通变量（声明时必须初始化）name: String = "webabcd"// @State 表示组件中的状态变量（声明时必须初始化），状态变量变化会触发相关 UI 刷新@State message: string = 'Hello World';// 定义普通函数hello(): string {return `hello: ${this.name}`}// @Builder 表示函数会返回一个或多个组件（可以在组件内部定义，也可以在全局定义）@Builder myBuilder1() {Text(this.message).fontSize(24).fontColor(Color.Orange)}// 构建 UI（在 build 内通过组件描述需要的 UI）build() {Column({ space: 20 }) {// 先 import { TitleBar } from '../TitleBar'; 就可以用 TitleBar 了// 如果之前没有 import 则可以把光标放到 TitleBar() 内然后通过快捷键 alt + enter 添加相关的 importTitleBar()Text(this.message).fontSize(16).fontColor(Color.Blue)/** Button 是一个按钮组件（构造 UI 组件的时候不用 new）* 组件参数有啥，可通过快捷键 ctrl + p 查看，比如 Button 的参数有 label 和 options* 本例的 options 参数是一个 ButtonOptions 接口，这个接口里有什么参数，可以在 {} 中通过快捷键 ctrl + alt + space 查看* 其中的 width(), height() 等是属性方法，支持链式调用* 其中的 onClick() 等是事件方法，支持链式调用*/Button('button', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90).height(40).onClick(() => {// 修改 @State 变量，会触发相关 UI 刷新this.message = this.hello()})// 使用组件内部 @Builder 函数中定义的组件this.myBuilder1()// 使用组件外部 @Builder 函数中定义的组件myBuilder2()// 使用 @Component 的自定义组件，并为组件传递参数MyComponent({message: "abc",// 回调函数onCallback: () => {this.message = 'MyComponent callback'}})}.width('100%').height('100%')}
}// @Builder 表示函数会返回一个或多个组件（可以在组件内部定义，也可以在全局定义）
@Builder function myBuilder2() {// 声明一个需要返回的组件，如果有复杂逻辑的话，可以在这里声明一个 @Component 装饰的自定义组件Text("myBuilder2").fontSize(24).fontColor(Color.Green)
}// 通过 @Component 定义一个自定义组件
@Component
struct MyComponent {// 组件参数，在调用此组件的时候可以传递此参数// 如果用 @Require 装饰，则代表在构造组件的时候必须要传参@Require message = ""// 定义回调函数onCallback?: () => void;build() {Button(`MyComponent ${this.message}`).onClick(() => {if (this.onCallback) {this.onCallback()}})}
}
源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd
