1.通用属性

星仔2025-09-142025-09-14

颜色格式，将颜色统一存放 \src\main\resources\base\element\color.json 文件中，方便统一管理

Color.枚举值			
数字类：0x00ffffff
字符类：'#ffffff'，'#ff000000'，'rgb(255, 100, 255)'，'rgba(255, 100, 255, 0.5)'

$r('app.color.枚举值')	//枚举值也就是文件中写的名字
.backgroundColor($r('app.color.backgruokcolor'))

尺寸设置文档中心

宽度

.width(数字)
.width('数字%')

高度

.height(数字)
.height('数字%')

内边距

.pading()
.pading({
    top: 数字,
    bottom: 数字,
    left: 数字,
    right: 数字
})

外边距

.margin(数字)
.margin({
    top: 数字,
    bottom: 数字,
    left: 数字,
    right: 数字
})

安全区边距

允许容器向自身添加组件级安全区域，供子组件延伸

.safeAreaPadding(数字)
.safeAreaPadding({
    top: 数字,
    bottom: 数字,
    start: 数字,
    end: 数字
})

布局权重

.layoutWeight(数字)

位置设置文档中心

相对偏移

组件相对原本的布局位置进行偏移

.offset({
  x: 数字,
  y: 数字
})

边框设置文档中心

边框

.border(数字)
.border({
    width: {				//设置宽度
        top: 数字,
        bottom: 数字,
        left: 数字,
        right: 数字 
    },
    radius: {				//设置圆角
        topLeft: 数字,
        topRight: 数字,
        bottomLeft: 数字,
        bottomRight: 数字
    },
    style: BorderStyle.枚举值,
    // style: {
    //     top: BorderStyle.枚举值,
    //     bottom: BorderStyle.枚举值,
    //     left: BorderStyle.枚举值,
    //     right: BorderStyle.枚举值
    // }
})

圆角

.borderRadius(数字)
.borderRadius({
    topLeft: 数字,
    topRight: 数字,
    bottomLeft: 数字,
    bottomRight: 数字
})

特殊形状圆角

正圆：宽高都一样，圆角为宽或高的一半
胶囊：宽大高小，圆角为高的一半

Column() {
    Image($r('app.media.ic_more'))
        .width(60)
        .height(60)
        .backgroundColor(Color.Green)
        .borderRadius(30)			//正圆
    Text('胶囊')
        .width(100)
        .height(50)
        .backgroundColor(Color.Orange)
        .borderRadius(25)			//胶囊
}

背景设置文档中心

背景色

.backgroundcolor(颜色格式)

背景图片

.backgroundImage('图片网址', ImageRepeat.平铺方式)
.backgroundImage($r('图片路径'), ImageRepeat.平铺方式)
// NoRepeat：不平铺，默认值
// X：水平平铺
// Y：垂直平铺
// XY：水平垂直均平铺

背景图片宽高

注意图片不能超过屏幕的两倍，最好适配，不然会导致渲染出问题

.backgroundImageSize({ x: 数字, y: 数字 })
.backgroundImageSize(ImageSize.枚举值)

背景图位置

.backgroundImagePosition({ x: 数字, y: 数字 })
.backgroundImagePosition(Alignment.枚举值)

透明度文档中心

设置透明度之后，注意层级关系

//十六进制若为八位则前两位则为透明度	//设置背景颜色透明度
.opacity(数字)				//1表示不透明，0表示完全透明

阴影

.shadow({
  radius: 数字,          // 阴影半径
  color: 颜色格式, 			// 阴影颜色
  offsetX: 数字,        // X轴偏移
  offsetY: 数字         // Y轴偏移（正值向下）
})

布局约束文档中心

宽高比

指定当前组件的宽高比

.aspectRatio(数字)

显隐控制文档中心

组件的显隐

.visibility(Visibility.枚举值)

Z序控制文档中心

组件的堆叠顺序

.zIndex(数字)	//取值为整数数字，取值越大，显示层级越高
.zIndex(1)

图形变换文档中心

组件平移

.translate({
  x: 数字,
  y: 数字,
  z: 数字
})

多态样式文档中心

组件不同状态的样式

normal：无状态时的样式	pressed：按下状态的样式	disabled：禁用状态的样式
focused：获焦状态的样式	clicked：点击状态的样式	selected：选中状态的样式

.stateStyles({
  状态名: {
    .backgroundColor('red')
  }
})

Button('按钮')
.stateStyles({
  normal: {		//如果没有加无状态时样式，触发状态样式变成常态样式
    .backgroundColor('bule')
  },
  pressed: {
    .backgroundColor('red')
  }
})