SwiftUI の LazyVGrid、レイアウト、およびフレーム/座標空間に慣れ、それぞれが画面の幅の 1/4 である 4 つの列を持つグリッドを描画しようとしています。その上、セルをタップすると、タップされたセルの上にビューを正確に配置し、全画面表示 (または選択したカスタム フレーム) にアニメーション化します。
次のコードがあります。
struct CellInfo {
let cellId:String
let globalFrame:CGRect
}
struct TestView: View {
var columns = [
GridItem(.flexible(), spacing: 0),
GridItem(.flexible(), spacing: 0),
GridItem(.flexible(), spacing: 0),
GridItem(.flexible(), spacing: 0)
]
let items = (1...100).map { "Cell \($0)" }
@State private var cellInfo:CellInfo?
var body: some View {
GeometryReader { geoProxy in
let cellSide = CGFloat(Int(geoProxy.size.width) / columns.count)
let _ = print("cellSide: \(cellSide). cellSide * columns: \(cellSide*CGFloat(columns.count)), geoProxy.size.width: \(geoProxy.size.width)")
ZStack(alignment: .center) {
ScrollView(.vertical) {
LazyVGrid(columns: columns, alignment: .center, spacing: 0) {
ForEach(items, id: \.self) { id in
CellView(testId: id, cellInfo: $cellInfo)
.background(Color(.green))
.frame(width: cellSide, height: cellSide, alignment: .center)
}
}
}
.clipped()
.background(Color(.systemYellow))
.frame(maxWidth: geoProxy.size.width, maxHeight: geoProxy.size.height)
if cellInfo != nil {
Rectangle()
.background(Color(.white))
.frame(width:cellInfo!.globalFrame.size.width, height: cellInfo!.globalFrame.size.height)
.position(x: cellInfo!.globalFrame.origin.x, y: cellInfo!.globalFrame.origin.y)
}
}
.background(Color(.systemBlue))
.frame(maxWidth: geoProxy.size.width, maxHeight: geoProxy.size.height)
}
.background(Color(.systemRed))
.coordinateSpace(name: "testCSpace")
.statusBar(hidden: true)
}
}
struct CellView: View {
@State var testId:String
@Binding var cellInfo:CellInfo?
var body: some View {
GeometryReader { geoProxy in
ZStack {
Rectangle()
.stroke(Color(.systemRed), lineWidth: 1)
.background(Color(.systemOrange))
.frame(maxWidth: .infinity, maxHeight: .infinity)
.overlay(
Text("cell: \(testId)")
)
.onTapGesture {
let testCSpaceFrame = geoProxy.frame(in: .named("testCSpace"))
let localFrame = geoProxy.frame(in: .local)
let globalFrame = geoProxy.frame(in: .global)
print("local frame: \(localFrame), globalFrame: \(globalFrame), testCSpace: \(testCSpaceFrame)")
let info = CellInfo(cellId: testId, globalFrame: globalFrame)
print("on tap cell info: \(info)")
cellInfo = info
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.background(Color(.systemGray))
}
}
最も外側のジオメトリ プロキシは、このサイズのログを提供します。
セル側: 341.5. cellSide * 列: 1366.0、geoProxy.size.width: 1366.0
これがレンダリングされるものです:
たとえば、セル 1 をタップすると、次のように記録されます。
local frame: (0.0, 0.0, 341.0, 341.0), globalFrame: (0.25, 0.0, 341.0, 341.0), testCSpace: (0.25, 0.0, 341.0, 341.0) タップセル情報: CellInfo(cellId: "Cell 1", globalFrame: (0.25, 0.0, 341.0, 341.0))
「Cell 6」をタップすると、新しくレンダリングされた画面は次のようになります。
したがって、次のコードが与えられます。
- (白い) オーバーレイ ビューのフレームを、タップしたセルのビューのフレームと一致させるにはどうすればよいですか? 幅と高さは問題ないようですが、位置がずれています。（私は何を間違っていますか？）
- タップしたセルの真上に配置すると、白いビューをフルスクリーンでアニメーション化するにはどうすればよいですか?