导航顶栏项目放置得很高

Question

我有一个通过 NavigationLink 打开的 SwiftUI 视图

struct UserSettingsView: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack {
            
            Color("navbar_2280DA").ignoresSafeArea(.all)
            
            Image("profile_background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea(.all)
        }
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                VStack {
                    Spacer()
                    
                    HStack {
                        Button {
                            presentationMode.wrappedValue.dismiss()
                        } label: {
                            Image("btn_arrow_back")
                        }
                        
                        Spacer()
                    }
                }
            }
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Settings")
                    .font(.custom("Poppins-Medium", size: 22))
                    .kerning(1.76)
            }
        }
        .toolbarBackground(Color("navbar_2280DA"), for: .navigationBar)
        .toolbarBackground(.visible, for: .navigationBar)
    }
}

视图显示正常，除了一件事，工具栏项目出现在导航栏上非常高

如您所见，我尝试使用 VStack 将后退按钮拉下，在屏幕截图中您几乎看不到结果 - 后退按钮比导航标题稍低一点。我希望对其有更多的控制，例如在栏的底部应用带有约束的填充。

我不想创建自定义导航栏 - 这是麻烦且不愉快的体验，我想使用 iOS 为导航栏提供的默认 UI。

请告知如何将工具栏项目移动到 SwiftUI 中导航栏的底部。谢谢！

Answer 1

我使用 SF 符号“chevron.left”尝试了您的代码，并且能够重现该问题。但是，当我删除后退按钮周围的

VStack

、

HStack

和

Spacer

后，箭头就与标题很好地居中对齐了。我还尝试了不同的字体大小，它保持居中对齐。

那么问题可能是您的图像在顶部或底部包含一些空白，这意味着它没有垂直居中？或者也许对

Image

应用一些修饰符会有所帮助，如下面的代码所示。

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button {
            presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "chevron.left") //  "btn_arrow_back"
                .resizable()
                .scaledToFit()
                .padding(10)
                .frame(width: 44, height: 44)
                .foregroundColor(.white)
        }
    }
}
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Settings")
            .font(.custom("Poppins-Medium", size: 22))
            .kerning(1.76)
    }
}

---

编辑跟进您的评论：要将项目向下移动，只需添加顶部填充：

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button {
            presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "chevron.left") //  "btn_arrow_back"
                .resizable()
                .scaledToFit()
                .padding(10)
                .frame(width: 44, height: 44)
                .foregroundColor(.white)
                .padding(.top, 50) // <- HERE
        }
    }
}
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Settings")
            .font(.custom("Poppins-Medium", size: 22))
            .kerning(1.76)
            .padding(.top, 50) // <- HERE
    }
}