多平台 (iOS, macOS) SwiftUI 底部抽屉式面板

功能特性

创建

将组件放入绝对坐标空间,例如 ZStackGeometryReader,然后传递内容即可开始使用抽屉式面板。

        ZStack {
            BottomSheet(content: Color.clear.background(.thinMaterial))
        }

构建器

您可以使用构建器方法来更改某些规格

        ZStack {
            BottomSheet(content: Color.clear.background(.thinMaterial))
            .hideDragButton()
            .withoutAnimation()
        }

可选

观察面板位置

如果需要在组件的外部上下文中对面板位置变化做出反应,请观察面板位置变化。例如,根据新的高度尺寸更新抽屉内容布局。位置 BottomSheetPosition 随面板的 height 传递。 height 是与 CGFloat 类型值关联的枚举。

    @State private var position: BottomSheetPosition
    
        BottomSheet(
            content: SheetContentView(position: $position)
        )
        .onPositionChanged{
            position = $0
        }
位置 描述
up(CGFloat) 在顶部
middle(CGFloat) 在中间
down(CGFloat) 在底部

使用包的 SwiftUI 示例

click to watch expected UI behavior for the example

click to watch expected UI behavior for the example

文档 (API)