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

本文链接：https://blog.csdn.net/2401_84166965/article/details/138017499

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

htt

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

按钮组件：

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是一个非常灵活的框架，它允许你创建出各种各样的用户界面。
鸿蒙2

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

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