SwiftUI - 使用 SwiftUI 创建一条虚线

Question

我需要创建一条虚线。我尝试通过创建一个带有虚线笔划的矩形视图来解决这个问题。但是，当将矩形的高度设置为 1 时，会导致双线同时显示视图的顶部和底部边框。

这是代码：

Rectangle()
    .fill(Color.clear)
    .frame(height: 1, alignment: .bottom)
    .overlay(
        RoundedRectangle(cornerRadius: 0)
            .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
            .foregroundColor(Color(UIColor.blue))
    )

Answer 1

更改虚线值以增加或减少线条中的虚线数量。

struct ContentView: View {
     var body: some View {
         Line()
           .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
           .frame(height: 1)
    }
}

struct Line: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: rect.width, y: 0))
        return path
    }
}

结果：

Answer 2

根据您想要做什么，您可以执行以下操作：

VStack {
    Path{ path in
        path.move(to: CGPoint(x: 20, y: 300))
        path.addLine(to: CGPoint(x: 200, y: 300))
    }
    .stroke(style: StrokeStyle( lineWidth: 10, dash: [5]))
    .foregroundColor(Color(UIColor.blue))
}

你会得到这样的东西：

Answer 3

改进了@kazi.munshimun 解决方案。垂直线和水平线：

struct VLine: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        }
    }
}

struct HLine: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: rect.minX, y: rect.midY))
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
        }
    }
}

用法：

VLine().stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
HLine().stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))

Answer 4

这是使用更简单的选项添加和绘制线条的终极方法：

struct CustomLineShapeWithAlignment: Shape {
    
    let stratPoint: Alignment
    let endPoint: Alignment
    
    init(stratPoint: Alignment, endPoint: Alignment) {
        self.stratPoint = stratPoint
        self.endPoint = endPoint
    }
    
    private func cgPointTranslator(alignment: Alignment, rect: CGRect) -> CGPoint {
        
        switch alignment {
        case .topLeading: return CGPoint(x: rect.minX, y: rect.minY)
        case .top: return CGPoint(x: rect.midX, y: rect.minY)
        case .topTrailing: return CGPoint(x: rect.maxX, y: rect.minY)
            
        case .leading: return CGPoint(x: rect.minX, y: rect.midY)
        case .center: return CGPoint(x: rect.midX, y: rect.midY)
        case .trailing: return CGPoint(x: rect.maxX, y: rect.midY)
            
        case .bottomLeading: return CGPoint(x: rect.minX, y: rect.maxY)
        case .bottom: return CGPoint(x: rect.midX, y: rect.maxY)
        case .bottomTrailing: return CGPoint(x: rect.maxX, y: rect.maxY)
        default: return CGPoint(x: rect.minX, y: rect.minY)
        }
        
    }

    func path(in rect: CGRect) -> Path {
        
        Path { path in
            
            path.move(to: cgPointTranslator(alignment: stratPoint, rect: rect))
            path.addLine(to: cgPointTranslator(alignment: endPoint, rect: rect))
            
        }
        
    }
    
}

用例：

struct ContentView: View {
    var body: some View {
        
        CustomLineShapeWithAlignment(stratPoint: .top, endPoint: .bottom)
            .stroke(style: StrokeStyle(lineWidth: 1.0, dash: [5]))
            .background(Color.red)
        
        ZStack {
            
            CustomLineShapeWithAlignment(stratPoint: .top, endPoint: .bottom)
                .stroke(style: StrokeStyle(lineWidth: 1.0, dash: [5]))
                .frame(width: 1.0)
            
            CustomLineShapeWithAlignment(stratPoint: .leading, endPoint: .trailing)
                .stroke(style: StrokeStyle(lineWidth: 1.0, dash: [5]))
                .frame(height: 1.0)
            
        }
        .background(Color.gray)
        
        CustomLineShapeWithAlignment(stratPoint: .topLeading, endPoint: .bottomTrailing)
            .stroke(style: StrokeStyle(lineWidth: 1.0, dash: [5]))
            .background(Color.blue)
        
    }
}

结果：