SwiftUI 结合 NavigationBarBackButton 和标题

Question

我正在尝试制作一份微信副本以供练习，我有一个可点击的聊天列表，它将带我进入 NavigationLink 的下一个视图。但是新视图的标题与导航栏后退按钮不对齐。查看这些图片。

Image 1 Image 2

如果我使用 .navigationBarHidden(true)，它也会删除标题。

ContentView.swift

//
//  ContentView.swift
//  Chatapp
//
//  Created by 胡家睿 on 2021/4/7.
//

import SwiftUI

let names = [
    "是银子不是银子II": "url",
    "月亮亮了我就睡": "url",
    "查无此群❓": "url",
    "谜底时钟用户群": "url",
    "语文周四四年级上册6:30-7:30": "url",
    "WPS办公助手": "url",
    "订阅号消息": "url",
    "我说昵称太长会有啥子跟着念": "url",
    "微信": "url",
    "三人行，必有憨憨老弟": "url",
    "母后大人": "url",
    "微信运动": "url",
    "无语不全": "url",
    "Oliver": "url",
    "Summer": "url"
]

struct CenteredLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        ZStack {
            HStack {
                configuration.icon
                configuration.title
            }
        }
    }
}

struct ContentView: View {
    @State var searchText: String = ""
    @State private var rightSide: Bool = true
    @State var unreadMessages: Int = 1
    
    var body: some View {
        NavigationView {
            List {
                ZStack {
                    VStack {
                        HStack {
                            Image(systemName: "magnifyingglass")
                                .foregroundColor(.secondary)
                            TextField("搜索", text: $searchText)
                                .padding(7)
                                .background(Color(.systemGray6))
                                .cornerRadius(8)
                        }
                        .padding(8)
                    }
                }
                
                ForEach((names.sorted(by: >)).filter({ "\([=10=])".contains(searchText) || searchText.isEmpty }), id: \.key) { key, value in
                    NavigationLink(destination: Chat(name: key)) {
                        HStack {
                            RemoteImage(url: value)
                                .frame(width: 40, height: 40)
                                .cornerRadius(5)
                            Text(key)
                                .font(Font.custom("Avenir", size: 18))
                        }
                        .frame(height: 70)
                    }
                }
                
            }
            .navigationBarTitle("微信(\(String(self.unreadMessages)))", displayMode: .inline)
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Menu {
                        Section {
                            Button(action: {}) {
                                Label("发起群聊", systemImage: "message.fill")
                                    .labelStyle(CenteredLabelStyle())
                            }

                            Button(action: {}) {
                                Label("添加朋友", systemImage: "person.fill.badge.plus")
                                    .labelStyle(CenteredLabelStyle())
                            }
                            
                            Button(action: {}) {
                                Label("扫一扫", systemImage: "qrcode.viewfinder")
                                    .labelStyle(CenteredLabelStyle())
                            }
                            
                            Button(action: {}) {
                                Label("收付款", systemImage: "checkmark.shield")
                                    .labelStyle(CenteredLabelStyle())
                            }
                        }
                    }
                    label: {
                        Label("", systemImage: "plus.circle")
                            .font(.title3)
                    }
                }
            }
        }
    }
}

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

Chat.wift

//
//  Chat.swif.swift
//  Chatapp
//
//  Created by 胡家睿 on 2021/4/7.
//

import SwiftUI

struct Chat: View {
    let name: String
    @State var sendText: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                Button(action: {}) {
                    Image(systemName: "wave.3.right.circle")
                        .foregroundColor(.black)
                        .font(.title)
                }
                .offset(x: -175, y: 415)
                
                TextField("", text: $sendText)
                    .padding(7)
                    .background(Color(.systemGray6))
                    .cornerRadius(8)
                    .frame(width: 275)
                    .offset(x: -15, y: 375)
                
                Button(action: {}) {
                    Image(systemName: "face.smiling")
                        .foregroundColor(.black)
                        .font(.title)
                }
                .offset(x: 145, y: 330)
                
                Button(action: {}) {
                    Image(systemName: "plus.circle")
                        .foregroundColor(.black)
                        .font(.title)
                }
                .offset(x: 185, y: 300)
                
            }
            .navigationBarTitle(name, displayMode: .inline)
        }
    }
}

struct Chat_Previews: PreviewProvider {
    static var previews: some View {
        Chat(name: "Unknown")
    }
}

有什么建议吗？

注：我还在学习swiftui

Answer 1

删除 Chat 中的 NavigationView -- 只有父视图应该有 NavigationView -- 否则导航栏嵌套会出现问题正在经历。

SwiftUI 结合 NavigationBarBackButton 和标题

SwiftUI Combining NavigationBarBackButton and title

navigationbar

ios

swift

swiftui