HarmonyOS 7 升级后按钮更容易误触？API 26 的 28vp→32vp 改的是触摸热区，不是视觉高度

升级 HarmonyOS 7 / API 26 后，有些紧凑工具栏看起来完全没变，边缘点击却比以前更容易命中；相邻按钮距离很小时，开发者甚至会怀疑布局发生了偏移。

这里最容易误判的一点是：变化的不是组件可见高度，而是系统在没有显式设置 responseRegion 时采用的默认最小触摸目标高度。API 26 开始，Button、Button 模式的 Toggle、Select、Chip 和 ChipGroup，默认最小触摸目标高度从 28vp 调整为 32vp。组件仍然可以画成 28vp 高，但上下会多出不可见的可点击区域。

先把三个尺寸分开

排查前要区分：

尺寸	含义	是否一定能在截图里看到
布局尺寸	组件参与父布局计算的宽高	能
绘制尺寸	背景、边框、文字实际绘制范围	能
触摸热区	手指按下后可命中组件的范围	通常不能

API 26 的变更只影响第三项，而且只在开发者没有主动设置 responseRegion 时生效。它的目的不是让按钮变大，而是让紧凑控件更容易被手指准确点击。

案例一：按钮高度没变，边缘点击结果变了

下面把按钮视觉高度固定为 28vp，并记录点击次数。代码本身很简单，关键是测试方法：不要只点击按钮中心，还要点击绘制边缘外侧约 1～2vp 的位置。

@Entry
@Component
struct TouchTargetProbe {
  @State hitCount: number = 0
  @State lastAction: string = '尚未点击'

  build() {
    Column({ space: 18 }) {
      Text('可见按钮高度：28vp')
        .fontSize(16)

      Button('边界点击测试')
        .height(28)
        .padding({ left: 16, right: 16 })
        .onClick(() => {
          this.hitCount++
          this.lastAction = `命中，第 ${this.hitCount} 次`
        })

      Text(this.lastAction)
        .fontSize(14)
        .fontColor('#475569')

      Text('请分别点击按钮中心、上边缘外侧和下边缘外侧')
        .fontSize(13)
        .fontColor('#64748B')
    }
    .width('100%')
    .padding(24)
    .alignItems(HorizontalAlign.Start)
  }
}

在 API 25 及更早版本的默认行为下，最小触摸目标高度为 28vp；API 26 默认提高到 32vp。由于代码没有设置 responseRegion，API 26 环境可能在视觉边缘外仍能命中该 Button。

怎样避免把测试做错

1. 设备缩放、窗口缩放和测试工具坐标都要记录，不能拿 px 当 vp。
2. 测试点必须相对于组件边界描述，例如“上边缘外 1vp”，而不是记录一组屏幕绝对坐标。
3. 同一轮测试只改变 SDK/系统版本，不要同时修改按钮 padding 或父容器间距。
4. 截图只能证明视觉高度，必须结合点击日志证明命中范围。

案例二：相邻紧凑控件需要稳定行为时，显式设置 responseRegion

如果产品确实要求命中范围严格等于可见区域，可以显式设置 responseRegion，从而不再依赖平台默认最小值。

@Entry
@Component
struct ExplicitTouchRegionDemo {
  @State result: string = '等待点击'

  build() {
    Column({ space: 16 }) {
      Button('严格按可见区域命中')
        .height(28)
        .responseRegion({
          x: 0,
          y: 0,
          width: '100%',
          height: '100%'
        })
        .onClick(() => {
          this.result = '命中显式 28vp 区域'
        })

      Button('扩大为 40vp 方便触摸')
        .height(28)
        .responseRegion({
          x: 0,
          y: -6,
          width: '100%',
          height: 40
        })
        .onClick(() => {
          this.result = '命中显式 40vp 区域'
        })

      Text(this.result)
        .fontSize(14)
        .fontColor('#334155')
    }
    .width('100%')
    .padding(24)
    .alignItems(HorizontalAlign.Start)
  }
}

第一个按钮明确把热区限制在自身可见范围；第二个按钮在不改变视觉高度的前提下，把热区向上扩大 6vp，并把总高度设为 40vp。这样做的重点不是追求“越大越好”，而是让触摸策略成为代码里可评审、可回归的显式约束。

什么时候不应该强行恢复 28vp

如果页面没有相邻控件冲突，也没有特殊交互规范，继续采用 API 26 的 32vp 默认值通常更合适。更大的触摸目标能降低点击难度。只有下列情况值得显式设置：

• 密集工具栏中的命中边界已经由产品和测试用例固定。
• 自绘控件与周围手势区域存在明确冲突。
• 多版本兼容要求同一坐标在不同设备上得到一致结果。
• 自动化测试依赖边界点击，需要消除平台默认值变化带来的差异。

五类组件都要回归，不只是 Button

官方说明涉及以下组件：

1. Button。
2. Button 模式的 Toggle。
3. Select。
4. Chip。
5. ChipGroup。

普通文字、图片或任意自定义组件不能因为这条变更就默认推断为 32vp。排查时应先确认组件类型和模式，再判断是否命中这条 API 26 规则。

可复用的边界回归方法

可以把边界测试点统一成相对坐标，并为每个控件保存四组结果：

interface TouchProbeCase {
  name: string
  offsetY: number
  expectedHit: boolean
}

const API26_CASES: TouchProbeCase[] = [
  { name: '中心', offsetY: 14, expectedHit: true },
  { name: '上边缘内侧', offsetY: 1, expectedHit: true },
  { name: '下边缘内侧', offsetY: 27, expectedHit: true },
  { name: '下边缘外侧1vp', offsetY: 29, expectedHit: true }
]

这段数据不是触摸注入代码，而是测试用例的统一描述。真正执行时，可由自动化框架根据组件在窗口中的位置换算点击坐标。若项目显式设置了 responseRegion，最后一项预期值就应按自定义范围调整。

升级检查清单

• 搜索 Button、Button 模式 Toggle、Select、Chip、ChipGroup。
• 找出视觉高度小于 32vp 的紧凑控件。
• 标记相邻距离很小或与滑动手势重叠的区域。
• 对中心、边缘内侧和边缘外侧分别回归。
• 需要稳定旧行为时再显式设置 responseRegion。
• 不要为了匹配旧值而批量缩小所有热区，可用性优先于机械兼容。
• 在测试报告中同时记录视觉尺寸和实际命中结果。

最后的判断

API 26 把部分紧凑组件的默认最小触摸目标从 28vp 提高到 32vp，是交互可用性的默认值调整，不是布局尺寸升级。看见“按钮没变大”并不能说明新规则没有生效；同样，边缘更容易点中也不能直接判定为误触缺陷。

先用边界点击证明变化，再决定接受新默认值还是显式设置 responseRegion，比直接修改组件高度更可靠。

官方依据：HarmonyOS API 参考《触摸热区》，文档说明从 API 26.0.0 开始，未主动设置时 Button、Button 模式 Toggle、Select、Chip 和 ChipGroup 的默认最小触摸目标高度由 28vp 调整为 32vp，且不影响组件实际显示高度：
https://developer.huawei.com/consumer/cn/doc/doccenter-references/api/ts-universal-attributes-touch-target