演示

实施

您可以在 * 任何 * View上使用此修饰符：

.border(width: 5, edges: [.top, .leading], color: .yellow)

在这个简单扩展的帮助下：

extension View {
    func border(width: CGFloat, edges: [Edge], color: Color) -> some View {
        overlay(EdgeBorder(width: width, edges: edges).foregroundColor(color))
    }
}

这是它背后的神奇结构体：

struct EdgeBorder: Shape {
    var width: CGFloat
    var edges: [Edge]

    func path(in rect: CGRect) -> Path {
        var path = Path()
        for edge in edges {
            var x: CGFloat {
                switch edge {
                case .top, .bottom, .leading: return rect.minX
                case .trailing: return rect.maxX - width
                }
            }

            var y: CGFloat {
                switch edge {
                case .top, .leading, .trailing: return rect.minY
                case .bottom: return rect.maxY - width
                }
            }

            var w: CGFloat {
                switch edge {
                case .top, .bottom: return rect.width
                case .leading, .trailing: return width
                }
            }

            var h: CGFloat {
                switch edge {
                case .top, .bottom: return width
                case .leading, .trailing: return rect.height
                }
            }
            path.addRect(CGRect(x: x, y: y, width: w, height: h))
        }
        return path
    }
}

如果有人需要在视图中添加一个快速的单边（或多边）边框（例如，顶部边缘，或任何随机的边缘组合），我发现这个方法效果很好，而且可以调整：
上边缘：

.overlay(Rectangle().frame(width: nil, height: 1, alignment: .top).foregroundColor(Color.gray), alignment: .top)

前缘：

.overlay(Rectangle().frame(width: 1, height: nil, alignment: .leading).foregroundColor(Color.gray), alignment: .leading)

等等。
只需调整高度、宽度和边缘即可生成所需的边框组合。

如果不需要控制厚度，可以执行以下操作：

.overlay(Divider(), alignment: .top)
.overlay(Divider(), alignment: .bottom)

使用以下命令设置分隔线的颜色：

.overlay(Divider().background(.red), alignment: .left)

我发现最优雅的解决方案是创建一个自定义形状并将其添加为覆盖层。它与SwiftUI图像配合得很好。

struct BottomBorder: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        
        return path
    }
}

struct ContentView: View {
    var body: some View {
        Image("image")
            .overlay(BottomBorder().stroke(Color.red, lineWidth: 8))
    }
}

添加上边框（即分隔线）：

.overlay( Divider()
           .frame(maxWidth: .infinity, maxHeight:1)
           .background(Color.green), alignment: .top)

示例用法：

Image("YouImageName")
      .resizable()
      .scaledToFit()
      .frame(height: 40)
      .padding(.top, 6) // padding above you Image, before your border
      .overlay( Divider()
          .frame(maxWidth: .infinity, maxHeight:1)
              .background(Color.green), alignment: .top) // End Overlay
      .padding(.top, 0) // padding above border

说明：

对于水平边框（又称分隔线），边框宽度是边框的长度，高度是边框的厚度。对于垂直边框，边框宽度是边框的厚度，边框高度是边框的长度。
.background将设置边框的颜色。
将设置边框绘制位置的对齐方式。例如，“对齐方式：.bottom”将边框放置在图像底部，“alignment：.top”位于图像顶部。
“.leading & .trailing”将相应地在图像的左侧和右侧绘制边框。
对于垂直边框：

.overlay( Divider()
     .frame(maxWidth: 1, maxHeight: .infinity)
     .background(Color.green), alignment: .leading )

一个非常简单的方法来完成这个

VStack(spacing: 0) {
  ViewThatNeedsABorder()

  Divider() // or use rectangle
}

你也可以用矩形来替换分隔符，得到同样的效果。2根据需要使用边框或背景等来设置分隔符或矩形的样式。
如果您需要左/右边框，请使用HStack而不是VStack，甚至可以合并HStack和VStack以获得多个边的边框，即：左边和上边。