Question

我正在创建一个SwiftUI应用，并且正在使用NavigationView和一个大标题栏。但是，我不喜欢NavigationBarItems按钮不像Messages应用程序中的大标题栏（第三张图片）对齐（第一张图片和第二张图片）。我试图重新定位按钮，但是它不再是可单击的。有人知道如何解决这个问题吗？谢谢！

第二名：

第三名：

Answer 1

解决方案：（在此处找到：https://www.hackingwithswift.com/forums/swiftui/icons-in-navigationview-title-apple-messages-style/592）

import SwiftUI

struct ContentView: View {
    @State private var midY: CGFloat = 0.0
    @State private var headerText = "Contacts"
    var body: some View {
        NavigationView {
            List {
                HStack {
                    //text
                    HeaderView(headerText: self.headerText, midY: $midY)
                        .frame(height: 40, alignment: .leading)
                        .padding(.top, 5)
                        .offset(x: -45)

                    HStack {
                        //button 1
                        Button(action: {
                            self.action1()
                        }) {
                            Image(systemName: "ellipsis.circle")
                                .font(.largeTitle)
                        }

                        //button 2
                        Button(action: {
                            self.action2()
                        }) {
                            Image(systemName: "pencil.circle")
                                .font(.largeTitle)
                        }
                    }.padding(EdgeInsets(top: 5, leading: 0, bottom: 0, trailing: 16))
                    .foregroundColor(.blue)

                } .frame(height: 40, alignment: .leading)
                    .opacity(self.midY < 70 ? 0.0 : 1.0)
                    .frame(alignment: .bottom)

                ForEach(0..<100){ count in
                    Text("Row \(count)")
                }

            }
            .navigationBarTitle(self.midY < 70 ? Text(self.headerText) : Text(""), displayMode: .inline)
            .navigationBarItems(trailing: self.midY < 70 ? HStack {
                //button 1
                Button(action: {
                    self.action1()
                }) {
                    Image(systemName: "ellipsis.circle")
                    .frame(width: 20, height: 20)
                }

                //button 2
                Button(action: {
                    self.action2()
                }) {
                    Image(systemName: "pencil.circle")
                    .frame(width: 20, height: 20)
                }
            }
            :
                HStack {
                    //button 1
                    Button(action: {
                        self.action1()
                    }) {
                        Image(systemName: "ellipsis.circle")
                        .frame(width: 0, height: 0)
                    }

                    //button 2
                    Button(action: {
                        self.action2()
                    }) {
                        Image(systemName: "pencil.circle")
                        .frame(width: 0, height: 0)

                    }
                }
            )
        }
    }

    func action1() {
        print("do action 1...")
    }

    func action2() {
        print("do action 2...")
    }
}

struct HeaderView: View {
    let headerText: String
    @Binding var midY: CGFloat
    var body: some View {
        GeometryReader { geometry -> Text in
            let frame = geometry.frame(in: CoordinateSpace.global)

            withAnimation(.easeIn(duration: 0.25)) {
                DispatchQueue.main.async {
                   self.midY = frame.midY
                }
            }

            return Text(self.headerText)
                .bold()
                .font(.largeTitle)
        }
    }
}

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

SwiftUI将navigationBarItems按钮与大的NavigationBarTitle对齐，例如“消息”中的

1 个答案: