VStack SwiftUI 中的动态内容高度
Dynamic content hight in VStack SwiftUI
如果我在 ScrollView 中没有很多对象,为什么我不能动态更改 VStack 中的内容?令人惊讶的是,如果有很多对象,那么一切都会变得很漂亮,但是如果很少,那么滚动只会向下滚动(因此,尝试向上滚动时可能会出现故障)
我的代码:
import Introspect
struct SwiftUIView: View {
@StateObject var myCoord = MyCoord()
var body: some View {
VStack {
Color.red
.frame(height: myCoord.height)
ScrollView {
ForEach(0..<20) { _ in
Color.green
.frame(height: 20)
}
.background(Color.red)
}
.introspectScrollView { scroll in
scroll.delegate = myCoord
}
}
}
}
class MyCoord: NSObject, UIScrollViewDelegate, ObservableObject {
let maxSize: CGFloat = 76
let minSize: CGFloat = 56
@Published var height: CGFloat = 76
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let size = maxSize - scrollView.contentOffset.y
height = min(maxSize, max(minSize, size))
}
}
滚动视图
解决了在 ZStack 中放置所有视图并在滚动视图中添加一些假视图的问题。
1 个视图负责滚动不能掉落的大小。
2 view负责header最大和最小尺寸之间的尺寸
这是一个例子
import Introspect
struct ContentView: View {
@StateObject private var myCoord = MyCoord()
var body: some View {
let sizeOfPlaceholder = myCoord.maxSize - myCoord.minSize
ZStack(alignment: .top) {
VStack(spacing: 0) {
Color.black
.frame(height: myCoord.minSize)
ScrollView {
Color.brown
.frame(height:sizeOfPlaceholder)
ForEach(0..<20) { number in
Text("\(number)")
.background(Color.red)
.frame(height: 20)
}
}
.padding(.vertical, 1)
.introspectScrollView { scroll in
scroll.delegate = myCoord
}
}
Color.green
.frame(height: myCoord.height)
}
}
}
class MyCoord: NSObject, UIScrollViewDelegate, ObservableObject {
let maxSize: CGFloat = 76
let minSize: CGFloat = 56
@Published var height: CGFloat = 76
func scrollViewDidScroll(_ scrollView: UIScrollView) {
print(scrollView.contentOffset.y)
let size = maxSize - scrollView.contentOffset.y
height = min(maxSize, max(minSize, size))
}
}
如果我在 ScrollView 中没有很多对象,为什么我不能动态更改 VStack 中的内容?令人惊讶的是,如果有很多对象,那么一切都会变得很漂亮,但是如果很少,那么滚动只会向下滚动(因此,尝试向上滚动时可能会出现故障)
我的代码:
import Introspect
struct SwiftUIView: View {
@StateObject var myCoord = MyCoord()
var body: some View {
VStack {
Color.red
.frame(height: myCoord.height)
ScrollView {
ForEach(0..<20) { _ in
Color.green
.frame(height: 20)
}
.background(Color.red)
}
.introspectScrollView { scroll in
scroll.delegate = myCoord
}
}
}
}
class MyCoord: NSObject, UIScrollViewDelegate, ObservableObject {
let maxSize: CGFloat = 76
let minSize: CGFloat = 56
@Published var height: CGFloat = 76
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let size = maxSize - scrollView.contentOffset.y
height = min(maxSize, max(minSize, size))
}
}
滚动视图
解决了在 ZStack 中放置所有视图并在滚动视图中添加一些假视图的问题。 1 个视图负责滚动不能掉落的大小。 2 view负责header最大和最小尺寸之间的尺寸 这是一个例子
import Introspect
struct ContentView: View {
@StateObject private var myCoord = MyCoord()
var body: some View {
let sizeOfPlaceholder = myCoord.maxSize - myCoord.minSize
ZStack(alignment: .top) {
VStack(spacing: 0) {
Color.black
.frame(height: myCoord.minSize)
ScrollView {
Color.brown
.frame(height:sizeOfPlaceholder)
ForEach(0..<20) { number in
Text("\(number)")
.background(Color.red)
.frame(height: 20)
}
}
.padding(.vertical, 1)
.introspectScrollView { scroll in
scroll.delegate = myCoord
}
}
Color.green
.frame(height: myCoord.height)
}
}
}
class MyCoord: NSObject, UIScrollViewDelegate, ObservableObject {
let maxSize: CGFloat = 76
let minSize: CGFloat = 56
@Published var height: CGFloat = 76
func scrollViewDidScroll(_ scrollView: UIScrollView) {
print(scrollView.contentOffset.y)
let size = maxSize - scrollView.contentOffset.y
height = min(maxSize, max(minSize, size))
}
}