2

我正在使用 SwiftUI TabView，我想添加一个自定义bottomSheet()修饰符，它接受一个视图并像标准sheet()修饰符一样显示它，但不占用整个屏幕。

当前行为：我设法创建了自定义修饰符并显示了一个工作表，但工作表出现在底部选项卡栏的后面（因为它是从内部显示的NavigationView）。

预期行为：我正在寻找一种方法来用前面的工作表覆盖标签栏。

在此处输入图像描述

最小可重现示例

这是我创建的自定义修饰符。

struct BottomSheet<SheetContent: View>: ViewModifier {
    
    let sheetContent: SheetContent
    
    @Binding var isPresented: Bool
    
    init(isPresented: Binding<Bool>, @ViewBuilder content: () -> SheetContent) {
        self.sheetContent = content()
        _isPresented = isPresented
    }
    
    func body(content: Content) -> some View {
        ZStack {
            content
            if isPresented {
                ZStack {
                    Color.black.opacity(0.1)
                    VStack {
                        Spacer()
                        sheetContent
                            .padding()
                            .frame(maxWidth: .infinity)
                            .background(
                                Rectangle()
                                    .foregroundColor(.white)
                            )
                    }
                }
            }
        }
    }
}

extension View {
    func bottomSheet<SheetContent: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> SheetContent) -> some View {
        self.modifier(BottomSheet(isPresented: isPresented, content: content))
    }
}

这是我使用它的方式。

struct ScheduleTab: View {
    
    @State private var showSheet = false
    
    var body: some View {
        NavigationView {
            Button("Open Sheet") {
                showSheet.toggle()
            }
        }
        .navigationTitle("Today")
        .navigationBarTitleDisplayMode(.inline)
        .bottomSheet(isPresented: $showSheet) {
            Text("Hello, World")
        }
    }
}
4

0 回答 0