Question

这是一个非常简单的问题-使用SwiftUI如何仅对图像的所需边缘应用边框效果？

例如，我只想在图像的顶部和底部边缘应用边框，因为图像占据了屏幕的整个宽度。

        Image(mission.missionImageString)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .border(Color.white, width: 2) //Adds a border to all 4 edges

感谢您的帮助！

Answer 1

如果有人只需要在视图中添加快速1（或更多）侧边的边框（例如，顶部边缘或边缘的任意组合），我发现这很好并且可以调整：

顶部边缘：

  Room::Room(){ obj1->setName(a); // this line has the problem}

领先优势：

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

等

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

Answer 2

使用此自定义结构：

struct EdgeBorder: Shape {

    var width: CGFloat
    var edge: Edge

    func path(in rect: CGRect) -> Path {
        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 self.width
            }
        }

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

        return Path( CGRect(x: x, y: y, width: w, height: h) )
    }
}

并在此扩展程序的帮助下：

extension View {
    func border(width: CGFloat, edge: Edge, color: Color) -> some View {
        ZStack {
            self
            EdgeBorder(width: width, edge: edge).foregroundColor(color)
        }
    }
}

您可以像常规修饰符一样在任何View 上使用它：

var body: some View {
    Rectangle() // Could be any view
        .foregroundColor(.red)
        .border(width: 5, edge: .top, color: .yellow) // <- This is the magic
}

Answer 3

类似于@smakus，如果您不需要控制颜色或厚度，则可以执行以下操作：

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

SwiftUI-为图像的一个边缘添加边框

3 个答案: