将组件放入绝对坐标空间,例如 ZStack 或 GeometryReader,然后传递内容即可开始使用抽屉式面板。
ZStack {
BottomSheet(content: Color.clear.background(.thinMaterial))
}
您可以使用构建器方法来更改某些规格
hideDragButton
- 隐藏拖拽按钮withoutAnimation
- 关闭动画 ZStack {
BottomSheet(content: Color.clear.background(.thinMaterial))
.hideDragButton()
.withoutAnimation()
}
shift
- 抽屉式面板的可见高度
topIndentation
- 从顶部到抽屉可以达到的最大高度的空间
draggerHeight
- 对拖拽敏感的空间
dragThresholdToAct
- 拖拽长度阈值,超过此阈值后,根据移动方向触发移动到下一个级别
如果需要在组件的外部上下文中对面板位置变化做出反应,请观察面板位置变化。例如,根据新的高度尺寸更新抽屉内容布局。位置 BottomSheetPosition 随面板的 height 传递。 height 是与 CGFloat 类型值关联的枚举。
@State private var position: BottomSheetPosition
BottomSheet(
content: SheetContentView(position: $position)
)
.onPositionChanged{
position = $0
}
位置 | 描述 |
---|---|
up(CGFloat) | 在顶部 |
middle(CGFloat) | 在中间 |
down(CGFloat) | 在底部 |