如何在 SwiftUI 中相对于下一行中的图像将第二行中的文本居中?

How to center a text in the second row with respect to an image in the row below in SwiftUI?

在下面的屏幕截图中,紫色图像未与地球符号水平对齐。我正在尝试将导航标题相对于其上方的徽标居中,我完全可以使用 VStack 做到这一点。但是我不知道如何将徽标本身与导航尾随项(屏幕截图中的地球仪)对齐。有小费吗?想法?教程?谢谢!

struct ContentView: View {
var body: some View {
    NavigationView {
        Text("Hello")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {} label: {Image(systemName: "globe")}
                }
                
                ToolbarItemGroup(placement: .principal) {
                    VStack {
                        Image("image")
                            .resizable()
                            .frame(width: 64.0, height: 24.0)
                        Text("Navigation Title")
                    }
                }
            }
    }
    .navigationBarTitleDisplayMode(.inline)
}

}

只需对前导工具栏项目执行相同操作(因为项目是独立的,并且一个对齐方式不会影响其他 - 仅影响栏的大小)

测试 Xcode 13.4 / iOS 15.5

*边框是为了更好的可见性

Text("Hello")
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            VStack(alignment: .leading) {
            Button {} label: {Image(systemName: "globe")}
                    .frame(height: 24.0)
                Text("X").foregroundColor(.clear)
                }.border(.red)
        }

        ToolbarItemGroup(placement: .principal) {
            VStack {
                Image("picture")
                    .resizable()
                    .frame(width: 64.0, height: 24.0)
                Text("Navigation Title")
            }.border(.green)
        }
    }