将组件放入绝对坐标空间,例如 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) | 在底部 |