SwiftUI - Добавить границу к одному краю изображения

Question

Это довольно простой вопрос - как применить эффект границы только к требуемым краям изображения с помощью SwiftUI?

Например, я хочу только применить границы к верху и низукрая изображения, потому что изображение занимает всю ширину экрана.

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

Любая помощь приветствуется!

Answer 1

Используя эту пользовательскую структуру:

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
}