导航栏项目自动移动 SwiftUI

Question

我试图在右侧显示一个导航栏项目，我几乎成功了，但我在最后一刻卡住了，我的导航右键在显示另一个视图后自动移动。请检查下面给出的我的代码和屏幕截图。

---

struct NvaigationButton: View {
    @State private var showPopUpFlgInapp = false
    var body: some View {
        NavigationView {
            ZStack {
                ScrollView {
                    VStack {
                        Image("DemoImage1")
                            .resizable()
                            .aspectRatio(16/9, contentMode: .fit)
                    }
                    Spacer()
                }
            }
            .navigationBarTitle("", displayMode: .inline)
         .edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading:
                                    Button(action: {
                                    }) {
                                        HStack {
                                            Image( "BackButtonWithColor")
                                        }},trailing:  AnyView(self.trailingButton))
        }
    }
    
    var trailingButton: some View {
        HStack {
            if showPopUpFlgInapp != true {
                Button(action: {
                    showPopUpFlgInapp = true
                }) {
                    HStack {
                        Image("ThreeDotsWithBckground")
                    }
                }
                
            }else if showPopUpFlgInapp == true {
                showFlagInAppr(showPopUpFlgInapp:$showPopUpFlgInapp,action: {
                    showPopUpFlgInapp = false
                })
            }
        }
    }
}

struct showFlagInAppr: View {
    @Binding var showPopUpFlgInapp: Bool
    var action: () -> Void
    var body: some View {
        if showPopUpFlgInapp {
            ZStack {
                VStack(alignment:.leading,spacing:30) {
                    Button(action: action, label: {
                        Text("Flag as inappropriate")
                    })
                }
            }.padding(20)
            .background(Color.init(UIColor.init(displayP3Red: 29/255, green: 33/255, blue: 33/255, alpha: 1.0)))
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

Answer 1

由于您的问题是 ( Xcode 版本 12.4 (12D4e) ) 中的一个错误，我们对此无能为力，因此我提出了解决此问题的自定义方法，此处：

---

---

import SwiftUI

struct ContentView: View {
    var body: some View {

        NvaigationButton()
        
    }
}

---

struct NvaigationButton: View {
    
    @State private var showPopUpFlgInapp = false
    
    var body: some View {
        
        NavigationView {
            
            ZStack {
                
                Text("Hello World!")
                
            }
            .navigationBarTitle("", displayMode: .inline)
            .edgesIgnoringSafeArea(.all)
            .navigationBarBackButtonHidden(true)
   
        }
        .trailingNavigationBarItems { trailingButton.padding() }       // <<: Apply Here!
        
    }
    
    

    var trailingButton: some View {
        HStack {
            if showPopUpFlgInapp != true {
                Button(action: {
                    showPopUpFlgInapp = true
                }) {
                    HStack {
                        Image(systemName: "star")
                    }
                }
                
            }else if showPopUpFlgInapp == true {
                showFlagInAppr(showPopUpFlgInapp:$showPopUpFlgInapp,action: {
                    showPopUpFlgInapp = false
                })
            }
        }
 
    }
}

---

struct showFlagInAppr: View {
    @Binding var showPopUpFlgInapp: Bool
    var action: () -> Void
    var body: some View {
        if showPopUpFlgInapp {
            ZStack {
                VStack(alignment:.leading,spacing:30) {
                    Button(action: action, label: {
                        Text("Flag as inappropriate")
                    })
                }
            }
            .padding(20)
            .background(Color.init(UIColor.init(displayP3Red: 29/255, green: 33/255, blue: 33/255, alpha: 1.0)))
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

---

struct TrailingNavigationBarItems<InputContent: View>: ViewModifier {

    var inputContent: () -> InputContent

    func body(content: Content) -> some View {

        return content
            .overlay(inputContent(), alignment: .topTrailing)

    }
    
}


extension View {

    func trailingNavigationBarItems<InputContent: View>(_ inputContent: @escaping () -> InputContent) -> some View {

        return self.modifier(TrailingNavigationBarItems(inputContent: inputContent))

    }

}

---

Answer 2

一种可能的解决方案是使用 toolbar 而不是 navigationBarItems：

struct NvaigationButton: View {
    @State private var showPopUpFlgInapp = false
    var body: some View {
        NavigationView {
            ZStack {
                ScrollView {
                    VStack {
                        Image("DemoImage1")
                            .resizable()
                            .aspectRatio(16 / 9, contentMode: .fit)
                    }
                    Spacer()
                }
            }
            .navigationBarTitle("", displayMode: .inline)
            .edgesIgnoringSafeArea(.all)
            .navigationBarBackButtonHidden(true)
            .toolbar { // <- add here
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {}) {
                        HStack {
                            Image("BackButtonWithColor")
                        }
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    trailingButton
                }
            }
        }
    }

    var trailingButton: some View {
        HStack {
            if showPopUpFlgInapp != true {
                Button(action: {
                    showPopUpFlgInapp = true
                }) {
                    HStack {
                        Image("ThreeDotsWithBckground")
                    }
                }

            } else if showPopUpFlgInapp == true {
                Text("") // this prevents `showFlagInAppr` from showing inline
                showFlagInAppr(showPopUpFlgInapp: $showPopUpFlgInapp, action: {
                    showPopUpFlgInapp = false
                })
            }
        }
    }
}

注意：对于 toolbar 的当前行为，我们需要添加一个额外的空文本，如 this answer 以防止 showFlagInAppr 显示内联。