Как я могу создать собственный вид, который отображает только сетку линий?

Question

Я создаю тестовое приложение, чтобы увидеть, каково это использовать SwiftUI, и я хочу, чтобы у моего тестового приложения был собственный вид, представляющий собой сетку из перпендикулярных линий, с интервалом, указанным в качестве переменных состояния.

Однако я не могу понять, как это сделать в системе пользовательского интерфейса, которая, кажется, не имеет пользовательских методов рисования.

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 нет встроенного вида линии, и я не могу на всю жизнь выяснить, какова ширина представления (возможно, потому что это не является частью View в SwiftUI?)

Answer 1

Вы можете сделать собственный рисунок с помощью 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()
        }
    }
}

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

upd: если вам нужна сетка с ячейкой фиксированного размера, вы можете использовать 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))
                }
            }
        }
    }