Question

我正在制作一个测试应用程序，以了解使用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中没有内置线视图，而且我一生都无法找到视图的宽度（可能是因为它不是SwiftUI中View的一部分？）

Answer 1

您可以使用react-native eject（Path Documentation，Tutorial）和SwiftUI进行自定义绘制

要绘制网格，可以使用如下所示的内容：

Path

Answer 2

您可以通过组合垫片和分隔线来实现

   var body: some View {
           ZStack {
               HStack {
                   Spacer()
                   Rectangle().frame(width: 1)
                   Spacer()
                   Divider()
                   Spacer()
               }
               VStack {
                   Spacer()
                   Divider()
                   Spacer()
                   Divider()
                   Spacer()
               }
           }
       }

您还可以使用Rectangle（）代替Divider（）并查看 https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes

更新：：如果您需要一个具有固定大小的单元格的网格，则可以使用GeometryReader计算行数，并相应地组织ForEach

    var cellSize: CGFloat = 48
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                HStack {
                    ForEach(0..<Int(geometry.size.width / self.cellSize)) { _ in
                        Spacer()
                        Divider()
                    }
                    Spacer().frame(width: geometry.size.width.truncatingRemainder(dividingBy: self.cellSize))
                }
                VStack {
                    ForEach(0..<Int(geometry.size.height / self.cellSize)) { _ in
                        Spacer()
                        Divider()
                    }
                    Spacer().frame(width: geometry.size.height.truncatingRemainder(dividingBy: self.cellSize))
                }
            }
        }
    }

Answer 3

这可以通过ZStack来实现，该ZStack允许您将其内部的视图彼此呈现。

     ZStack {
        HStack(spacing: horizontalSpacing) {
            ForEach(0 ..< Int(numberOfVerticalGridLines)) { _ in
                Rectangle().fill(Color.gray).frame(width: 1)
            }
        }
        VStack(spacing: verticalSpacing) {
            ForEach(0 ..< Int(numberOfHorizontalGridLines)) { _ in
                Rectangle().fill(Color.gray).frame(height: 1)
            }
        }
    }

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

3 个答案: