@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}") })
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
