简体   繁体   中英

SwiftUI: How can I restrict the tappable area of a view when presenting a modal(actually not modal) view over a main view?

I am developing an app based on a Tabview with three TabItems. Each TabItem is a List and I would be able to show a kind of modal view over those Lists. The problem becomes when I can not call a Sheet as modal view because Sheets are almost full windowed. I need some kind of bottom modal view, so I create a View that I present over a List with higher ZIndex. It seems to work until you click in the tabbar and select another TabItem having deployed the "modal" view. The error is:

[TableView] Warning once only: UITableView was told to layout its visible cells and other contents without being in the view hierarchy (the table view or one of its superviews has not been added to a window). This may cause bugs by forcing views inside the table view to load and perform layout without accurate information (eg table view bounds, trait collection, layout margins, safe area insets, etc), and will also cause unnecessary performance overhead due to extra layout passes.

So, I would like as solution to restrict the tappable area to the "modal" view area. ¿Is there a way to achieve this?

在此处输入图片说明

Probably you have some condition state depending on which you present your "modal-like" view, so depending on the same condition you can disable below TabView, like below

TabView {
// ... tabs content here
}.disabled(showingModal)

Update: Here is a demo of approach that I meant (tested with Xcode 11.3+)

在此处输入图片说明

struct TestTabViewModal: View {
    @State private var selectedTab = 0
    @State private var modalShown = false
    var body: some View {
        ZStack {
            TabView(selection: $selectedTab) {
                VStack {
                    Button("Show Modal") { self.modalShown = true }
                        .padding(.top, 40)
                    Spacer()
                }
                .tabItem {
                    Image(systemName: "1.circle")
                }.tag(0)

                Text("2").tabItem {
                    Image(systemName: "1.circle")
                }.tag(1)
            }.disabled(modalShown)

            if modalShown {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.yellow)
                    .frame(width: 320, height: 240)
                    .overlay(Button("CloseMe") { self.modalShown = false })
            }
        }
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM