形状#

Shape 类型用于定义视图的裁剪形状或背景形状，常用于 clipShape、background、border 等修饰符中，对应 SwiftUI 中的 Shape 协议。支持内建关键字形状，也支持自定义圆角矩形（包括统一圆角、椭圆角或每个角独立控制）。

内建形状#

'rect'（矩形）#

标准矩形，默认无圆角。如需圆角请使用对象形式配置。

1clipShape="rect"

'circle'（圆形）#

在视图框架中居中显示的圆形，半径等于视图框架最短边的一半。

1clipShape="circle"

'capsule'（胶囊）#

填充整个宽度或高度的椭圆形。等效于圆角半径为短边一半的矩形。

1clipShape="capsule"

'ellipse'（椭圆）#

在视图框架中对齐并填满的椭圆。

1clipShape="ellipse"

'buttonBorder'（按钮边框）#

一个系统定义的按钮边框形状，具体外观由平台和上下文决定。

1clipShape="buttonBorder"

'containerRelative'（继承容器）#

继承父级容器定义的形状作为自身形状。如果未定义容器形状，则默认为矩形。

1clipShape="containerRelative"

自定义矩形形状（圆角矩形）#

当你需要更精细地控制圆角半径或不同角的圆角时，可以使用以下三种对象形式：

统一圆角矩形#

1{
2  type: 'rect',
3  cornerRadius: number,
4  style?: RoundedCornerStyle
5}

• cornerRadius: 所有角的统一圆角半径。
• style（可选）: 圆角风格，可选 'circular' 或 'continuous'。

示例：#

1clipShape={{
2  type: 'rect',
3  cornerRadius: 12,
4  style: 'continuous'
5}}

椭圆角尺寸（宽高不同）#

1{
2  type: 'rect',
3  cornerSize: {
4    width: number
5    height: number
6  },
7  style?: RoundedCornerStyle
8}

• 使用不同的 width 和 height 来生成椭圆形圆角。

示例：#

1clipShape={{
2  type: 'rect',
3  cornerSize: { width: 10, height: 20 }
4}}

每个角分别设置圆角半径#

1{
2  type: 'rect',
3  cornerRadii: {
4    topLeading: number,
5    topTrailing: number,
6    bottomLeading: number,
7    bottomTrailing: number
8  },
9  style?: RoundedCornerStyle
10}

• 分别指定四个角的圆角半径。

示例：#

1clipShape={{
2  type: 'rect',
3  cornerRadii: {
4    topLeading: 10,
5    topTrailing: 20,
6    bottomLeading: 0,
7    bottomTrailing: 30
8  }
9}}

RoundedCornerStyle（圆角风格）#

可选参数，用于定义圆角的表现风格：

• "circular": 传统的圆形圆角，适合经典 UI。
• "continuous"（默认）: 连续平滑的圆角曲线，适用于现代设计风格。

总结表#