ts-universal-attributes-click.md 1.2 KB
Newer Older
Z
zengyawen 已提交
1 2
# 点击控制

T
explain  
tianyu 已提交
3 4
设置组件是否可触摸。

H
geshi  
HelloCrease 已提交
5
>  **说明:**
K
kukixi 已提交
6
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
7 8 9 10 11 12 13 14 15 16


## 权限列表




## 属性


H
HelloCrease 已提交
17 18 19
| **名称**    | **参数类型** | **默认值** | **描述**         |
| --------- | -------- | ------- | -------------- |
| touchable | boolean  | true    | 设置当前组件是否可以被触摸。 |
Z
zengyawen 已提交
20 21 22 23


## 示例

H
geshi  
HelloCrease 已提交
24 25
```ts
// xxx.ets
Z
zengyawen 已提交
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
@Entry
@Component
struct TouchAbleExample {
  @State text1: string = ''
  @State text2: string = ''

  build() {
    Stack() {
      Rect()
        .fill(Color.Gray).width(150).height(150)
        .onClick(() => {
          console.info(this.text1 = 'Rect Clicked')
        })
        .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      Ellipse()
        .fill(Color.Pink).width(150).height(80)
        .touchable(false) // 点击Ellipse区域,不会打印 “Ellipse Clicked”
        .onClick(() => {
          console.info(this.text2 = 'Ellipse Clicked')
        })
        .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
    }.margin(100)
  }
}
```

![zh-cn_image_0000001189624550](figures/zh-cn_image_0000001189624550.gif)