【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
一、公共样式类属性ArkUI框架提供的基础组件直接或者间接的继承自 CommonMethod ， CommonMethod 中定义的属性样式属于公共样式。下面就来学习这些样式
1.1.尺寸设置
[*]宽高设置
设置组件的宽高，缺省时使用组件自身内容的宽高，比如充满父布局可以使用 string 值：“100%”，当组件同时设置 size 和 width / height 时，以最后设置的值为准。
@Entry
@Component
struct TextExample {
build() {
Column({space:10}){
Text()
.size({width:220, height:25}) //设置宽高
.width(120) //设置宽度，会覆盖上面的宽度
.height(25) //设置高度，会覆盖上面的高度
.backgroundColor("#8EE5EE") //设置背景色
Text()
.width("100%") //设置宽度
.height(10) //设置高度
.backgroundColor("#CD5555") //设置背景色
Text()
.width(200) //设置宽度
.height(200) //设置宽度
.size({width:120, height:25}) //设置宽高、覆盖前边的值
.backgroundColor("#8B0000") //设置背景
}
.size({width:"100%", height:"100%"})
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/2d649ff95fd4237d8b64fe1d4bed82e3.png
如果子组件的宽高大于父组件的宽高，默认情况下子组件会绘制出父组件的可视范围，此时可以设置 clip(true) 方法限定子组件超出父组件的范围，样比方下所示：
@Entry
@Component
struct TextExample02 {
build() {
Column({space:50}){
Column(){
Text("高度超出父组件")
.width(120)
.height(120) //高度超出父组件
.fontColor(Color.White)
.backgroundColor("#00EE76")
}
.width(300)
.height(100)
.backgroundColor("#8B8386")
Column(){
Text("高度超出父组件")
.width(120)
.height(120)
.fontColor(Color.White)
.backgroundColor("#8B7E66")
}
.width(300)
.height(100)
.backgroundColor("#FF6A6A")
.clip(true) // 设置父组件对于超出范围的子组件做剪切处理
}
.width("100%")
.height("100%")
.padding(20)
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/fd1fbc8a95e8e534b079165be184ee90.png
[*]宽高比设置
设置组件的宽高比：aspectRatio = width / height，在设备适配上比力实用。
@Entry
@Component
struct AspectRationExample {
build() {
Column({space:10}){
Row({space:10}){
//1:1
Text().width(50).height(50).backgroundColor("#FF4040")
//1:1
Text().width(50).backgroundColor("#FF4040").aspectRatio(1) //设置宽高比
//1.5:1
Text().width(50).backgroundColor("#FF4040").aspectRatio(1.5) //设置宽高比
// 0.5:1 = 50: 100
Text().width(50).backgroundColor("#FF4040").aspectRatio(0.5) //设置宽高比
//和上面的效果一样
//Text().width(50).height(100).backgroundColor("#FF4040")
// 宽和高的比例，50：100， 宽是高的0.5倍
Text().height(100).backgroundColor("#FF4040").aspectRatio(0.5)
}
.padding(10).size({width:"100%", height:120})
}
.padding(10)
.size({width:"100%", height:"100%"})
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/33e056bb68bd8533ea09b55815c20f4f.png
[*]边距设置
盒模型作为前端布局中最简单，也最重要的一项布局方式，CSS盒模型本质上是一个盒子，封装四周的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、现实内容（content）四个属性。CSS盒模型：标准模型 + IE模型
https://i-blog.csdnimg.cn/img_convert/60eee7d967d6de838ca249678a17d2a9.png
盒模型包括：
[*]内容（content）：元素中显示的文本，图片等现实内容。
[*]内边距（padding）：内容和边框之间的空白地区。
[*]边框（border）：围绕内容和内边距的线条或图案。
[*]外边距（margin）：边框和其他元素之间的空白地区。
标准模型和IE模型的区别盘算宽度和高度的不同：
[*]标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）
[*]IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）
在HarmonyOS4.0中，盒模型也是雷同的，代码如下
@Entry
@Component
struct BoxExample {
build() {
Row(){// 创建一个水平布局的Row组件
Text("盒子模型")// 显示文本内容为“盒子模型”
.height("100vp")// 设置高度为视口宽度的百分之百
.width("100vp")// 设置宽度为视口宽度的百分之百
.margin({left:"10vp", top:"30vp", right:"50vp", bottom:"70pv"})// 设置外边距
.border({width:"10px", style: BorderStyle.Solid, color: "#0000ff"})// 设置边框样式
.padding(30)// 设置内边距
.backgroundColor("#00ff00")// 设置背景颜色为绿色
.textAlign(TextAlign.Center)// 设置文本水平居中对齐
}.backgroundColor("#ff0000")// 设置Row组件的背景颜色为红色
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/1a7141228021d3e417037f31f90be609.png
在双向预览中检察盒模型构成，如下：
https://i-blog.csdnimg.cn/img_convert/1ffab78f0d3e1d83e6896244cadda356.png
设置组件的内边距/外边距，当只设置一个值时表示对四个方向的边距同时见效；参数类型为 Padding / Margin 时，可单独设置边距，若设置为百分比时，上下左右表里距均以父容器的 width 作为基础值。案例代码如下：
@Entry
@Component
struct BoxExample02 {
build() {
Row(){
Column(){
Row(){
Text()
.width("100%") //设置宽度充满父组件
.height("100%") //设置高度充满父组件
.backgroundColor("#EE799F")//设置背景色
}
.padding(20) //设置四个边距
.backgroundColor("#FFF0F5") //设置背景色
.size({width:80, height:80}) //设置宽和高尺寸
Row(){
Text()
.width("100%") //设置宽度充满父组件
.height("100%") //设置高度充满父组件
.backgroundColor("#EE799F") //设置背景色
}
.padding({left:5, top: 20, right:5,bottom:20})//设置四个边距
.backgroundColor("#FFF0F5") //设置背景色
.size({width:80, height:80}) //设置宽和高尺寸
.margin(30) //设置外边距，否则两个Row容器会挤在一起
}
.size({width:"100%",height:"100%"})
.backgroundColor("#54FF9F")
}
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/0531bc209a93550dce6db08d2bf01855.png
[*]权重设置
设置组件的布局权重，该属性仅在 Row、Column、Flex 布局中见效，表示在父容器主轴方向上的尺寸按照权重比进行分配，默认值为 0。
@Entry
@Component
struct WeightSettings {
build() {
Column({space:20}){
Row(){ //下面两个Text子组件全都设置了权重，则子组件的宽度按照权重比例分配
Text()
.height(30)
.backgroundColor("#F4A460")
.layoutWeight(1)
Text()
.height(30)
.backgroundColor("#5F9EA0")
.layoutWeight(1)
}
Row(){ //子组件全都设置了权重，则子组件的宽度按照权重比例分配，子组件设置的宽度无效
Text()
.width(80)
.height(30)
.backgroundColor("#F4A460")
.layoutWeight(1)
Text()
.width(150)
.height(30)
.backgroundColor("#5F9EA0")
.layoutWeight(1)
}
Row(){ // 除去无权重子组件的宽度，剩余子组件的宽度按照权重比例分配
Text()
.width(150)
.height(30)
.backgroundColor("#228B22")
Text()
.width(150)
.height(30)
.backgroundColor("#F4A460")
.layoutWeight(1)
Text()
.width(120)
.height(30)
.backgroundColor("#5F9EA0")
.layoutWeight(2)
}
}
.size({width:"100%", height:"100%"})
.padding({top:20, bottom:20})
}
}
本样例中， Row 的每个子组件都设置了权重为 1 ，表示均分父组件的宽度，此时子组件设置的 width 是不起作用的，样例运行结果如下图所示：预览效果如下：
https://i-blog.csdnimg.cn/img_convert/e6bf04f59e9865a329b870907738c657.png
[*]尺寸束缚
设置组件的束缚尺寸从而在组件布局时对其尺寸进行限定，constraintSize() 的优先级高于 width() 和 height()，若设置的 minWidth 大于 maxWidth，则 minWidth 见效，minHeight 与 maxHeight 同理。
@Entry
@Component
struct SizeConstraints {
build() {
Column({space:20}){
Text() // 目标参照组件
.width(220)
.height(40)
.backgroundColor("#aabbcc")
Text() // 设置约束尺寸
.width(220)
.height(40)
.constraintSize({
minWidth: 120,
minHeight: 20
})
.backgroundColor("#bbccaa")
Text() // 设置过最大约束尺寸,实际宽和高超过了，则按照约束显示
.width(220)
.height(40)
.constraintSize({
maxWidth: 120,
maxHeight: 20
})
.backgroundColor("#bbccaa")
}
.size({width:"100%",height:"100%"})
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/f896cb8a8c9c475ba67eaeb01227722c.png
1.2.位置设置
[*]对齐方式
设置元素内容的对齐方式，当设置的 width 和 height 大小凌驾元素自己内容大小时见效。
@Entry
@Component
struct PositionSetting {
build() {
Column({space:20}){
Text("align")//默认样式
.fontSize(20)
.backgroundColor("#90EE90")
Text("align")//组件尺寸默认等于内容尺寸
.fontSize(20)
.backgroundColor("#90EE90")
.align(Alignment.TopStart) //组件尺寸默认等于内容尺寸，不符合要求
Text("align")
.fontSize(20)
.backgroundColor("#90EE90")
.align(Alignment.TopStart) //设置内容对齐方式
.size({width: 200, height: 60}) //组件尺寸大于内容尺寸，符合条件
}
.size({width:"100%", height:"100%"})
.padding(20)
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/13e10693184425812061a585d31254d8.png
[*]布局方向
设置子组件在程度方向上的布局方式，Direction 定义了一下 3 种布局方式：
[*]Ltr：元素从左到右布局。
[*]Rtl：元素从右到左布局。
[*]Auto（默认值）：使用体系默认布局方向。
案例代码如下：
@Entry
@Component
struct DirectionExample {
build() {
Column({space:20}){
Row({space:10}){ //不设置子组件的对齐方式时采用默认值
Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
Row({space:10}){ //不设置子组件的对齐方式时采用默认值
Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
.direction(Direction.Rtl)
}
.width('100%')
.height("100%")
.padding(20)
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/370ff75d3257a4f01acf2591c5a1db11.png
[*]绝对定位
设置当前组件在父组件中的位置，参照点为父容器顶点位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。
@Entry
@Component
struct DirectionExample {
build() {
Column({space:20}){
Row({space:10}){ //不设置子组件的对齐方式时采用默认值
Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
Row({space:10}){ //不设置子组件的对齐方式时采用默认值
Text("1")
.height(50)
.width("25%")
.fontSize(18)
.backgroundColor("#8B0000")
.position({x:200,y:0}) //使用绝对定位，设置组件位置
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
.direction(Direction.Rtl)
}
.width('100%')
.height("100%")
.padding(20)
}
}
postion 属性会更改子组件的布局结构，预览效果如下，第二行的第一个text组件设置了位置，：
https://i-blog.csdnimg.cn/img_convert/18d5b734197631bcbd82ac66d52c9a7a.png
[*]相对定位
设置当前组件在父组件中的位置，参照点为自身顶点位置。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
@Entry
@Component
struct DirectionExample {
build() {
Column({space:20}){
Row({space:10}){ //不设置子组件的对齐方式时采用默认值
Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
Row({space:10}){
Text("1")
.height(50)
.width("25%")
.fontSize(18)
.backgroundColor("#8B0000")
.offset({x:10,y:50}) //使用相对定位(相对之前的位置，参照点为自身顶点位置)，设置组件位置
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
.direction(Direction.Rtl)
}
.width('100%')
.height("100%")
.padding(20)
}
}
offset 属性只更改组件自身的布局结构。下面的text组件1,设置了相对定位，预览效果如下：
https://i-blog.csdnimg.cn/img_convert/3e477dca7dbbc99dbeca1809e1903bf1.png
[*]锚点设置
设置元素在位置定位时的锚点，以自身顶点位置作为基准点进行偏移。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
@Entry
@Component
struct DirectionExample {
build() {
Column({space:20}){
Row({space:10}){ //不设置子组件的对齐方式时采用默认值
Text("1").height(50).width("25%").fontSize(18).backgroundColor("#AABBCC")
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
Row({space:20}){
Text("1")
.height(50)
.width("25%")
.fontSize(18)
.backgroundColor("#8B0000")
.markAnchor({x:20,y:20}) //以自身顶点位置作为基准点进行偏移
Text("2").height(50).width("25%").fontSize(18).backgroundColor("#8B658B")
Text("3").height(50).width("25%").fontSize(18).backgroundColor("#008B8B")
}
.width("90%")
.backgroundColor("#E0FFFF")
}
.width('100%')
.height("100%")
.padding(20)
}
}
markAnchor 属性只更改组件自身的布局结构，预览效果如下：
https://i-blog.csdnimg.cn/img_convert/bfc7c60c4db9b650f55bab6b524ff6d8.png
[*]束缚条件（可以参考，相对定位容器里面的内容）
设置子组件在父组件 RelativeContainer 中的对齐方式，分为程度对齐规则和竖直对齐规则，分别阐明如下：
[*]程度对齐规则
[*]left： 设置左对齐参数。
[*]middle： 设置中间对齐的参数。
[*]right： 设置右对齐参数。
[*]竖直对齐规则
[*]top： 设置顶部对齐的参数。
[*]bottom： 设置底部对齐的参数。
[*]center： 设置中央对齐的参数。
参考相对容器布局里面的内容。
1.3.背景设置
[*]背景色设置
设置组件的背景颜色， ResourceColor 类型支持 Color | number | string | Resource 四种：
Color颜色枚举值。numberHEX格式颜色，支持rgb。示例：0xffffff。stringrgb或者rgba格式颜色。示例：‘#ffffff’, ‘#ff000000’, ‘rgb(255, 100, 255)’, ‘rgba(255, 100, 255, 0.5)’。Resource使用引入资源的方式，引入体系资源或者应用资源中的颜色。 案例代码如下：
@Entry
@Component
struct ColorExample {
build() {
Row({space:20}) {
Text()
.height(30)
//string
//
// rgb或者rgba格式颜色。
// 示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
.backgroundColor("#CD3333")
.layoutWeight(1)
Text()
.height(30)
//number HEX格式颜色，支持rgb
.backgroundColor(2055151)
.layoutWeight(1)
Text()
.height(30)
//颜色枚举值
.backgroundColor(Color.Pink)
.layoutWeight(1)
Text()
.height(30)
.layoutWeight(1)
//Resource 使用引入资源的方式，引入系统资源或者应用资源中的颜色
.backgroundColor($r("sys.color.ohos_id_color_warning_dark"))
}
.width("100%")
.padding(30)
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/1fe428d5bf2e054d53d1cd1fa31c0964.png
[*]背景图设置
设置组件的背景图片，repeat 参数可以设置图片的添补模式，比方代码下所示：
@Entry
@Component
struct ColorExample02 {
build() {
Column(){
Text("背景图片设置")
.fontSize(30) //字体大小
.fontColor(Color.Red) //字体颜色
.size({width:220, height:100}) //设置宽和高
.backgroundImage($r('app.media.WATCHGT4')) //设置组件的背景图片
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
}
.width("100%")
.padding(30)
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/45a8968d2675ca7293802abc6f098d9b.png
1.4.边框设置
[*]边框样式
设置组件的边框样式，支持设置边框颜色、边框粗细、边框圆角以及边框的展示样式。同时设置 border 和 borderXXX ，以最后设置的值为准。
@Entry
@Component
struct BorderExample {
build() {
// 创建一个Column组件，设置间距为20
Column({space:20}){
// 创建一个Text组件，设置高度为80，宽度为160
Text()
.height(80)
.width(160)
// 通过参数设置边框样式
.border({
color:Color.Orange, // 边框颜色为橙色
width:5, // 边框宽度为5
radius: 0, // 边框圆角半径为0，即直角
style: BorderStyle.Solid // 边框样式为实线
})
// 创建另一个Text组件，设置高度为80，宽度为160
Text()
.height(80)
.width(160)
// 通过属性设置边框样式
.borderWidth(5) // 边框宽度为5
.borderColor(Color.Orange) // 边框颜色为橙色
.borderRadius(15) // 边框圆角半径为15
.borderStyle(BorderStyle.Dotted) // 边框样式为点状线
}
// 设置Column组件的宽度为100%，内边距为30
.width("100%")
.padding(30)
}
}
预览代码如下：
https://i-blog.csdnimg.cn/img_convert/1db4f8ecc4a943d42ed3b997967682e3.png
1.5：显隐设置
[*]显示和隐蔽设置
设置组件的显示和隐蔽， Visibility 类型阐明如下：
[*]Visible（默认值）：组件显示在页面上。
[*]Hidden：组件在屏幕上占位但是不显示。
[*]None：组件在屏幕上不显示也不占用位置。
简单样比方下图所示：
@Entry
@Component
struct VisibilityExample {
build() {
Column({space:20}){
Row(){
Text()
.height(30)
.width(120)
.backgroundColor("#AABBCC")
.layoutWeight(1)
Text()
.height(30)
.width(120)
.backgroundColor("#2E8B57")
.visibility(Visibility.Visible) //设置为Hidden，虽然不在界面显示，但是还占着位置
.layoutWeight(1)
Text()
.height(30)
.backgroundColor("#CD8C95")
.layoutWeight(1)
}
Row(){
Text()
.height(30)
.width(120)
.backgroundColor("#AABBCC")
.layoutWeight(1)
Text()
.height(30)
.width(120)
.backgroundColor("#2E8B57")
.visibility(Visibility.Hidden) //设置默认值Visible
.layoutWeight(1)
Text()
.height(30)
.backgroundColor("#CD8C95")
.layoutWeight(1)
}
Row(){
Text()
.height(30)
.width(120)
.backgroundColor("#AABBCC")
.layoutWeight(1)
Text()
.height(30)
.width(120)
.backgroundColor("#2E8B57")
.visibility(Visibility.None) //设置为None就不会在界面上显示
.layoutWeight(1)
Text()
.height(30)
.backgroundColor("#CD8C95")
.layoutWeight(1)
}
}
.width("100%")
.padding(30)
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/f75c76d7f6cf6348ef0b7d0f0cc251e6.png
[*]显示优先级设置
设置当前组件在布局容器中显示的优先级，当父容器空间不敷时，低优先级的组件会被隐蔽，该属性仅在Row 、Column、和 Flex(单行) 容器组件中见效。
class ChildInfo {
text: string = '';
priority: number = 0;
}
class ContainerInfo {
label: string = '';
size: string = '';
}
@Entry
@Component
struct DisplayPriorityExample {
@State currentIdx: number = 0
private children: ChildInfo[] = [
{ text: '1\n(优先项:2)', priority: 2 },
{ text: '2\n(优先项:1)', priority: 1 },
{ text: '3\n(优先项:3)', priority: 3 },
{ text: '4\n(优先项:5)', priority: 5 },
{ text: '5\n(优先项:4)', priority: 4 }
]
// 显示容器大小
private container: ContainerInfo[] = [
{ label: 'Big container', size: '100%' },
{ label: 'Middle container', size: '50%' },
{ label: 'Small container', size: '25%' }
]
build() {
Column({space:20}){
Flex({justifyContent: FlexAlign.SpaceBetween}){
ForEach(this.children,(item:ChildInfo)=>{
Text(item.text)
.width(60)
.height(160)
.fontSize(20)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.backgroundColor("#CD8C95")
.displayPriority(item.priority)//使用displayPriority给子组件绑定显示优先级,数字越大优先级越高
})
}
.width(this.container.size) //通过变量设置Flex父容器宽度
.backgroundColor("#778899")
Button(this.container.label) //切换父容器大小
.backgroundColor("#66CDAA")
.onClick(()=>{
//点击后修改currentIdx的值为 (currentIdx+1)/3 取余数 1
this.currentIdx = (this.currentIdx + 1) % this.container.length
})
}
.width("100%")
.padding(20)
}
}
当父容器空间不敷的时间。只会展示优先级高的子组件，优先级底的子组件会主动隐蔽，如下：
https://i-blog.csdnimg.cn/img_convert/cfeaadcc8d01ea75cde03780ce0ffe61.gif
1.6.多态样式
[*]多种状态样式设置
设置组件在不同状态下的显示样式，目前只支持通用属性， StateStyle 有以下几种状态：
[*]normal：设置组件默认情况下的显示样式。
[*]pressed：设置组件按下时的显示样式。
[*]disabled：设置组件不可用时的显示样式。
[*]focused：设置组件获取核心时的显示样式。
[*]clicked：设置组件点击时的显示样式。
案例代码如下：
@Entry
@Component
struct StateStylesExample {
build() {
Column({space:20}){
Button("按钮1")
.width(200)
.height(50)
Button("按钮2")
.width(200)
.height(50)
.stateStyles({
normal:{
.backgroundColor(Color.Blue) //设置默认情况下的显示样式
},
pressed:{
.backgroundColor(Color.Red) //设置手指按下的显示样式
}
})
}
.width("100%")
.padding({top:30,bottom:30})
}
}
会发现上面的代码，给按钮2设置，点击的时间会酿成红色，预览效果如下：
https://i-blog.csdnimg.cn/img_convert/6a6ca71dd93e782d207dde9a895ebb53.gif
[*]@Styles样式设置
@Styles 作用是提取组件的公共样式，方便其他组件复用样式，它可以定义在组件内部或者组件外部，当定义在组件外部时需要添加 funcition 关键字，简单样比方下所示：
@Styles function buttonGlobalNormalStyles(){ //组件外定义按钮默认的样式
.backgroundColor("#43CD80")
.width(200)
.height(50)
}
@Styles function buttonGlobalPressedStyles(){ //组件外定义按钮摁下的样式
.backgroundColor("#FF7F50")
.width(200)
.height(50)
}
@Entry
@Component
struct StylesExample {
@Styles buttonNormalStyles(){ //组件内定义按钮默认的样式
.backgroundColor("#8B8682")
.width(200)
.height(50)
}
@Styles buttonPressedStyles(){ //组件内定义按钮摁下的样式
.backgroundColor("#FF6347")
.width(200)
.height(50)
}
build() {
Column({space:20}){
Button("默认样式")
.width(200)
.height(50)
Button("组件外样式")
.stateStyles({
normal:buttonGlobalNormalStyles, //使用组件外定义的按钮默认的样式
pressed:buttonGlobalPressedStyles //使用组件外定义的按钮摁下的样式
})
Button("组件内样式")
.stateStyles({
normal:this.buttonNormalStyles, //使用组件内定义的按钮默认的样式
pressed:this.buttonPressedStyles //使用组件内定义的按钮摁下的样式
})
}
.width("100%")
.padding({top:30,bottom:30})
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/e885e11040e188a186957569c8a0fe7f.gif
[*]@Extend样式设置
在 UI 构建中，如果组件设置的属性都是相同的，比如 Text 组件的 fontColor、fontSize 等设置都同等，那么可以使用 @Extend 对 Text 组件进行扩展，提取相同的属性部分，这样可以有用降低代码量。简单样比方下所示：
@Extend(Text) // 使用@Extend装饰器扩展Text组件的样式
function textStyle(size:number=20, color:ResourceColor=Color.Orange,bgColor:ResourceColor=Color.Pink){
.fontSize(size) // 设置字体大小为参数指定的大小
.fontColor(color) // 设置字体颜色为参数指定的颜色
.backgroundColor(bgColor) // 设置背景颜色为参数指定的颜色
.fontStyle(FontStyle.Italic) // 设置字体样式为斜体
.fontWeight(FontWeight.Bold) // 设置字体粗细为粗体
.width(220) // 设置宽度为220
.height(110) // 设置高度为110
.textAlign(TextAlign.Center) // 设置文本对齐方式为居中
}
@Entry // 使用@Entry装饰器标识为入口文件
@Component // 使用@Component装饰器标识为组件
struct ExtendExample { // 定义名为ExtendExample的结构体
build() { // 定义build方法
Column({space:20}){ // 使用Column组件，设置间距为20
Text("Extend").textStyle() // 使用Text组件并应用textStyle函数定义的样式
Text("Extend").textStyle(35, "#2F4F4F", "#FFE4E1") // 使用Text组件并应用textStyle函数定义的样式，传入自定义的参数
}
.width('100%') // 设置宽度为100%
.height("100%") // 设置高度为100%
.padding(10) // 设置内边距为10
}
}
@Extend 装饰器不能定义在 struct 内部，临时无法在其它页面引入 Extend 样式。预览效果如下：
https://i-blog.csdnimg.cn/img_convert/5b9d3cd4d4beca7a706a136e05bb5937.png
1.7.渐变颜色
设置组件的渐变样式，参数如下：
[*] angle：设置渐变的角度。
[*] direction：设置渐变方向，是angle的抽象
[*] colors：渐变颜色数组
[*] repeating：是否重复渲染。
示例代码如下：
.linearGradient({
angle: 180, // 设置渐变角度
colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],["#7AB967", 1]] // 设置渐变颜色
})
组件渐变色方向旋转 180° ，在 区间渐变色为 #BDE895，在 区间渐变色由 #BDE895 线性渐酿成 #95DE7F ，在 区间渐变色由 #95DE7F 线性渐酿成 #7AB967 。如下图：
https://i-blog.csdnimg.cn/img_convert/5578496c71d2f5b69e9097ba11a38dc4.png
案例代码如下：
@Entry
@Component
struct LinearGradientExample {
build() {
// 创建一个Column组件，设置间距为30
Column({space:30}){
// 创建一个Text组件，设置宽度为240，高度为50，布局权重为1
Text()
.size({width:240, height: 50})
.layoutWeight(1)
// 设置线性渐变样式
.linearGradient({
angle:90, // 渐变角度为90度
colors: [["#EE6363",0.1],["#CD5555",0.6],["#8B3A3A",1]] // 渐变颜色和位置
})
// 创建另一个Text组件，设置宽度为240，高度为50，布局权重为1
Text()
.size({width:240, height: 50})
.layoutWeight(1)
// 设置线性渐变样式
.linearGradient({
angle:135, // 渐变角度为135度
colors: [["#8470FF",0.1],["#7B68EE",0.4],["#6A5ACD",0.7],["#483D8B",1]] // 渐变颜色和位置
})
}
// 设置Column组件的宽度为100%，高度为100%，内边距为20
.width("100%")
.height("100%")
.padding(20)
}
}
预览效果如下：
https://i-blog.csdnimg.cn/img_convert/58cf94ce17c4675d2c68bf8f536a0f5b.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]