内容形状#

contentShape 属性用于定义视图内容的交互区域或视觉边界形状。该形状可影响视图在点击、拖放、辅助功能、悬停等场景中的行为。常用于精确控制命中测试（hit-testing）区域或指定用于辅助功能和交互反馈的自定义轮廓。

这在如下场景中特别有用：

• 控制按钮或自定义视图的可点击区域；
• 定义拖放预览或上下文菜单的形状；
• 指定辅助功能的可聚焦区域；
• 优化鼠标悬停的交互体验。

定义#

1contentShape?: Shape | {
2  kind: ContentShapeKinds
3  shape: Shape
4}

支持的写法#

1. 简单形状（适用于所有用途）#

直接传入一个 Shape 值，作为默认交互区域，用于所有情境（点击、辅助功能、拖放等）。

1contentShape="circle"

2. 按用途定义的指定形状#

使用结构体形式设置指定类型的内容形状：

1{
2  kind: ContentShapeKinds
3  shape: Shape
4}

用于为特定交互类型（如 accessibility、dragPreview）设置不同的区域。

支持的 ContentShapeKinds#

示例#

为所有交互设置默认形状#

1<Button
2  title="点击我"
3  action={() => {}}
4  contentShape="capsule"
5/>

仅为辅助功能定义内容形状#

1<Button
2  title="可访问按钮"
3  action={() => {}}
4  contentShape={{
5    kind: "accessibility",
6    shape: {
7      type: "rect",
8      cornerRadius: 12
9    }
10  }}
11/>

自定义点击区域为椭圆形#

1<Text
2  contentShape={{
3    kind: "interaction",
4    shape: "ellipse"
5  }}
6>
7  自定义点击区域
8</Text>

注意事项#

• contentShape 不会影响视图的外观，只影响其交互行为；
• 如果使用自定义形状，建议确保其与视图的 frame 对齐合理；
• 对于只有图标的按钮或较小区域，设置合适的 contentShape 有助于提升点击命中率与可访问性。