如何在SwiftUI的VStack中实现类似List的Label图片等间距布局？

默认情况下，VStack内的Label会根据图标自身尺寸调整宽度，导致图标无法像List里那样对齐。要实现一致的等间距效果，你可以通过以下方式实现：

方法一：自定义LabelStyle（推荐） #

创建一个固定图标宽度的LabelStyle，统一应用到所有Label上，模拟List的图标布局逻辑：

struct ListAlignedLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .center, spacing: 16) {
            // 设置与List中图标一致的固定宽度（通常为24pt）
            configuration.icon
                .frame(width: 24)
            configuration.title
        }
    }
}

// 在ContentView中使用
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Label("Hello, world!", systemImage: "globe")
            Label("Hello, world!", systemImage: "bubble.left.and.bubble.right.fill")
            Label("Hello, world!", systemImage: "bubble.right")
        }
        .labelStyle(ListAlignedLabelStyle())
        .padding()
    }
}

方法二：手动组合HStack布局 #

如果不想自定义Style，也可以直接用HStack手动构建Label结构，强制控制图标宽度：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack(spacing: 16) {
                Image(systemName: "globe")
                    .frame(width: 24)
                Text("Hello, world!")
            }
            HStack(spacing: 16) {
                Image(systemName: "bubble.left.and.bubble.right.fill")
                    .frame(width: 24)
                Text("Hello, world!")
            }
            HStack(spacing: 16) {
                Image(systemName: "bubble.right")
                    .frame(width: 24)
                Text("Hello, world!")
            }
        }
        .padding()
    }
}

说明 #

List中的Label默认采用DefaultListLabelStyle，该Style会为图标分配固定宽度和统一间距。上述两种方法都是通过固定图标宽度、统一间距的方式，实现和List完全一致的对齐效果。

内容的提问来源于stack exchange，提问作者Berry Blue