Question

我试图弄清楚如何使导航栏图像位于每个设备的中央。当前它们都离中心有点远，当我尝试使用垫片时，它将固定一个设备，但扔掉其他所有设备。

NavigationLink(destination: TableView(), isActive: self.$toTable) {
                    EmptyView()
                }
                .navigationBarItems(leading:
                    VStack {
                        HStack {
                            ZStack {
                                Image(uiImage: #imageLiteral(resourceName: "Rectangle 548"))
                                Image(uiImage: #imageLiteral(resourceName: "user_1")).renderingMode(.original).offset(x:-35)
                                Text("Jake").font(.custom("Poppins-Light", size:16)).foregroundColor(Color(red: 0.79, green: 0.9, blue: 1.0, opacity: 1.0))
                            }
                            ZStack {
                                Image(uiImage: #imageLiteral(resourceName: "Rectangle 548"))
                                Image(uiImage: #imageLiteral(resourceName: "money 1")).renderingMode(.original).offset(x:-35)
                                Text("175.84").font(.custom("Poppins-Light", size:16)).foregroundColor(Color(red: 0.79, green: 0.9, blue: 1.0, opacity: 1.0)).offset(x:5)
                            }
                            ZStack {
                                Image(uiImage: #imageLiteral(resourceName: "Rectangle 548"))
                                Image(uiImage: #imageLiteral(resourceName: "poker-chip 1")).renderingMode(.original).offset(x:-35)
                                Text("1").font(.custom("Poppins-Light", size:16)).foregroundColor(Color(red: 0.79, green: 0.9, blue: 1.0, opacity: 1.0))
                            }
                        }
                        
                })

The top three bars is where I am having my issues centering

Answer 1

在两端添加Spacer。方法如下：

HStack {
    Spacer()
    ZStack {
        Image(uiImage: #imageLiteral(resourceName: "Rectangle 548"))
        Image(uiImage: #imageLiteral(resourceName: "user_1")).renderingMode(.original).offset(x:-35)
        Text("Jake").font(.custom("Poppins-Light", size:16)).foregroundColor(Color(red: 0.79, green: 0.9, blue: 1.0, opacity: 1.0))
    }
    ZStack {
        Image(uiImage: #imageLiteral(resourceName: "Rectangle 548"))
        Image(uiImage: #imageLiteral(resourceName: "money 1")).renderingMode(.original).offset(x:-35)
        Text("175.84").font(.custom("Poppins-Light", size:16)).foregroundColor(Color(red: 0.79, green: 0.9, blue: 1.0, opacity: 1.0)).offset(x:5)
    }
    ZStack {
        Image(uiImage: #imageLiteral(resourceName: "Rectangle 548"))
        Image(uiImage: #imageLiteral(resourceName: "poker-chip 1")).renderingMode(.original).offset(x:-35)
        Text("1").font(.custom("Poppins-Light", size:16)).foregroundColor(Color(red: 0.79, green: 0.9, blue: 1.0, opacity: 1.0))
    }
    Spacer()
}

如何在导航栏中将图像居中（SwiftUI）

1 个答案: