第二篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：添加组件和事件处理

系列短博文目录

鸿蒙开发技术点案例示例短博文系列

短博文目录

一、前言

有一必然会有二，有了第一个包含文本组件的自定义组件Index，那么就可以再添加几个组件，充实页面。那么还可以有实现组件的事件处理，那么就顺利成章了。

二、添加组件和事件处理示例代码

1.再添加一个文本组件示例代码

//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
//装饰器，指状态变量，字符串类型，赋值:"Hello World'
@State message: string = "Hello World";
//构造函数，UI声明
build() {
//横向布局组件
Row() {
//嵌套纵向布局组件
Column() {

//文本组件，参数
Text(this.message)
//设置字号
.fontSize(50)
//设置字体粗细
.fontWeight(FontWeight.Bold)
}
//设置页面宽度占比百分比
.width('100%')
//添加另一个文本组件
Text("This is another text component")
//设置字号
.fontSize(30)
//设置字体颜色
.color(Colors.Red)
}
//设置页面高度占比百分比
.height('100%')
}
}

在这个示例中，我们在组件中添加了另一个文本组件。
这个文本组件显示"This is another text component"，它的字号为30，它的字体颜色为红色。
你可以在组件中添加任意数量的子组件。
ArkTS支持各种各样的组件，包括文本组件、按钮组件、输入框组件、列表组件等等。
你可以使用这些组件来构建出各种各样的用户界面。
2.添加更多组件示例代码
这里还有一些使用ArkTS创建的组件示例：

• 文本组件：

Text("Hello World")
//设置字号
.fontSize(50)
//设置字体粗细
.fontWeight(FontWeight.Bold)

• 按钮组件：

Button("Click me")
//设置按钮颜色
.color(Colors.Blue)
//设置按钮点击事件
.onClick({
//按钮点击事件处理函数
println!("Button clicked!")
})

• 输入框组件：

Input()
//设置输入框提示文字
.placeholder("Enter your name")
//设置输入框值
.value("John Doe")

• 列表组件：

List() {
//列表项
ListItem("Item 1")
ListItem("Item 2")
ListItem("Item 3")
}

你可以使用这些组件来构建出各种各样的用户界面。
ArkTS是一个非常灵活的框架，它允许你创建出各种各样的用户界面。

三、补全其余组件事件处理示例代码

1.添加按钮组件和事件处理示例代码

//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
//装饰器，指状态变量，字符串类型，赋值:"Hello World'
@State message: string = "Hello World";
//构造函数，UI声明
build() {
//横向布局组件
Row() {
//嵌套纵向布局组件
Column() {
//文本组件，参数
Text(this.message)
//设置字号
.fontSize(50)
//设置字体粗细
.fontWeight(FontWeight.Bold)
}
//设置页面宽度占比百分比
.width('100%')
//添加另一个文本组件
Text("This is another text component")
//设置字号
.fontSize(30)
//设置字体颜色
.color(Colors.Red)
}
//设置页面高度占比百分比
.height('100%')
//添加按钮组件
Button("Click me")
//设置按钮颜色
.color(Colors.Blue)
//设置按钮点击事件
.onClick({
//按钮点击事件处理函数
println!("Button clicked!")
})
}
}

在这个示例中，我们在组件中添加了一个按钮组件。
这个按钮组件显示"Click me"，它的颜色为蓝色。
当用户点击这个按钮时，它会打印"Button clicked!"到控制台。
你可以在组件中添加任意数量的事件处理函数。
ArkTS支持各种各样的事件，包括点击事件、悬停事件、键盘事件等等。
你可以使用这些事件来构建出各种各样的交互式用户界面。
2.添加更多组件和事件处理示例代码
这里有一些使用ArkTS创建的事件处理函数示例：

• 按钮点击事件：

Button("Click me")
//设置按钮颜色
.color(Colors.Blue)
//设置按钮点击事件
.onClick({
//按钮点击事件处理函数
println!("Button clicked!")
})

• 输入框输入事件：

Input()
//设置输入框提示文字
.placeholder("Enter your name")
//设置输入框值
.value("John Doe")
//设置输入框输入事件
.onInput({
//输入框输入事件处理函数
println!("Input value: ${this.value}")
})

• 列表项点击事件：

List() {
//列表项
ListItem("Item 1")
//设置列表项点击事件
.onClick({
//列表项点击事件处理函数
println!("Item 1 clicked!")
})
ListItem("Item 2")
//设置列表项点击事件
.onClick({
//列表项点击事件处理函数
println!("Item 2 clicked!")
})
ListItem("Item 3")
//设置列表项点击事件
.onClick({
//列表项点击事件处理函数
println!("Item 3 clicked!")
})
}

你可以使用这些事件处理函数来构建出各种各样的交互式用户界面。

ArkTS的ArkUI框架是一个非常灵活的UI框架，它允许你创建出各种各样的用户界面。

未完待续