如何在SwiftUI中为含文本和图片的VStack添加左侧黑色边框？

要给包含Text和Image的VStack添加1px黑色左侧边框（对应CSS的border-left: 1px solid black效果），SwiftUI里有两种常用实现方式：

方法一：使用border修饰符（推荐） #

直接给目标VStack添加border修饰符，指定边缘为.leading、宽度和颜色。如果要严格对应物理1px（适配不同屏幕密度），可以用屏幕缩放比例计算宽度：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading) {
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Speed")
                }.padding(.bottom, 10)
                
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Distance")
                }
                Spacer()
            }
            // 添加左侧边框
            .border(.black, width: 1 / UIScreen.main.scale, edges: .leading)
            Spacer()
        }
    }
}

• edges: .leading：仅在左侧显示边框
• 1 / UIScreen.main.scale：确保在Retina等高密度屏幕上显示为物理1px，若不需要严格适配，直接写1即可（对应逻辑pt）

方法二：使用overlay自定义边框 #

如果需要更灵活的边框样式（比如调整边框与内容的间距），可以用overlay添加一条垂直线：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading) {
                // 原有内容保持不变
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Speed")
                }.padding(.bottom, 10)
                
                HStack {
                    Image(systemName: "star.fill")
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                    Text("Distance")
                }
                Spacer()
            }
            .overlay(
                // 自定义左侧边框线
                Rectangle()
                    .fill(.black)
                    .frame(width: 1 / UIScreen.main.scale)
                    .alignmentGuide(.leading) { $0[.leading] }
                // 若要给边框加内边距，可添加.padding(.trailing, 8)
            )
            Spacer()
        }
    }
}

这种方式可以通过添加padding来调整边框和VStack内容的距离，适合需要精细控制布局的场景。

内容的提问来源于stack exchange，提问作者peter flanagan