在swiftUI中的scrollView中填充高度 [英] Fill height in scrollView in swiftUI
问题描述
我正在使用 swiftUI 进行编码,我有一个垂直的 scrollView
(见截图),在那个 scrollView
里面我有另一个水平的 scrollView
,在它下面我有一个 VStack
,我希望高度将屏幕的其余部分填充到垂直 scrollView
的底部,但我似乎无法做到工作.
垂直scrollView
中的内容在某些情况下可能比实际剩余空间大,这就是为什么我需要一个scrollView,但在其他一些情况下,内容小于剩余空间>
这是我的代码:
VStack {标题视图ScrollView(.vertical, showsIndicators: false) {FriendsHorizontalScrollView()虚拟堆栈{//我希望这个视图占据 scrollView 中剩余的所有高度全高视图()}.frame(宽度:UIScreen.main.bounds.width)}}
我最终得到的是这样的:
我想要的:
我尝试了几种解决方案,例如使用 geometryReader 或将 .frame(maxHeight: .infinity)
放在 VStack
上,但似乎没有任何工作正常.
这里是基于视图首选项的可能方法的演示(ViewHeightKey
取自我的
struct DemoLayoutInScrollView: View {@State 私有变量 height1:CGFloat = .zero@State 私有变量 height2:CGFloat = .zerovar主体:一些视图{VStack(间距:0){标题视图()GeometryReader { gp inScrollView(.vertical, showsIndicators: false) {VStack(间距:0){FriendsHorizontalScrollView().background(GeometryReader {颜色清晰.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)}).onPreferenceChange(ViewHeightKey.self) { self.height1 = $0 }VStack(间距:0){//我希望这个视图占据 scrollView 中剩余的所有高度全高视图().background(GeometryReader {颜色清晰.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)})}.frame(height: max(gp.size.height - self.height1, self.height2)).background(颜色.黄色)}}.onPreferenceChange(ViewHeightKey.self) { self.height2 = $0 }}}.frame(maxWidth: .infinity)}}
复制的辅助视图(用于测试)
struct FriendsHorizontalScrollView:查看{var主体:一些视图{文本(水平滚动条").frame(maxWidth: .infinity).frame(高度:100).background(颜色.绿色)}}struct FullHeightView:查看{var主体:一些视图{ZStack {红色文本(动态内容")}.frame(maxWidth: .infinity).frame(高度:300)}}结构头视图:查看{var主体:一些视图{矩形().foregroundColor(.blue).frame(高度:60).overlay(Text(Header"))}}
I am coding useing swiftUI and I have a vertical scrollView
(see screenshots), and inside that scrollView
I have another horizontal scrollView
, and below that I have a VStack
that I want the height to fill the rest of the screen to the bottom of the vertical scrollView
, but I can't seem to make it work.
The content in the vertical scrollView
can be larger than the actually remaining space in some cases that is why I need a scrollView, but in some other cases the content is smaller than the remaining space
Here is the code I have :
VStack {
HeaderView
ScrollView(.vertical, showsIndicators: false) {
FriendsHorizontalScrollView()
VStack {
// I want this view to take all the remaining height left in the scrollView
FullHeightView()
}
.frame(width: UIScreen.main.bounds.width)
}
}
What I end up having is something like this :
What I want to have :
I have tried several solutions like using geometryReader or putting .frame(maxHeight: .infinity)
on the VStack
but nothing seems to work properly.
Here is a demo of possible approach based on view preferences (ViewHeightKey
is taken from my this solution. Tested with Xcode 12 / iOS 14.
struct DemoLayoutInScrollView: View {
@State private var height1: CGFloat = .zero
@State private var height2: CGFloat = .zero
var body: some View {
VStack(spacing: 0) {
HeaderView()
GeometryReader { gp in
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 0) {
FriendsHorizontalScrollView()
.background(GeometryReader {
Color.clear
.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
})
.onPreferenceChange(ViewHeightKey.self) { self.height1 = $0 }
VStack(spacing: 0) {
// I want this view to take all the remaining height left in the scrollView
FullHeightView()
.background(GeometryReader {
Color.clear
.preference(key: ViewHeightKey.self, value: $0.frame(in: .local).size.height)
})
}.frame(height: max(gp.size.height - self.height1, self.height2))
.background(Color.yellow)
}
}
.onPreferenceChange(ViewHeightKey.self) { self.height2 = $0 }
}
}.frame(maxWidth: .infinity)
}
}
replicated helper views (for testing)
struct FriendsHorizontalScrollView: View {
var body: some View {
Text("Horizontal Scroller")
.frame(maxWidth: .infinity)
.frame(height: 100)
.background(Color.green)
}
}
struct FullHeightView: View {
var body: some View {
ZStack {
Color.red
Text("Dynamic Content")
}
.frame(maxWidth: .infinity)
.frame(height: 300)
}
}
struct HeaderView: View {
var body: some View {
Rectangle().foregroundColor(.blue)
.frame(height: 60)
.overlay(Text("Header"))
}
}
这篇关于在swiftUI中的scrollView中填充高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!