【木棉花】初识ArkUI 原创
前言
ArkUI开发框架是方舟开发框架的简称。根据官方的资料，ArkUI是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架，其使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具，帮助开发者提升应用界面开发效率。对于未接触过ArkUI的开发者，不妨跟着笔者对ArkUI进行初次体验。
正文
打开DevEco Studio(开发工具的版本必须支持API9)，创建一个新的project，相关勾选如下
此工程的名称可取任意字符串，而API版本需要选择9，以及Model的类型需要选择stage。
成功创建工程后，在工程文件目录中打开目录：Demo/entry/src/main/ets/pages，在pages文件下放置着index.ets。双击index.ets，可在编辑器中编写此文件。
ets类型文件是记录页面UI信息的文件，方舟UI框架会依据ets文件在设备上生成和渲染应用的某个页面。新工程被创建时，开发环境会默认为此项目分配与生成一个ets文件，即pages文件夹里的index.ets。
打开右端的Previewer(预览器)，Nodejs会模拟鸿蒙设备渲染当前选中的ets文件
不出所料，是一个经典且轻量的Helloworld程序。按照官方的说法，当一位初学者在集成开发环境中运行出此Helloworld程序时，可以被认为成功入门了ArkUI。
不过，要弄清楚ets文件是如何作用于UI界面的，或者换句话说，要试图理解ArkUI的语法规则，我们可以对index.ets文件做一些尝试性的修改。
不妨先把字符串‘Hello World’修改为‘Hello ArkUI’
@Entry
@Component
struct Index {
@State message: string = 'Hello ArkUI' //修改message对应的字符串内容
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}可以看到预览器屏幕显示的文本改变了。事实上，Text组件代码块的括号中写入的字符串类型的参数即为预览器中的Text组件所显示的文本信息；而message则是值为‘Hello ArkUI’的字符串变量。在ArkUI的语法中，@State修饰了变量message，使message在index{ }内的作用域中成功声明后，message状态数据被修改时会触发组件的build方法进行UI界面更新。不过用之前需要在变量前加上this，即this.message，这么做才能让编译器识别到作用域上已经声明的变量message。
在上述的index.ets中,Text组件链式调用了fontSize()方法和fontWeight()方法，分别用于设置Text组件的字体大小和字体的粗细程度这两个UI属性（你可以通过修改方法的参数来控制组件的属性）。链式调用是ArkUI的一个优势特征，它不仅增加了代码的可读性和美观程度，而且让开发者免去了设置组件属性时低效的重复性机械操作。当然，Java也可以实现链式调用，不过Java实现链式调用的所有方法（除去最末端调用的方法）的返回值都必须是对象本身，即都需要有操作语句--“return this；”。
接着，我们在原来代码的基础上增添两个组件，分别是Divider组件（实现分割线UI效果）和Button组件（按钮组件）。
@Entry
@Component
struct Index {
@State message: string = 'Hello ArkUI'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
//增加新的Divider组件
Divider()
//增加新的Button组件
Button(){
Text('Click me')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
}
.height(50)
.width(200)
.backgroundColor(Color.Blue)
.margin(20)
}
.width('100%')
}
.height('100%')
}
}在上述代码中，各个组件之间的关系不尽相同。作为容器组件的Column组件，是Text组件（显示文本为‘Hello ArkUI’），Divider组件和Button组件的共同父组件，因为这三个子组件都被Column组件代码块的{ }封装在内。同时，Text组件（显示文本为‘Hello ArkUI’），Divider组件和Button组件之间互为兄弟组件，它们在逻辑关系上是相互平行的。By the way，Column组件的功能是强制其子组件按竖直方向排布。
可以注意到，Button组件内也封装了一个子组件Text，其显示的文本为‘Click me’。并且，Button组件调用了margin()这一属性方法，使得其与Divider组件产生间距。预览器效果如下：
之后，我们再给Button组件添加一个交互事件。
@Entry
@Component
struct Index {
@State message: string = 'Hello ArkUI'
msg1 : string = 'Hello ArkTS' //声明新字符串变量msg1
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Divider()
Button(){
Text('Click me')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
}
.height(50)
.width(200)
.backgroundColor(Color.Blue)
.margin(20)
.onClick(()=>{
this.message = this.msg1
}) //设置事件方法，添加点击事件
}
.width('100%')
}
.height('100%')
}
}可以看到，我们给Button组件添加了一个onClick方法，这是一个点击事件监听器。而onClick方法的参数的是一个lambda表达式（封装了操作语句 this.message = this.msg1），当用户点击按钮后，Button所注册的点击监听器将监听点击事件并给出反馈，即执行lambda表达式里的代码，更新message变量存储的数据值。
事实上，封装操作语句的lambda表达式是作为一次性使用的匿名函数来使用的。如果要多次和反复利用某个函数来执行其封装的操作语句的话，我们可以通过在作用域内声明函数的方式来实现。
@Entry
@Component
struct Index {
@State message: string = 'Hello ArkUI'
msg1 : string = 'Hello ArkTS'
msg2 : string = 'Hello ArkUI' //声明新字符串变量msg2
clickState: boolean = true //声明布尔型变量clickState
//声明Func函数
Func(): void{
if(this.clickState){
this.message = this.msg1
}else{
this.message = this.msg2
}
this.clickState = !this.clickState
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Divider()
Button(){
Text('Click me')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
}
.height(50)
.width(200)
.backgroundColor(Color.Blue)
.margin(20)
.onClick(()=>this.Func()) //调用Func函数
}
.width('100%')
}
.height('100%')
}
}在新增的代码中，我们声明了函数Func，并在Button的onClick方法中进行调用。当Button被连续点击时，通过布尔变量clickState的真假切换，屏幕显示的文本会在‘Hello ArkUI’与'Hello ArkTS'中轮流变换。
最后笔者对ets文件中剩下的陌生代码块进行解释。
struct用于声明一个自定义组件，Index则是自定义组件的变量名。值得一提的是，构建一个自定义组件必须要定义build函数，所以我们可以发现代码中的所有组件都被build函数所封装，而build函数和它的函数体内的所有操作语句都称为UI描述。
@Entry，@Component这类带@前缀的都统称为装饰器，被装饰器所修饰的对象都会被赋予某种能力。其中，@Component用于装饰struct，结构体（即struct）在被装饰后具有基于组件的能力，需要实现build方法来创建UI；@Entry也用于装饰struct，自定义组件被装饰后作为页面的入口，页面加载时将被渲染显示。当然，凭借这两个装饰器的英文代码我们也能大致猜出它们的用途。
结语
经过这次初体验，相信读者能感受到ArkUI的简洁与高效。文章所述仅代表个人理解，如有不足恳请读者不吝赐教。
不错不错,挺好的!!
棒！！！