🖼️ GeometryReader

⭐️ 重點

用法：

GeometryReader { geometry in
    // geometry.size：size of the paraent
    // geometry.frame(in: .global)：bounds of the parent
}

• A GeometryReader is configured with a ViewBuilder (just like any other container view), but unlike other containers, the view builder for a geometry reader receives a parameter: the GeometryProxy.

• The proxy has a property for the view’s proposed layout size and a subscript to resolve anchors.

• GeometryReader reports its proposed size back as the actual size. Because of this sizing behavior, geometry readers are often especially useful when used as the background or overlay of another view: they become the exact size of the view. We can use this size either to draw something in the bounds of the view or to measure the size of the view. 👉 Thinking in SwiftUI, p.89, Ch.5, Custom Layout - GeometryReader

📘 手冊

• SwiftUI ⟩

  • GeometryReader

  • GeometryProxy

  • CoordinateSpace

• CoreGraphics ⟩ CGRect

• ScrollViewReader

📗 參考

• Understanding frames and coordinates inside GeometryReader

• Thinking in SwiftUI, Ch. 5, Custom Layout

• SwiftUI Lab ⟩

  • GeometryReader to the Rescue

  • Safely Updating The View State

  • second part of Inspecting the View Tree

• How to define variables inside a GeometryReader - nuomiphp

👥 相關

• often used to do custom Layout.

• used to solve the problem with .readSize().

• used by .getSize() to do something with view's size.

• 📦 GeometryProxy

• 🌀 GeometryProxy

• 🌀View + report(width: key)

• Anchor Preferences Using the subscript, you can get the size and position of any subview down the view tree.

💈 範例

• 🌅 Underline

• 🌅 CircleText

• 🌅 對齊欄位

• alignment in GeometryReader

🗣 討論

• What is Geometry Reader in SwiftUI?

• 自己提問的：(其實兩個問題是類似的，只是自己始終沒搞懂😞)

  • GeometryReader failed to update its parent's state

  • SwiftUI: view states updated in Xcode preview but not in the built app

Example

💈 範例

import SwiftUI
import PlaygroundSupport

// live view
struct ContentView: View {
    var body: some View {
        HStack {
            
            Group {
                Text("Hello World").padding()
                    .background(Color.purple)
                MyRect()
                MyRect(.blue)
            } // Group
                // dashed line
                .overlay(Rectangle().stroke(Color.black, style: .init(dash: [6])))
                .padding(2)
            
        } // HStack (container)
            .frame(400, 100)
            .border(Color.yellow)
            .padding(200)
            .background(Color.gray)
            .shadow(radius: 8)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

📦 MyRect

/*
 * ⭐️ required:
 *    - 🅿️Vector2D
 *    - 🌀GeometryProxy
 *    - 🌀CGRect
 */
 
// MyRect
struct MyRect: View {
    let color: Color
    init(_ color: Color = .red) { self.color = color }
    var body: some View {
        // ⭐️  GeometryReader
        GeometryReader { geo in
            CGRect(
                // geo[0, 1] == geo.bottomLeft
                origin: geo[0,1] + 10 * .j,       // 🅿️Vector2D, 🌀GeometryProxy
                size  : geo.size / 2
            )
                .path                             // 🌀CGRect
                .fill(self.color)
        }
    }
}

📗 參考

• GeometryReader to the Rescue - The SwiftUI Lab

👥 相關

• 🌀 CGRect