ArkUi组件属性使用
harmonyOs把开发中的场景组件进行了api的封装，有单独的view组件，也有用于布局的viewgroup组件，要想实现效果图当一个合格的ui仔，就得对官方提供的组件的属性有个熟悉的了解，才能使用原生提供的组件和属性去达到布局的效果。
ArkUi控件
对于传统的Android开发来说，UI控件的声明大多数情况下都是通过xml中进行配置，通过xml中配置属性达到对控件的不同效果的配置，对于arkUi的控件来说，从声明上更像是一个函数，可以通过函数的参数和扩展属性进行不同的属性配置
UiName(parms){ //控件名
//内部的子组件
}.extendsProto() //扩展属性，可设置通用也可设置控件的专属属性
使用UI控件，类似于与声明一个函数方法体，控件名就是方法名，里面可以传入默认参数，然后方法体就是子组件，如果没有子组件可以不省略方法体，在方法的尾部，通过链式声明传入类似扩展方法的方式的属性，从而完整的使用一个控件
//没有方法体可以直接跟属性
Text('我是一个文本').fontSize(18).fontStyle(FontStyle.Italic)
Text('我是一个文本2'){
//没有子组件，这个可以省略
}.fontSize(18).fontStyle(FontStyle.Normal)
Image($r('app.media.icon')).border({radius:4}).width(80).height(80)
Row(){
Text('子文本控件')
}.width('100%').height(80).backgroundColor('#f0f')
具体的官方控件的使用这个叫法是啥我也没去查过，反正当函数声明使用理解比较好接受，能知道子控件写在什么位置，扩展属性写在什么位置，还有可以类似参数一样在括号内进行属性的传递
Text
学习一个控件，在官方提供的DevEco Studio中，声明一个控件，然后鼠标停靠在控件名上，就会有一个提示框弹出，通过点击右下角的 show in API Reference中，可以很方便的查看对应控件的属性，并且提供了相关的代码示例和运行效果
声明
Text(content?: string | Resource)
Text组件可以传递一个可选的content参数，而content的类型可以是直接的字符串也可以是一个资源文件
子组件
Text组件不同于Android的TextView组件，Text组件还可以当容器，包含Span和ImageSpan子组件，如果包含有Span子组件，Text()中设置的content文本内容就不生效，最终界面会显示Span的内容
支持的属性
Text的属性支持还是很多的，拿出一些开发中常用的属性做一个记录
- 对齐方式
在Android中通过gravity属性控制文本控件显示的对齐方式，在arkui中，通过文本的textAlign属性进行控制，TextAlign可以设置Center,Start,End，当文本无法充满整个一行的时候，就会有对应的居左居右显示，如果是多行文本，换行的部分不满一行也会根据该属性进行对齐显示
Text('显示：居中')
.textAlign(TextAlign.Center)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('显示：居左')
.textAlign(TextAlign.Start)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('显示：居右')
.textAlign(TextAlign.End)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('显示：换行后生效需要一大段没有用的文本让文本充满一行并且可以换行')
.textAlign(TextAlign.End)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
- 文本超出长度末尾显示
在Android的xml中，通过maxlines 和 ellipsize两个属性进行控制，在arkui中，如果要将超出的部分沈略，也得配合maxlines进行设置，并且需要设置textOverflow属性，选择超出的部分的文本是通过省略显示还是直接不显示
// 超出maxLines截断内容展示
Text('需要一大段没有用的文本让文本充满一行并且可以换行')
.textOverflow({ overflow: TextOverflow.Clip })
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
// 超出maxLines展示省略号
Text('需要一大段没有用的文本让文本充满一行并且可以换行')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
顺带提一下，TextOverflow除了直接截断和省略两个属性外，可以设置为MARQUEE，这种情况下如果文本超出了显示区域，会将文本进行跑马灯滚动显示
- 文本高度
在Android中，要调整行间距，可以通过lineSpacingExtra或者lineSpacingMultiplier设置不同行直接的间距，在arkui中使用Text如果要调整行间距，可以通过lineHeight属性设置单行的高度，从而达到行间距的效果
Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
Text('需要一大段没有用的文本让文本充满一行并且可以换行')
.fontSize(12).border({ width: 1 }).padding(10)
Text('需要一大段没有用的文本让文本充满一行并且可以换行')
.fontSize(12).border({ width: 1 }).padding(10)
.lineHeight(20)
Text('需要一大段没有用的文本让文本充满一行并且可以换行')
.fontSize(12).border({ width: 1 }).padding(10)
.lineHeight(30)
- 下划线
下划线的功能也是在开发中经常遇到的一个效果，在arkui中，通过decoration传入一个对象，里面可以通过type设置划线的位置，通过color设置划线的颜色，直接看效果
Text('需要一大段没有用的文本')
.decoration({
type: TextDecorationType.LineThrough,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('需要一大段没有用的文本')
.decoration({
type: TextDecorationType.Overline,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('需要一大段没有用的文本')
.decoration({
type: TextDecorationType.Underline,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
这样可以很轻松的设置上划线或者下划线
- 文本间距
除了行间距通过行高去控制，也需要对字间距进行相应的控制，字间距通过letterSpacing去设置具体的值达到控制
Text('需要一大段没有用的文本')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('需要一大段没有用的文本')
.letterSpacing(3)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('需要一大段没有用的文本')
.letterSpacing(-1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
- 大小写处理
除了上述的属性控制，还有一个可以很方便实现文本大小写的属性textCase，通过这个属性的设置，可以将文本的内容自动转换为大小写来显示
//大小写混合显示
Text('This is the text content with textCase set to Normal.')
.textCase(TextCase.Normal)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本全小写展示
Text('This is the text content with textCase set to LowerCase.')
.textCase(TextCase.LowerCase)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本全大写展示
Text('This is the text content with textCase set to UpperCase.')
.textCase(TextCase.UpperCase)
.fontSize(12).border({ width: 1 }).padding(10)
小结
当然Text支持的属性远不止这一些，文章只是通过一些属性的了解从而转变Android和arkui写界面控件属性的区别，ide里面的文档都很详细，要熟悉一个控件，建议每一个属性都通过设置不同的值看一下预览显示效果，不知道有多少人跟我一样，领导听到了鸿蒙要脱钩的消息就得叫做鸿蒙原生开发的准备，并且在不招人的情况下只能自己硬卷，除了简单的看一遍文档，最好还是需要跟着文档demo写一下看看效果，我也会把学习中的点记录一下，希望大家共同进步。
