组合导航栏后退按钮和标题的SwiftUI

Question

我正在尝试复制微信进行练习，我有一个可点击的聊天列表，它将带我进入NavigationLink的下一个视图。但新视图的标题与导航栏的"后退"按钮不对齐。签出这些图像。

图像1图像2

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

1. 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({ "($0)".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()
}
}

2. 聊天

//
//  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——否则导航栏嵌套会出现问题，就像您遇到的那样。