ios 在所有内容上显示黑色图层(如工作表或AlertView)

gv8xihay 于 2023-10-21 发布在 iOS

关注(0)|答案(1)|浏览(116)

我有一个包含SideBar()和Group的Hstack，它根据SideBar的选择显示内容。

struct Main: View {
    @State private var currentScreen: AppScreen? = .analisys

    var body: some View {
        HStack(spacing: 0) {
            SideBar()
            Group {
                if let currentScreen {
                    currentScreen.content
                }
            }
    }
        
        @ViewBuilder
        private func SideBar() -> some View {
            // The SideBar Menu
        }
}

内容通过名为AppScreen的枚举进行管理

import SwiftUI

enum AppScreen: CaseIterable, Identifiable {
    case analisys, trends
    var id: AppScreen { self }
        
   @ViewBuilder
    var content: some View {
        switch self {
        case .analisys: ContentUnavailableView(name + " Non disponibile", systemImage: icon)
        case .trends: TrendsView()       
        }
    }
}

在名为TrendView的内容中，有一个按钮应该显示一个黑色的Layer，我将其用于自定义视图的演示背景，例如alertView。（黑色层和它上面的alertView）。
现在我的问题是，如果我使用.overlay { }调用TrendView()内部的自定义视图，SideBar不会被黑色层遮挡。我怎样才能重新创建像alertView一样的黑色图层和重叠视图的效果呢？

struct TrendView: View {   
    @State private var showBlackLayer: Bool = false

    var body: some View {
       
        ZStack {
            Button("Show Layer and View") {
                showBlackLayer.toggle()
            }
            .overlay {
                Color.black
                
                    .opacity(showBlackLayer ? 0.5 : 0)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        showBlackLayer = false // Chiudi la vista nera
                    }
            }
        }
        .buttonStyle(.borderless)
    }
}

ios

来源：https://stackoverflow.com/questions/77292115/show-black-layer-like-sheet-or-alertview-over-all-content

1条答案

按热度按时间

mcvgt66p1#

我建议你在Main中使用ZStack，而不是HStack。这样，底层视图就能够使用全屏来显示覆盖。在底层视图上使用前导填充，以允许侧边栏也被看到。
在TrendView中，ZStack需要占据整个屏幕，然后覆盖应该应用于ZStack，而不是Button。最好使用.ignoresSafeArea而不是.edgesIgnoringSafeArea（已弃用）。
下面是更新后的代码：

struct Main: View {

    // other content as before

    var body: some View {
        ZStack(alignment: .leading) { // <- ZStack instead of HStack
            SideBar()
            Group {
                if let currentScreen {
                    currentScreen.content
                }
            }
        }
    }
}

struct TrendView: View {
    @State private var showBlackLayer: Bool = false

    var body: some View {
        ZStack {
            Button("Show Layer and View") {
                showBlackLayer.toggle()
            }
        }
        .padding(.leading, 100) // <- should correspond to width of sidebar
        .frame(maxWidth: .infinity, maxHeight: .infinity) // <- occupy full screen
        .buttonStyle(.borderless)
        .overlay { // <- moved to ZStack (and revised)
            if showBlackLayer {
                Color.black
                    .opacity(0.5)
                    .ignoresSafeArea()
                    .onTapGesture {
                        showBlackLayer = false // Chiudi la vista nera
                    }
            }
        }
    }
}

赞(0）回复(0）举报 2023-10-21

我来回答

ios 在所有内容上显示黑色图层(如工作表或AlertView)

1条答案

相关问题

热门标签

最新问答