时间戳

首页 > 解决方案 > 如何创建仅显示线条网格的自定义视图？

swiftui - 如何创建仅显示线条网格的自定义视图？

问题描述

我正在制作一个测试应用程序来看看使用 SwiftUI 是什么感觉，我希望我的测试应用程序有一个自定义视图，它是一个垂直线网格，间距指定为状态变量。

但是，我无法弄清楚如何在似乎没有自定义绘图方法的 UI 系统中执行此操作。

import SwiftUI



struct GridBackgroundView : View {

    @State var horizontalSpacing: CGFloat = 48
    @State var verticalSpacing: CGFloat = 48
    @State var anchor: Anchor<CGPoint>.Source = .center


    var numberOfHorizontalGridLines: UInt {
        return // Something?
    }

    var numberOfVerticalGridLines: UInt {
        return // Something?
    }


    var body: some View {
        Group {
            ForEach(0 ... numberOfHorizontalGridLines) { _ in
                // Something?
            }
            ForEach(0 ... numberOfVerticalGridLines) { _ in
                // Something?
            }
        }
    }
}

#if DEBUG
struct GridView_Previews : PreviewProvider {
    static var previews: some View {
        GridBackgroundView()
    }
}
#endif

我不知道在这些// Something?区域放什么。SwiftUI 中没有内置线视图，我一生都无法找出视图的宽度（可能是因为这不是ViewSwiftUI 中的 a 的一部分？）

标签： swiftui

解决方案

您可以SwiftUI使用Path（路径文档，教程）进行自定义绘图

要绘制网格，您可以使用以下内容：

struct ContentView : View {
    var horizontalSpacing: CGFloat = 48
    var verticalSpacing: CGFloat = 48

    var body: some View {
        GeometryReader { geometry in
            Path { path in
                let numberOfHorizontalGridLines = Int(geometry.size.height / self.verticalSpacing)
                let numberOfVerticalGridLines = Int(geometry.size.width / self.horizontalSpacing)
                for index in 0...numberOfVerticalGridLines {
                    let vOffset: CGFloat = CGFloat(index) * self.horizontalSpacing
                    path.move(to: CGPoint(x: vOffset, y: 0))
                    path.addLine(to: CGPoint(x: vOffset, y: geometry.size.height))
                }
                for index in 0...numberOfHorizontalGridLines {
                    let hOffset: CGFloat = CGFloat(index) * self.verticalSpacing
                    path.move(to: CGPoint(x: 0, y: hOffset))
                    path.addLine(to: CGPoint(x: geometry.size.width, y: hOffset))
                }
            }
            .stroke()
        }
    }
}

推荐阅读