当前位置：首页 > article >正文

ResizableSheet, SafeAreaInset 的使用

article 2025/3/20 4:50:18

1. ResizableSheet 调整 View 视图大小

1.1 实现

/// 调整 View 视图大小
struct ResizableSheetBootcamp: View {
    // 是否显示
    @State private var showSheet: Bool = false
    @State private var detents: PresentationDetent = .large
    
    var body: some View {
        Button("Click me!") {
            showSheet.toggle()
        }
        .sheet(isPresented: $showSheet) {
            MyNextView(detents: $detents)
                // large/medium 设置 View 的大小
                //.presentationDetents([.medium, .large])
                //.presentationDetents([.fraction(0.1), .height(300), .medium, .large])
                //.presentationDetents([.height(200)])
                //.presentationDetents([.fraction(0.5), .medium, .large], selection: $detents)
                // 隐藏指示器
                //.presentationDragIndicator(.hidden)
                // View 向下拖动，不能被关闭
                //.interactiveDismissDisabled()
        }
        //.onAppear {
        //    showSheet = true
        //}
    }
}

/// 下一个View
struct MyNextView: View{
    @Binding var detents: PresentationDetent
    var body: some View{
        ZStack{
            Color.red.ignoresSafeArea()
            VStack(spacing: 20) {
                Button("20 %") {
                    detents = .fraction(0.2)
                }
                Button("Medium") {
                    detents = .medium
                }
                Button("600 PX") {
                    detents = .height(600)
                }
                Button("Large") {
                    detents = .large
                }
            }
        }
        .presentationDetents([.fraction(0.2), .medium, .height(600), .large], selection: $detents)
        .presentationDragIndicator(.hidden)
    }
}

1.2 展示图:

2. SafeAreaInset 安全区域添加控件

2.1 实现

/// 安全区域添加控件
struct SafeAreaInsetBootcamp: View {
    var body: some View {
        NavigationStack{
            List(0..<10) { _ in
                Rectangle()
                    .frame(height: 300)
            }
            .navigationTitle("Safe Area Insets")
            // 固定导航栏
            //.navigationBarTitleDisplayMode(.inline)
            //.overlay(alignment: .bottom) {
            //    Text("Hi")
            //        .frame(maxWidth: .infinity)
            //        .background(Color.yellow)
            //}
            .safeAreaInset(edge: .top, alignment: .trailing, spacing: nil) {
                Text("Hi")
                    .frame(maxWidth: .infinity)
                    //.padding()
                    .background(Color.yellow.ignoresSafeArea(edges: .bottom))
                    //.clipShape(Circle())
                    //.padding()
            }
        }
    }
}