如何有一个ScrollView行占用全屏高度上的点击手势?

Question

我试图有内容的ScrollView，当点击一行，我想要行的高度(底部和顶部)动画采取全屏高度。我尝试了以下操作，但没有成功:

struct ContentView: View {
@State private var selectedRow: Int? = nil
var body: some View {
ScrollView {
ForEach(0..<10, id: .self) { row in
HStack {
Text("Row (row)")
}
.frame(minHeight: self.selectedRow == row ? 0 : 50, maxHeight: self.selectedRow == row ? .infinity : 50)
.animation(.easeInOut(duration: 1))
.onTapGesture {
self.selectedRow = row
}
}
}
}
}

这个不像我希望的那样工作，也不占全屏高度。

这是错误的方法吗?让它导航到一个新视图，并让它在新视图中动画是不是更好?

Answer 1

滚动视图总是尝试用最小的高度来调整内容的大小(在垂直滚动视图的情况下)。如果他们使用最大尺寸，并且它是.infinite，那么它们将是无限长的。

相反，您应该使用GeometryReader来获取包含滚动视图的视图的大小，并使用滚动视图大小的显式高度。

import SwiftUI
struct ContentView: View {
@State private var selectedRow: Int? = nil

var body: some View {
GeometryReader { reader in
ScrollView {
ForEach(0..<10, id: .self) { row in
HStack {
Text("Row (row)")
}
.frame(height: selectedRow == row ? reader.size.height : 50)
.animation(.easeInOut(duration: 1))
.onTapGesture {
self.selectedRow = row
}
}
}
}
}
}