SwiftUI - 使用 SwiftUI 创建一条虚线答案

【问题标题】：SwiftUI - create a single dashed line with SwiftUISwiftUI - 使用 SwiftUI 创建一条虚线
【发布时间】：2020-02-19 22:10:31
【问题描述】：

我需要创建一条虚线。我试着用虚线创建一个矩形视图。但是，当将矩形的高度设置为 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))
    )

【问题讨论】：

标签： ios swift xcode swiftui

【解决方案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
    }
}

结果：

【讨论】：

是的，更简洁的解决方案，因为我们使用 rect 来获取动态尺寸。然而只是一件小事......而不是DashedLine，它应该被简单地称为Line：P
感谢您的解决方案:)
如何使这个垂直？
@staticVoidMan 它应该被称为HLine：P
@Nikaaner :D 是的！ HLine

【解决方案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))
}

你会得到这样的东西：

【讨论】：

通过这个方案，线条的坐标是固定的，所以当线条实际放置在app UI中时，线条会根据屏幕大小在不同的地方。如果没有硬编码坐标，我们怎么能做到这一点？我需要将其放置在其他两个视图之间（在 HStack 中）并居中。
@Tdg10e 它们对于给定的视图是固定的。您可以使用该代码并围绕该行移动，就像使用填充、偏移、Spacer 等移动其他任何内容（Text()、Image()）一样。
是否可以倾斜破折号？

【解决方案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]))

【讨论】：

【解决方案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)
        
    }
}

结果：

【讨论】：