ArkUI 交互响应：别把所有动作都塞进 onClick

今天我们先用一个小页面，把 ArkUI 里最基础的交互边界跑一遍：按钮点击、卡片点击、禁用态和点击区域。

交互响应不是“能点就行”。新手最容易犯的错，是把所有动作都塞进 onClick，然后让用户猜哪里能点、点了会发生什么。我们这篇先不碰复杂手势，只把最普通的点击关系摆清楚。

参考文档：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-interaction-development-guide-overview

先把点击对象分清楚

按钮适合明确命令，比如保存、提交、删除。

Button('保存草稿')
  .onClick(() => {
    this.actionText = '点击了主按钮：保存草稿'
  })

这段代码很简单：按钮被点到后，更新页面里的一行结果文案。这里的重点不是状态，而是“按钮看起来就像一个命令”。

禁用态也要明确给出来：

Button('暂不可用')
  .enabled(false)

用户看到它不能点，就不会以为页面坏了。

卡片可以点，但要让人看得出来

如果整张卡片都能进入详情，可以把 onClick 绑定到卡片容器上。

Column() {
  this.clickCard('项目卡片', '这张卡片整块都绑定了 onClick，点击区域比较完整。', '#0F766E')
}
.width('100%')
  .onClick(() => {
    this.cardText = '点击了整张卡片：进入项目详情'
  })

这里有个小坑：this.clickCard() 是 @Builder 方法，不能直接在它后面继续链式调用属性。我们用一个系统 Column 包住它，再把 onClick 挂到 Column 上。这类写法适合列表项、内容卡片、入口卡片。别把它用在一整块普通内容上，不然用户会误触。

点击区域别偷偷放大

有些地方只希望一个标签或小按钮能点，那就只给这块区域绑定事件。

Text('可点击区域')
  .onClick(() => {
    this.areaText = '只点到了紫色标签区域'
  })

这个 Demo 里，右侧空白不响应点击。真实项目里也一样，交互区域要跟视觉区域对得上。

你自己的页面里，有没有哪块区域“看起来不能点，实际却能点”？这种地方一般就是交互体验最容易出问题的地方。

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/interaction/ArkUIInteractionOverviewDemo.ets

@Entry
@Component
struct ArkUIInteractionOverviewDemo {
  @State actionText: string = '还没有触发动作'
  @State cardText: string = '点一下卡片，看看响应区域'
  @State areaText: string = '只有蓝色区域绑定了点击'

  private showTip(message: string): void {
    this.getUIContext().getPromptAction().showToast({
      message: message,
      duration: 1200,
      bottom: 120
    })
  }

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  clickCard(title: string, desc: string, color: string) {
    Column({ space: 8 }) {
      Text(title)
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor(color)
      Text(desc)
        .fontSize(13)
        .fontColor('#4B5563')
        .lineHeight(20)
    }
    .width('100%')
    .padding(16)
    .borderRadius(14)
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: '#E5E7EB' })
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI 交互响应')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('别把所有动作都塞进 onClick')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('这一页先把交互响应的边界看清楚：按钮可以点，卡片也可以点，但不是每块区域都应该响应。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('按钮点击：明确告诉用户能做什么', '按钮适合清晰的命令，不要把隐藏操作藏在普通文字里。')
        Column({ space: 12 }) {
          Row({ space: 10 }) {
            Button('保存草稿')
              .fontSize(14)
              .fontColor('#FFFFFF')
              .backgroundColor('#2563EB')
              .borderRadius(18)
              .height(38)
              .padding({ left: 18, right: 18 })
              .onClick(() => {
                this.actionText = '点击了主按钮：保存草稿'
                this.showTip('草稿已保存')
              })
            Button('暂不可用')
              .fontSize(14)
              .fontColor('#9CA3AF')
              .backgroundColor('#E5E7EB')
              .borderRadius(18)
              .height(38)
              .padding({ left: 18, right: 18 })
              .enabled(false)
          }
          .width('100%')
          .alignItems(VerticalAlign.Center)

          Text(this.actionText)
            .fontSize(14)
            .fontColor('#1F2937')
            .lineHeight(22)
            .padding(14)
            .borderRadius(12)
            .backgroundColor('#F8FAFC')
            .border({ width: 1, color: '#E5E7EB' })
            .width('100%')
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('卡片点击：整块内容都能响应', '卡片点击适合进入详情或切换选择，但视觉上要让用户看得出来。')
        Column({ space: 12 }) {
          Column() {
            this.clickCard('项目卡片', '这张卡片整块都绑定了 onClick，点击区域比较完整。', '#0F766E')
          }
          .width('100%')
          .onClick(() => {
            this.cardText = '点击了整张卡片：进入项目详情'
            this.showTip('点击了项目卡片')
          })
          Text(this.cardText)
            .fontSize(14)
            .fontColor('#1F2937')
            .lineHeight(22)
            .padding(14)
            .borderRadius(12)
            .backgroundColor('#F8FAFC')
            .border({ width: 1, color: '#E5E7EB' })
            .width('100%')
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('点击区域：别让空白区域误触', '如果只有一个小按钮能点，就不要让整行空白都响应。')
        Column({ space: 12 }) {
          Row() {
            Text('可点击区域')
              .fontSize(14)
              .fontColor('#FFFFFF')
              .padding({ left: 16, right: 16, top: 10, bottom: 10 })
              .borderRadius(18)
              .backgroundColor('#7C3AED')
              .onClick(() => {
                this.areaText = '只点到了紫色标签区域'
                this.showTip('只响应标签区域')
              })
            Blank()
            Text('右侧空白不绑定点击')
              .fontSize(13)
              .fontColor('#6B7280')
          }
          .width('100%')
          .padding(14)
          .borderRadius(14)
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#E5E7EB' })

          Text(this.areaText)
            .fontSize(14)
            .fontColor('#1F2937')
            .lineHeight(22)
            .padding(14)
            .borderRadius(12)
            .backgroundColor('#F8FAFC')
            .border({ width: 1, color: '#E5E7EB' })
            .width('100%')
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8FAFC')
  }
}