SwiftUI 将 navigationBarItems 按钮与“消息”中的大 navigationBarTitle 对齐

Posted 2023-02-24

【中文标题】SwiftUI 将 navigationBarItems 按钮与“消息”中的大 navigationBarTitle 对齐

【英文标题】：SwiftUI align navigationBarItems buttons with large navigationBarTitle like in "Messages"

【发布时间】：2020-06-09 08:03:32

【问题描述】：

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

第二：

第三：

【问题讨论】：

你有这些截图的相关代码吗？

我希望我有。第一个和第二个只是股票消息应用程序的屏幕截图，只是为了显示我想要的。第三个是我自己的应用程序，但它只是 SwiftUI 中的 NavigationView，带有 .navigationBarTitle("XY", displayMode: .large) 和 .navigationBarItems(trailing: Button(action: ...) Image(...)) .

试试看这里：hackingwithswift.com/forums/swiftui/…

【参考方案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()