HarmonyOS NEXT - 通用属性

尺寸设置

.width(value: Length)	//设置组件宽度
.height(value: Length)	//设置组件高度
.size(value: SizeOptions)	//设置组件宽高尺寸
.padding(value: Padding | Length | LocalizedPadding)	//设置内边距
.margin(value: Margin | Length | LocalizedMargin)	//设置外边距

位置设置

.align(value: Alignment)	 //设置容器元素绘制区域内的子元素的对齐方式
.direction(value: Direction)  //设置容器元素内主轴方向上的布局。
.position(value: Position | Edges | LocalizedEdges)  //绝对定位，确定子组件相对父组件的位置
.markAnchor(value: Position | LocalizedPosition)  //设置元素在位置定位时的锚点。
.offset(value: Position | Edges | LocalizedEdges)  //相对偏移，组件相对原本的布局位置进行偏移。
alignRules(alignRule: LocalizedAlignRuleOptions)  //指定设置在相对容器中子组件的对齐规则，仅当父容器为RelativeContainer时生效。该方法水平方向上以start和end分别替代原方法的left和right，以便在RTL模式下能镜像显示，建议使用该方法指定设置在相对容器中子组件的对齐规则。

布局约束

.aspectRatio(value: number)  //指定当前组件的宽高比，aspectRatio=width/height。
.displayPriority(value: number)  //设置当前组件在布局容器中显示的优先级。

Flex布局

.flexBasis(value: number | string)  //设置组件的基准尺寸。
.flexGrow(value: number)  //设置组件在父容器的剩余空间所占比例。
.flexShrink(value: number)  //设置父容器压缩尺寸分配给此属性所在组件的比例。当父容器为Column、Row时，需设置主轴方向的尺寸。
.alignSelf(value: ItemAlign)  //子组件在父容器交叉轴的对齐格式。

边框设置

.border(value: BorderOptions)	//设置边框样式
.borderStyle(value: BorderStyle | EdgeStyles)	//设置元素的边框线条样式
.borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths)	//设置边框的宽度
.borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors)	//设置边框的颜色
.borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses)	 //设置边框的圆角

背景设置

.backgroundColor(value: ResourceColor)	//设置组件背景色
.backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat)	//设置组件的背景图片
.backgroundImageSize(value: SizeOptions | ImageSize)	//设置组件背景图片的宽高
.backgroundImagePosition(value: Position | Alignment)	//设置背景图的位置
.backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions)  //为当前组件提供一种在背景和内容之间的模糊能力，通过枚举值的方式封装了不同的模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度。
.backdropBlur(value: number, options?: BlurOptions)  //为组件添加背景模糊效果，可以自定设置模糊半径和灰阶参数。
.backgroundEffect(options: BackgroundEffectOptions)  //设置组件背景属性，包含背景模糊半径，亮度，饱和度，颜色等参数。
.backgroundImageResizable(value: ResizableOptions)  //设置背景图在拉伸时可调整大小的图像选项。

图像效果

.blur(value: number, options?: BlurOptions)  //为组件添加内容模糊效果
.shadow(value: ShadowOptions | ShadowStyle)  //为组件添加阴影效果
.grayscale(value: number)  //为组件添加灰度效果。
.brightness(value: number)  //为组件添加高光效果。
.saturate(value: number)  //为组件添加饱和度效果。
.contrast(value: number)  //为组件添加对比度效果。
.invert(value: number | InvertOptions)  //反转输入的图像。
.sepia(value: number)  //将图像转换为深褐色。
.hueRotate(value: number | string)  //色相旋转效果。
.colorBlend(value: Color | string | Resource)  //为组件添加颜色叠加效果。
.linearGradientBlur(value: number, options: LinearGradientBlurOptions) //为组件添加内容线性渐变模糊效果。
.renderGroup(value: boolean)  //设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。
.blendMode(value: BlendMode, type?: BlendApplyType)  //将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。

代码实例：UniversalAttributes

@Entry
@Component
struct UniversalAttributes {
  @State message: string = 'Universal Attributes ';

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Row(){
        Text('Size setting')
      }.backgroundColor(Color.Orange)
      .size({width:'100%',height:50})
      .width(50)
      .width(100) //The same attribute, the subsequent settings will overwrite the previous settings

      Row(){
        Text('Size setting')
      }.backgroundColor(Color.Green)
      .padding(10)
      .margin(10)

      Stack(){
        Text('Location setting')
      }.backgroundColor(Color.Orange)
      .size({width:'100%',height:50})
      .align(Alignment.TopStart)

      Row(){
        Text('Border settings')
      }.backgroundColor(Color.Orange)
      .padding(10)
      .margin(10)
      .border({width:1,color:Color.Red,radius:8,style:BorderStyle.Dashed})
      .borderWidth(5)
      .borderColor(Color.Green)
      .borderRadius(18)
      .borderStyle(BorderStyle.Dotted)

      Row(){
        Text('Background setting')
      }.height(100)
      .backgroundColor(Color.Orange)
      .backgroundImage($r('app.media.startIcon'))
      // .backgroundImageSize({width:'100%',height:'100%'})
      .backgroundImagePosition(Alignment.Center)
    }
    .height('100%')
    .width('100%')
  }
}