HarmonyOS API：通用属性

joytrian

发布于 2023-3-23 12:23

浏览

0收藏

版本：v3.1 Beta

多态样式

更新时间: 2023-02-17 09:19

设置组件不同状态下的样式。

说明

从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数类型	描述
stateStyles	StateStyles	设置组件不同状态的样式。

StateStyles接口说明

名称	类型	必填	描述
normal	()=>void	否	组件无状态时的样式。
pressed	()=>void	否	组件按下状态的样式。
disabled	()=>void	否	组件禁用状态的样式。
focused	()=>void	否	组件获焦状态的样式。
clicked	()=>void	否	组件点击状态的样式。

示例

// xxx.ets
@Entry
@Component
struct StyleExample {
  @State isEnable: boolean = true

  @Styles pressedStyles() {
        .backgroundColor("#ED6F21")
        .borderRadius(10)
        .borderStyle(BorderStyle.Dashed)
        .borderWidth(2)
        .borderColor("#33000000")
        .width(120)
        .height(30)
        .opacity(1)
  }

  @Styles disabledStyles() {
        .backgroundColor("#E5E5E5")
        .borderRadius(10)
        .borderStyle(BorderStyle.Solid)
        .borderWidth(2)
        .borderColor("#2a4c1919")
        .width(90)
        .height(25)
        .opacity(1)
  }

  @Styles normalStyles() {
        .backgroundColor("#0A59F7")
        .borderRadius(10)
        .borderStyle(BorderStyle.Solid)
        .borderWidth(2)
        .borderColor("#33000000")
        .width(100)
        .height(25)
        .opacity(1)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text("normal")
        .fontSize(14)
        .fontColor(Color.White)
        .opacity(0.5)
        .stateStyles({
          normal: this.normalStyles,
        })
        .margin({ bottom: 20 })
        .textAlign(TextAlign.Center)
      Text("pressed")
        .backgroundColor("#0A59F7")
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles,
        })
        .margin({ bottom: 20 })
        .textAlign(TextAlign.Center)
      Text(this.isEnable == true ? "effective" : "disabled")
        .backgroundColor("#0A59F7")
        .borderRadius(20)
        .borderStyle(BorderStyle.Solid)
        .borderWidth(2)
        .borderColor(Color.Gray)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .enabled(this.isEnable)
        .stateStyles({
          disabled: this.disabledStyles,
        })
        .textAlign(TextAlign.Center)
      Text("control disabled")
        .onClick(() => {
          this.isEnable = !this.isEnable
          console.log(`${this.isEnable}`)
        })
    }
    .width(350).height(300)
  }
}

HarmonyOS API：通用属性-鸿蒙开发者社区

触摸测试控制

更新时间: 2023-02-17 09:19

设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发，具体影响参考HitTestMode枚举说明。

说明

从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
当Stack组件中有多个节点触摸区域重叠时，如两个节点，默认只会对显示在最上层的节点做触摸测试，若需要显示在下层的节点触发触摸测试，请给显示在上层的节点设置hitTestBehavior为HitTestMode.Transparent。

属性

名称	参数类型	描述
hitTestBehavior	HitTestMode	设置当前组件的触摸测试类型。默认值： HitTestMode.Default

HitTestMode枚举说明

名称	描述
Default	默认触摸测试效果，自身和子节点都响应触摸测试，但会阻塞兄弟节点的触摸测试。
Block	自身响应触摸测试，阻塞子节点和兄弟节点的触摸测试。
Transparent	自身和子节点都响应触摸测试，不会阻塞兄弟节点的触摸测试。
None	自身不响应触摸测试，不会阻塞子节点和兄弟节点的触摸测试。

示例

Text组件设置hitTestBehavior为HitTestMode.Transparent，不会阻塞内层Stack的触摸测试，因此Text和内层Stack的onTouch事件都会触发。

内层Stack设置hitTestBehavior为HitTestMode.Block，会阻塞子节点和外层Button进行触摸测试，因此内层Button和外层Button组件不会响应onTouch事件。

// xxx.ets
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct HitTestBehaviorExample {
  build() {
    // outer stack
    Stack() {
      Button('outer button')
        .onTouch((event) => {
          promptAction.showToast({ message: 'outer button touched type: ' + event.type })
          console.info('outer button touched type: ' + event.type)
        })
      // inner stack
      Stack() {
        Button('inner button')
          .onTouch((event) => {
            promptAction.showToast({ message: 'inner button touched type: ' + event.type })
            console.info('inner button touched type: ' + event.type)
          })
      }
      .width("100%").height("100%")
      .hitTestBehavior(HitTestMode.Block)
      .onTouch((event) => {
        promptAction.showToast({ message: 'stack touched type: ' + event.type })
        console.info('stack touched type: ' + event.type)
      })

      Text('Transparent')
        .hitTestBehavior(HitTestMode.Transparent)
        .width("100%").height("100%")
        .onTouch((event) => {
          setTimeout(() => {
            promptAction.showToast({ message: 'text touched type: ' + event.type })
          }, 2000)
          console.info('text touched type: ' + event.type)
        })
    }.width(300).height(300)
  }
}

HarmonyOS API：通用属性-鸿蒙开发者社区

分布式迁移标识

更新时间: 2023-02-17 09:19

组件的分布式迁移标识，指明了该组件在分布式迁移场景下可以将特定状态恢复到对端设备。

说明

从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数类型	描述
restoreId	number	标记支持分布式迁移的组件Id，用于两端设备组件的配对。同一个应用中各个支持分布式迁移组件的Id必须不同。

支持的组件

组件名称	起始API版本	迁移状态
List	8	迁移当前设备显示在顶部ListItem的索引值，迁移后在对端设备上，将迁移索引值对应的ListItem在List中完整地置顶显示。
Grid	9	迁移当前设备显示在顶部GridItem的索引值，迁移后在对端设备上，将迁移索引值对应的GridItem在Grid中完整地置顶显示。ScrollBar位置无法迁移。
Scroll	9	迁移距顶部滚动的绝对距离。两端设备显示规格不同等原因导致布局不一致，会影响迁移效果。
TextArea	9	迁移输入的文本内容和光标位置。
TextInput	9	迁移输入的文本内容和光标位置。

示例

// xxx.ets
@Entry
@Component
struct RestoreIdExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(Color.Pink)
          }
        }, item => item)
      }
      .restoreId(1)
    }
  }
}

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-attributes-polymorphic-style-0000001427584836-V3?catalogVersion=V3

分类

卡片开发

三方库

标签

HarmonyOS API