swiftui - 当按钮文本也有图像时如何居中？

Question

在下面的代码中，我试图生成一个布局，使按钮文本居中，同时在右侧有一个图像。目前，文本偏移了图像的宽度而不是居中(我在标签中添加了一个 . 以便您可以看到它没有居中。我希望 . 位于按钮文本中的 B 之上)。

struct ContentView: View {
    var body: some View {
        VStack {
            Text(".") // Center point
            Button(action: {}, label: {
                HStack {
                    Spacer()
                    Text("ABC")
                    Spacer()
                    Image(systemName: "person.circle.fill")
                }
            })
        }
    }
}

Answer 1

一种可能的方法是使用覆盖 - 默认情况下文本位于中心，但图像可以放在需要的地方。

注意:当然，如果您的文本是动态的并且可能很长，则需要一些更复杂的解决方案，但预期可能会有所不同

所以，对于你的快照

Button(action: {}, label: {
      Text("ABC")
        .frame(maxWidth: .infinity)
        .overlay(Image(systemName: "person.circle.fill").padding(),
            alignment: .trailing)
})