从 NavigationView 呈现的 SwiftUI 关闭模式表(Xcode Beta 5)

Posted

技术标签:

【中文标题】从 NavigationView 呈现的 SwiftUI 关闭模式表(Xcode Beta 5)【英文标题】:SwiftUI dismiss modal sheet presented from NavigationView (Xcode Beta 5) 【发布时间】:2019-08-10 07:40:37 【问题描述】:

我正在尝试关闭通过 SwiftUI 中的 .sheet 呈现的模态视图 - 由 Button 调用,该视图位于 NavigationViews navigationBarItems 内,如下所示:

struct ModalView : View 

    @Environment(\.presentationMode) var presentationMode  

    var body: some View        
        Button(action: 
            self.presentationMode.value.dismiss()
        , label:  Text("Save"))
       



struct ContentView : View 

    @State var showModal: Bool = false

    var body: some View 
         NavigationView  
           Text("test")
           .navigationBarTitle(Text("Navigation Title Text"))
           .navigationBarItems(trailing:
               Button(action: 
                   self.showModal = true
               , label:  Text("Add") )
                   .sheet(isPresented: $showModal, content:  ModalView() )
           )
        
    


点击“保存”按钮时,模式不会关闭,它只会保留在屏幕上。摆脱它的唯一方法是在模式上向下滑动。

打印self.presentationMode.value的值总是显示false所以好像还没有呈现出来。

仅当它从NavigationView 呈现时才会发生。把它拿出来就可以了。

我在这里遗漏了什么,还是这是一个测试版问题?

【问题讨论】:

当我在几个测试版之前尝试过类似的东西时,它出现了一次。我认为你不需要担心 showModal,它是由 sheet() 重置的 刚刚意识到我错过了问题中的关键句子 - 模态显示正常,但不会关闭! 【参考方案1】:

您需要将.sheet 移到按钮之外。

NavigationView 
  Text("test")
  .navigationBarTitle(Text("Navigation Title Text"))
  .navigationBarItems(trailing:
     Button("Add") 
       self.showModal = true
     
  )
  .sheet(isPresented: $showModal, content:  ModalView() )

您甚至可以将其移到 NavigationView 闭包之外。

NavigationView 
  Text("test")
  .navigationBarTitle(Text("Navigation Title Text"))
  .navigationBarItems(trailing:
     Button("Add")  self.showModal = true 
  )

.sheet(isPresented: $showModal, content:  ModalView() )

请注意,如果您有一个简单的文本按钮,您还可以简化 Button 调用。

【讨论】:

哇,我不敢相信我没有尝试过。非常感谢!您能解释一下为什么它在按钮内时不起作用吗?还是有点不清楚。 这可能是一个错误,由于某种原因,导致导航栏中的按钮与视图内部的处理方式不同。或者,导航栏可能放置在导航视图之外,作为它的兄弟姐妹。我现在想不出任何其他原因。 很好的解决方法,但我想这也是一个必须由Apple处理的错误【参考方案2】:

解决方案在文档中并不明显,大多数教程都选择简单的解决方案。但我真的想在工作表的 NavigationBar 中有一个按钮可以关闭工作表。以下是六步解决方案:

    将 DetailView 设置为不显示。 添加一个按钮来设置 DetailView 显示。 调用 .sheet(isPresented 修饰符来显示工作表。 将显示在工作表中的视图包装在 NavigationView 中,因为我们要显示 .navigationBarItem 按钮。 需要PresentationMode 才能关闭工作表视图。 向导航栏添加一个按钮并调用dismiss方法。

导入 SwiftUI

struct ContentView: View 
    // 1
    @State private var showingDetail = false
    var body: some View 
        VStack 
            Text("Hello, world!")
                .padding()
            Button("Show Detail") 
                showingDetail = true // 2
            
            // 3
            .sheet(isPresented: $showingDetail) 
                // 4
                NavigationView 
                    DetailView()
                
            
        
    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    



struct DetailView: View 
    // 5
    @Environment(\.presentationMode) var presentationMode
    var body: some View 
        Text("Detail View!")
            // 6
            .navigationBarItems(leading: Button(action: 
                presentationMode.wrappedValue.dismiss()
            ) 
                Image(systemName: "x.circle")
                    .font(.headline)
                    .foregroundColor(.accentColor)
            )
    

【讨论】:

以上是关于从 NavigationView 呈现的 SwiftUI 关闭模式表(Xcode Beta 5)的主要内容,如果未能解决你的问题,请参考以下文章

如何将 NavigationView 从具有固定尺寸的 TabView 扩展到全屏?

NavigationView 中意外填充 Swift UI 列表 [重复]

为啥 NavigationView 中的动画从左上角开始?

从 Core Data 加载图像使 NavigationView 过渡变得跳跃

如何从右到左设计android.support.design.widget.NavigationView?

swiftui TabView 在设备下呈现 UIViewControllerRepresentable 的意外行为