我可以在SwiftUI 中布局后獲得`View` 的位置嗎？

Question

有沒有辦法在布局后獲得View的框架？ 我想在布局定位后繪制一條連接兩個視圖的線：

看來我需要在 React 中進行measure東西。

Answer 1

使用GeometryReader獲取每個視圖的框架，並使用框架確定兩個視圖之間路徑的點。

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry -> Text in
            let frame = geometry.frame(in: CoordinateSpace.local)
            return Text("\(frame.origin.x), \(frame.origin.y), \(frame.size.width), \(frame.size.height)")
        }
    }
}

Answer 2

為了導出“渲染時”視圖坐標，我為 x,y 坐標創建了一組數組，並將它們保存在 Model 對象中。 但是，我不必將它們封裝在@Published var 中，而是將它們保留為“var”，否則您將進入更新坐標然后重新渲染視圖的無限循環。

使用 Apple 的“里程碑”教程，模型對象修改如下：

import SwiftUI
import Combine

final class UserData: ObservableObject {
  @Published var showFavoritesOnly = false
  @Published var landmarks = landmarkData
 var circleImageX = Array(repeating: 0.0, count:20)
 var circleImageY = Array(repeating: 0.0, count:20)

}

然后，每次使用以下代碼渲染 CircleImage.swift 時寫入這些數組，同樣來自“landmark.swift”教程，保存幀中點。

import SwiftUI

struct CircleImage: View {
  @EnvironmentObject var userData: UserData
  var landmark: Landmark

  var landmarkIndex: Int {
    userData.landmarks.firstIndex(where: {$0.id == landmark.id})!
  }
  var body: some View {

    ZStack {
      landmark.image
        .clipShape(Circle())
        .overlay(Circle().stroke(Color.white, lineWidth: 4))
        .shadow(radius: 10)
      VStack {

        GeometryReader { geometry -> Text in
          let frame = geometry.frame(in: CoordinateSpace.global)
          self.userData.circleImageX[self.landmarkIndex] = Double(frame.midX)
          return
            Text("\(frame.midX)")
              .foregroundColor(.red)
              .bold()
              .font(.title)
        }
        .offset(x: 0.0, y: 50.0)
        GeometryReader { geometry -> Text in
          let frame = geometry.frame(in: CoordinateSpace.global)
          self.userData.circleImageY[self.landmarkIndex] = Double(frame.midY)
          return
            Text("\(frame.midY)")
              .foregroundColor(.red)
              .bold()
              .font(.title)
        }
        .offset(x: 0.0, y: -50.0)
      }
    }
  }
}`

這不僅保存了渲染的坐標，而且還按照 Jake 的建議將它們渲染為覆蓋圖像的文本視圖。 當然，一旦您對坐標正確感到滿意，您就可以刪除文本疊加視圖。 希望這可以幫助