通用属性

通用属性是每一个容器或组件都拥有的属性，常见的通用属性有基础属性、布局与边框，视效等等。

基础属性

1. visibility显隐控制

   • Hidden：隐藏，但参与布局进行占位
   • Visible：显示
   • None：隐藏，但不参与布局，不进行占位

2. background背景设置

   • backgroundColor：设置背景颜色
   • backgroundImage设置背景图片

布局与边框

1. size尺寸设置

   • width：宽度设置
   • height：高度设置
   • padding：内边距设置，分为左上右下四个方向
   • margin：外边距设置，分为左上右下四个方向
   • layoutWeight：布局权重设置，仅在父容器为Row/Column/Flex中生效

2. 位置设置

   • align：设置容器元素绘制区域内的子元素的对齐方式
   • direction：设置容器元素内主轴方向上的布局
   • position：绝对定位，确定子组件相对父组件内容区的位置
   • offset：相对偏移，组件相对原本的布局位置进行偏移

3. border边框设置

   • borderStyle：设置元素的边框线条样式，支持实线、虚线和点线
   • borderWidth：设置边框的宽度
   • borderColor：设置边框的颜色
   • borderRadius：设置边框的圆角半径

视效

1. opacity透明度设置

   • opacity：设置组件的不透明度
   • linearGradient：线性渐变
   • sweepGradient：角度渐变
   • radialGradient：径向渐变

示例代码如下

Stack({ alignContent: Alignment.TopStart }) {
  Stack()
    .width(50)
    .height(50)
    .padding(4)
    .backgroundImage($r('app.media.startIcon'))
    .visibility(Visibility.Visible)
  Stack()
    .width(50)
    .height(50)
    .backgroundColor(Color.Blue)
    .margin({ left: 50 })
  Stack()
    .width(50)
    .height(50)
    .borderWidth(4)
    .borderColor(Color.Yellow)
    .borderRadius(8)
    .borderStyle(BorderStyle.Solid)
    .linearGradient({angle:90,colors:[[Color.Red,0],[Color.Green,1]]})
    .margin({ left: 100 })
}
.height('100%')
.width('100%')

Stack容器

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

alignContent设置子组件在容器内的对齐方式。该属性与通用属性align同时设置时，后设置的属性生效。该属性与接口的构造入参同时设置时，生效属性上的设置效果。

说明

过多的嵌套组件数会导致性能劣化。在部分场景中，直接使用组件属性或借助系统API的能力可以替代层叠布局的效果，减少了嵌套组件数进而优化性能。

Stack容器优化

在实现文本浮层、按压遮罩或颜色叠加等场景时，通常会采用Stack布局嵌套组件的方式。实际上有些场景直接使用组件属性或借助系统API的能力就能实现，例如使用overlay属性可以实现浮层场景，使用ColorMetrics可以实现颜色叠加效果。直接使用组件属性的方式可以减少Stack布局嵌套组件的使用，从而减少嵌套组件带来的节点数。以文本浮层场景为例，如下图所示，使用overlay属性实现文本浮层比Stack组件嵌套方式少了一层Stack节点。开发这一类场景时，推荐优先使用组件属性代替嵌套组件。

1. 使用overlay属性实现浮层

   使用overlay属性可以直接给组件添加浮层，实现堆叠的效果，常见的场景有文本浮层、按压遮罩等。相较于Stack布局嵌套组件的方式，使用overlay属性减少了Stack组件节点的创建。

2. 使用ColorMetrics实现颜色叠加

系统通过ColorMetrics接口提供了颜色计算能力，可以用于颜色叠加显示的场景。同样，与Stack布局嵌套组件的方式相比，直接使用ColorMetrics能力可以减少Stack层的布局节点。

示例代码如下

@Builder
overlayNode() {
  Stack().width(SIZE).height(SIZE).backgroundColor($r('app.color.blue_translucent'))
}

Stack({ alignContent: Alignment.TopStart }) {
      Stack().width(50).height(50).backgroundImage($r('app.media.startIcon')).padding(4).visibility(Visibility.Visible)
      Stack()
        .width(50)
        .height(50)
        .borderWidth(4)
        .borderColor(Color.Yellow)
        .borderRadius(8)
        .borderStyle(BorderStyle.Solid)
        .linearGradient({angle:90,colors:[[Color.Red,0],[Color.Green,1]]})
        .margin({ left: 100 })
      Stack()
        .width(50)
        .height(50)
        .backgroundColor(ColorMetrics.numeric(0x80FF0000).blendColor(ColorMetrics.numeric(0x800000FF)))
        .margin({ left: 51 })
      Stack()
        .width(50)
        .height(50)
        .backgroundColor($r('app.color.red_translucent'))
        .overlay(this.overlayNode())
        .margin({ top: 51 })
      Stack().width(100).height(100).backgroundColor($r('app.color.red_translucent')).margin({ left: 51, top: 51 })
      Stack().width(50).height(50).backgroundColor($r('app.color.blue_translucent')).margin({ left: 51, top: 51 })
    }
    .height('100%')
    .width('100%')

完整源码