鸿蒙组件通用属性深度解析：从基础样式到高级定制的全场景指南

      Text('登录按钮')        .width(120)        .height(44)          // 固定尺寸        .margin({          top: 16,          bottom: 8,          left: 24,          right: 24        }) // 差异化边距        .padding(12) // 统一内边距

      Button('提交')        .backgroundColor('#007DFF')  // 主色背景        .border({          width: 2,           color: '#FFFFFF',           style: BorderStyle.Solid         }) // 白色实线边框        .borderRadius(22) // 圆角按钮

      Text('重要通知')        .fontSize(18)        .fontWeight(FontWeight.Medium)        .textAlign(TextAlign.Center)        .lineHeight(24) // 行高1.5倍提升可读性 

      Image($r('app.media.banner'))        .width('100%')        .aspectRatio(3 / 2) // 3:2固定比例        .objectFit(ImageFit.Cover) // 覆盖显示        .alt($r('app.media.loading')) // 加载占位图

    Row({ space: 16, }) { // 水平等间距布局      Button('按钮1')      Button('按钮2')    }    .width('100%') // 宽度为父容器的100%    .justifyContent(FlexAlign.SpaceEvenly) // 水平居中对齐 不给宽度不会生效

    Row() {      Text('左侧内容')        .layoutWeight(1) // 占剩余空间      Text('右侧按钮')        .width(100) // 固定100vp    }    .width('100%') // 父容器撑满屏幕

    Stack() { // 层叠布局容器      Image($r('app.media.bg'))        .width('100%')      Text('浮层文字')        .position({          x: 100,          y: 100        })        .zIndex(1)        .fontColor(Color.White)        .backgroundColor('#00000080') // 半透明黑色背景

@Entry@Componentstruct Index {  @State  count: number = 0   build() {    Button(`计数：${this.count}`)      .onClick((event) => {        console.log(`点击坐标：x=${event.x}, y=${event.y}`)        this.count++      })      .gesture(        LongPressGesture({ repeat: true })        // 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）          .onAction((event: GestureEvent) => {            if (event && event.repeat) {              this.count++            }          })          // 长按动作一结束触发          .onActionEnd((event: GestureEvent) => {            this.count = 0          })      )  }}

TextInput()      .focusable(this.isSubmitting) // 只能通过focusable属性让组件是否获焦，该属性为false时没有焦点，就不能输入了      .opacity(this.isSubmitting ? 0.5 : 1) // 启用时半透明      .backgroundColor(this.isSubmitting ? '#F5F5F5' : '#FFFFFF') // 背景色变化

    Text('右键菜单示例')      .bindMenu([        {value: '复制', action: () => {}},        {value: '粘贴', action: () => {}},        {value: '删除', action: () => {}}      ])      .backgroundColor('#F9F9F9')      .padding(8)

@Entry@Componentstruct Index {  @State  isShow: boolean = false;   build() {    Button('打开模态窗口')      .bindContentCover(this.isShow, this.myBuilder, { modalTransition: ModalTransition.DEFAULT }) // 全屏模态上下切换动画  }   @Builder  myBuilder() {    Column() {      Text('模态内容区域')        .fontSize(16)        .padding(24)      Button('关闭').onClick(() => this.isShow = false)    }    .width('80%')    .height('60%')    .backgroundColor(Color.White)    .borderRadius(12)  }}

 @State scaleX: number = 1 @State opacityY: number = 1  Image($r('app.media.icon'))      .width(64)      .height(64)      .scale({        x: this.scaleX,      })      .opacity(this.opacityY)      .onClick(() => {        // 点击时缩放并透明        this.scaleX = 1.2        this.opacityY = 0.8      })      .animation({        duration: 300, // 300ms动画时长        curve: Curve.EaseOut // 缓出动画效果      })

    Text('3D效果演示')      .translate({ x: 20, y: 30, z: 50 }) // 三维平移      .rotate({ x: 15, y: 30, angle: 45 }) // 绕x/y轴旋转45度      .scale({ x: 1.1, y: 1.1, z: 1 })   // x/y轴放大1.1倍      .fontColor(Color.Blue)

List({ space: 3 }) {      LazyForEach(this.data, (item: string) => {        ListItem() {          Row() {            Text(item).fontSize(50)              .onAppear(() => {                console.info(`appear: ${item}`);              })          }.margin({ left: 10, right: 10 })        }      }, (item: string) => item)    }.cachedCount(5)

#if (API >= 9)  .shadow({ radius: 10, color: '#00000020', offsetX: 2, offsetY: 2 }) // 新阴影API#else  .border({ width: 1, color: '#E5E5E5' }) // 旧版本边框替代方案#endif #elif (DeviceType === DeviceType.Tablet)  .padding(32) // 平板端增加内边距#else  .padding(24) // 手机端默认内边距#endif

@Entry@Componentstruct LoginPage {  @State username: string = ''  @State password: string = ''  @State isFocused: boolean = false  @State isLoading: boolean = false   build() {    Column() {      TextInput({ placeholder: '请输入用户名' })        .width('100%')        .height(44)        .padding({ left: 16 })        .border({          width: 1,          color: this.isFocused ? '#007DFF' : '#E5E5E5'        }) // 焦点状态边框变色        .borderRadius(22)        .onFocus(() => this.isFocused = true)        .onBlur(() => this.isFocused = false)       // 密码输入框（省略相似代码）       // 登录按钮      Button(this.isLoading ? '登录中...' : '立即登录')        .width('100%')        .height(48)        .backgroundColor('#00000000')        .linearGradient({          angle: 90,          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]        })        .borderRadius(24)        .fontColor(Color.White)        .onClick(async () => {          if (validateForm()) {            this.isLoading = true            await simulateLogin() // 模拟登录请求            this.isLoading = false            navigateToHome()          }        })        .enabled(this.isLoading) // 加载中禁用按钮        .animation({          // 点击微动画          duration: 150,          curve: Curve.EaseInOut        })    }    .width('100%')    .height('100%')    .padding(24)    .justifyContent(FlexAlign.Center) {    }  }