SwiftUI: Partial Border of View

EdgeLines.swift

import SwiftUI

struct EdgeLines: Shape {
    
    struct Edge: OptionSet {
        static let top = Edge(rawValue: 1 << 0)
        static let bottom = Edge(rawValue: 1 << 1)
        static let left = Edge(rawValue: 1 << 2)
        static let right = Edge(rawValue: 1 << 3)
        static let all = Edge([.top, .bottom, .left, .right])
        
        var rawValue: Int8
    }
    
    var edge: Edge = .all
    
    func path(in rect: CGRect) -> Path {
        
        var path = Path()
        if edge.contains(.top) {
            path.move(to: .init(x: rect.minX, y: rect.minY))
            path.addLine(to: .init(x: rect.maxX, y: rect.minY))
        }
        if edge.contains(.bottom) {
            path.move(to: .init(x: rect.minX, y: rect.maxY))
            path.addLine(to: .init(x: rect.maxX, y: rect.maxY))
        }
        if edge.contains(.left) {
            path.move(to: .init(x: rect.minX, y: rect.minY))
            path.addLine(to: .init(x: rect.minX, y: rect.maxY))
        }
        if edge.contains(.right) {
            path.move(to: .init(x: rect.maxX, y: rect.minY))
            path.addLine(to: .init(x: rect.maxX, y: rect.maxY))
        }
        
        return path
    }
    
}

extension View {
    
    /// 指定した箇所に部分的にボーダーを適応してビューを返す
    ///
    /// - Parameters:
    ///   - edge: ボーダーの表示箇所.
    ///   - lineWidth: ボーダー線の太さ. デフォルト値は`1.0`
    ///   - color: ボーダーの色. デフォルト値は`.primary`
    func particalBorder(edge: EdgeLines.Edge, lineWidth: CGFloat = 1.0, color: Color = .primary) -> some View {
        self.background(EdgeLines(edge: edge).stroke(lineWidth: lineWidth).foregroundStyle(color))
    }
    
}

#Preview {
    
    LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 5)) {
        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top], color: .red)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.bottom], color: .blue)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.left], color: .yellow)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.right], color: .white)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top, .left], color: .red)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top, .bottom], color: .blue)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top, .right], color: .yellow)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.bottom, .left], color: .white)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.bottom, .right], color: .red)
        
        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.left, .right], color: .blue)
        
        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top, .bottom, .left], color: .yellow)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top, .bottom, .right], color: .white)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.top, .left, .right], color: .red)

        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: [.bottom, .left, .right], color: .blue)
        
        Text("Hi!")
            .frame(width: 50, height: 50)
            .particalBorder(edge: .all, color: .red)
    }
    
}

Preview Result