> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/shapes/shape/helper-shapes/gridlinesshape.md).

# GridLinesShape

[SwiftUI](/ios/swiftui.md) ⟩ [Drawing](/ios/swiftui/shapes.md) ⟩ [Shape](/ios/swiftui/shapes/shape.md) ⟩ [Helper Shapes](/ios/swiftui/shapes/shape/helper-shapes.md) ⟩

![GridLinesShape (Shape)](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FxwW1ctm6vsxmIbpqunQf%2FGridLinesShape.png?alt=media\&token=94d46ca1-2a32-4182-a3ea-ce2f6ece9f94)

{% tabs %}
{% tab title="💜 GridLinesShape" %}
⬆️ 需要： [floating +−⨉÷ int](/ios/swift/type/category/basic/numbers/floating-point/floating-+-int.md), [path.line()](/ios/swiftui/shapes/path/path.line.md), [Frame](/ios/custom/package/geometrykit/frame.md)

````swift
// 2022.02.10

import SwiftUI

/// vertical & horizontal grid lines in a rect.
/// ```
/// GridLinesShape(rows: 3, cols: 3)
/// GridLinesShape(rows: 3) //  3x10 grids
/// GridLinesShape()        // 10x10 grids
/// ```
struct GridLinesShape: Shape {
    var rows: Int = 10
    var cols: Int = 10
    func path(in rect: CGRect) -> Path {
        Path { path in
            // horizontal lines 
            for i in 1..<rows {
                let y: CGFloat = 1.0 / rows * i    // 🌀Int+
                path.line(rect[0,y], rect[1,y])    // 🌀Path+, 🅿️ Rectangular
            }
            // vertical lines
            for i in 1..<cols {
                let x: CGFloat = 1.0 / cols * i
                path.line(rect[x,0], rect[x,1])
            }
        }
    }
}
````

{% endtab %}

{% tab title="👁️ 預覽" %}

```swift
struct GridLinesShape_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            GridLinesShape(rows: 3, cols: 5).stroke()
            GridLinesShape(rows: 3).stroke()
            GridLinesShape().stroke()
        }
        .frame(height: 150)
        .padding()
    }
}
```

{% endtab %}

{% tab title="👥 相關" %}

* used by [GridLines](/ios/swiftui/shapes/shape/helper-shapes/gridlines.md).
* is a [Shape](/ios/swiftui/shapes/shape.md).
  {% endtab %}
  {% endtabs %}