在HarmonyOS NEXT开发中responseRegion设置上下浮动50%，下半部分未生效？

Question

在HarmonyOS NEXT开发中responseRegion设置上下浮动50%，下半部分未生效？代码示例如下

Column() { 
  Blank().height(200) 
  Text("按钮1").onClick(() => {}) 
    .height(60) 
    .stateStyles({ 
      pressed: { 
        .backgroundColor(Color.Red) 
      }, 
      normal: { 
        .backgroundColor(Color.Blue) 
      } 
    }) 
    .responseRegion({ x: 0, y: '-50%', width: '100%', height: '200%' }) 
  Blank().height(30) 
}

Answer 1

这里的Blank组件存在遮挡，类似Stack内元素的zIndex遮挡，可以使用以下两种方案
1、将Blank组件替换为Row组件
2、对Text组件设置zIndex(1)，将Text层级设置到顶层，demo示例如下：

Column() { 
  Blank().height(200) 
  Text("按钮1").onClick(() => {}) 
    .height(60) 
    .stateStyles({ 
      pressed: { 
        .backgroundColor(Color.Red) 
      }, 
      normal: { 
        .backgroundColor(Color.Blue) 
      } 
    }) 
    .responseRegion({ x: 0, y: '-50%', width: '100%', height: '200%' }) 
    .zIndex(1) 
  Blank().height(30) 
}

Answer 2

responseRegion可以设置一个或多个触摸热区。
默认值：
{
x：0,
y：0,
width：'100%',
height：'100%'
}
x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。
width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。
百分比相对于组件自身宽高进行计算。

所以当设置y: '-50%'时，实际计算基准是Text组件的高度（60vp）
负值不会自动穿透父容器边界，导致下半部分区域无法生效
修正方案：

Text("按钮1")
.responseRegion({
x: 0,
y: -30, // 改为绝对值计算：60vp * 50% = 30
width: '100%',
height: 120 // 60vp * 200% = 120
})
完整可运行代码：

Column() {
Blank().height(200)
Text("按钮1")
.onClick(() => {})
.height(60)
.stateStyles({
pressed: {

 .backgroundColor(Color.Red) 

},
normal: {

 .backgroundColor(Color.Blue) 

}
})
.responseRegion({
x: 0,
y: -30,
width: '100%',
height: 120
})
Blank().height(30)
}