1 安装 DevEco Studio
developer.huawei.com/consumer/cn…
2 创建默认项目
3 实现效果
4 实现代码
// 引入系统提示模块,用于显示提示信息
import prompt from '@system.prompt';
// 声明组件的入口装饰器,标识此组件为应用的入口
@Entry
// 声明一个组件结构体
@Component
struct Index {
// 声明一个状态变量message,用于存储要显示的文本信息
@State message: string = 'Hello Afra55, you are so cute!';
// 声明一个状态变量length,用于存储message的长度
@State length: number = 0;
// 构建UI界面的方法
build() {
// 创建一个垂直布局的容器
Column() {
// 如果length大于0,则显示message的长度
if (this.length > 0) {
// 显示文本,内容为"message.length="加上length的字符串表示
Text("message.length=" + this.length.toString())
}
// 创建一个按钮,显示message的内容
Button(this.message)
// 为按钮设置点击事件
.onClick(() => {
// 使用prompt模块显示一个Toast提示,内容为"Click me"
prompt.showToast({
"message": "Click me"
})
// 如果length为0,则将length设置为message的长度
if (this.length == 0) {
this.length = this.message.length
} else {
// 否则,将length重置为0
this.length = 0
}
})
}
// 设置容器的高度为100%
.height('100%')
// 设置容器的宽度为100%
.width('100%')
}
}
在这段代码中,length 是一个状态变量(用 @State 装饰器声明)。状态变量的变化会引起界面的重新渲染,这是声明式UI框架的核心特性之一。 状态变量的作用可以概括为以下几点:
-
状态存储:
- 使用
@State
装饰器声明状态变量,用于存储组件中可能会随用户交互或其他条件变化的数据。
- 使用
-
自动更新:
- 状态变量的变化会被框架自动检测,并触发界面的重新渲染。
-
声明式UI:
- 在声明式 UI 框架中,UI 是状态变量的函数。状态变量的当前值决定了 UI 的呈现方式。
- 当状态变量更新时,框架会重新调用渲染方法(如
build
),以生成反映最新状态的 UI。
这种机制简化了 UI 开发,使开发者只需关注状态的管理和更新,而无需手动操作 ,从而提高了代码的可维护性和可读性。
5 Button组件简介
Button组件是鸿蒙UI框架(ArkUI)中的一个基本组件,用于在用户界面上创建可点击的按钮。按钮上通常显示文本或图标,用户通过点击按钮来触发特定的操作。
5.1 创建Button组件
在鸿蒙开发中,可以通过调用接口来创建Button组件。Button组件的创建有两种主要形式:不包含子组件的按钮和包含子组件的按钮。
创建不包含子组件的按钮
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
例如,创建一个普通类型的按钮,并设置其文字为“Ok”:
Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40);
创建包含子组件的按钮
Button(options?: { type?: ButtonType, stateEffect?: boolean })
这种形式的按钮可以包含子组件,如文本和图像。例如,创建一个包含文本和图像的按钮:
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
Image($r('app.media.startIcon')).width(40).height(40).margin({ left: 12 })
Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
}
.alignItems(VerticalAlign.Center)
}
.borderRadius(8)
.backgroundColor(0x317aff)
.width(120)
.height(60);
5.2 Button组件的类型
鸿蒙Button组件提供了多种类型,以满足不同的设计需求。主要包括:
5.2.1 胶囊按钮(Capsule):这是Button组件的默认类型,按钮的圆角自动设置为高度的一半,不支持通过borderRadius
属性重新设置圆角。
Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(40);
5.2.2 圆形按钮(Circle):按钮为圆形,不支持通过borderRadius
属性重新设置圆角。
Button('Circle', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(90);
5.2.3 普通按钮(Normal):按钮默认圆角为0,支持通过borderRadius
属性重新设置圆角。
Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40);
5.3 自定义Button组件样式
鸿蒙提供了丰富的属性来自定义Button组件的样式,以满足不同的设计需求。
5.3.1 设置边框弧度:使用borderRadius
属性设置按钮的边框弧度。
Button('circle border', { type: ButtonType.Normal })
.borderRadius(20)
.height(40);
5.3.2 设置文本样式:通过添加文本样式设置按钮文本的展示样式,如字体大小、颜色和粗细等。
Button('font style', { type: ButtonType.Normal })
.fontSize(20)
.fontColor(Color.Pink)
.fontWeight(800);
5.3.3 设置背景颜色:使用backgroundColor
属性设置按钮的背景颜色。
Button('background color').backgroundColor(0xF55A42);
5.3.4 添加图像:通过在Button组件中添加Image子组件,可以为按钮添加图标或背景图像。
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.startIcon')).width(30).height(30)
}
.width(55)
.height(55)
.margin({ left: 20 })
.backgroundColor(0xF55A42);
5.4 Button组件的事件处理
在鸿蒙开发中,可以通过为Button组件添加事件处理函数来响应用户的点击操作。最常用的点击事件处理函数是onClick
。
Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.onClick(() => {
console.info('Button onClick');
});
除了点击事件外,Button组件还支持其他事件,如onHover
(鼠标指针移动到元素上时发生的事件)、onMouse
(鼠标移动事件)、onTouch
(触摸时发生的事件)等。根据具体需求,可以为Button组件添加不同的事件处理函数。
5.5 Button组件的实际应用场景
Button组件在鸿蒙应用开发中有着广泛的应用场景,主要包括:
5.5.1 表单提交:在用户登录/注册页面,使用按钮进行登录或注册操作。
Column() {
TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
Button('Register').width(300).margin({ top: 20 }).onClick(() => {
// 需要执行的操作
});
}.padding(20)
5.5.2 页面跳转:使用按钮启动任何用户界面元素,按钮会根据用户的操作触发相应的事件。例如,在List容器里通过点击按钮进行页面跳转, 页面跳转会在后面章节详解。
import router from '@ohos.router';
@Entry
@Component
struct ButtonCase1 {
build() {
List({ space: 4 }) {
ListItem() {
Button("First").onClick(() => {
router.pushUrl({ url: 'pages/first_page' });
}).width('100%');
}
ListItem() {
Button("Second").onClick(() => {
router.pushUrl({ url: 'pages/second_page' });
}).width('100%');
}
ListItem() {
Button("Third").onClick(() => {
router.pushUrl({ url: 'pages/third_page' });
}).width('100%');
}
}
.listDirection(Axis.Vertical)
.backgroundColor(0xDCDCDC)
.padding(20);
}
}
-
功能操作:如刷新页面、播放音乐、暂停视频等。
Button('Refresh').onClick(() => { // 刷新页面的逻辑 });
-
状态切换:如打开或关闭菜单、切换语言、切换主题等。
let isMenuOpen = false; Button('Toggle Menu').onClick(() => { isMenuOpen = !isMenuOpen; // 更新UI的逻辑 });