使滚动视图中的视图在带有标签的顶部 vstack 之间以可用 space 为中心（它可以更改）

Question

我有滚动视图，其中顶部可以是不同数量的文本，从零到很多。在中心我有另一个视图，它应该在 AVAILABLE SPACE 中垂直居中，所以如果我们在顶部没有文本 - 我的视图应该在屏幕中央，如果有一些文本 - 它应该在可用的 space.If 中输入我已经没有可用的 space，我的视图的填充应该在顶部 24 并且 bottom.I 尝试在带有文本的堆栈和我的之间使用 spacers视图，以及视图和滚动视图之间，但行为不像 expected.Also 我尝试在带有文本的堆栈下添加水平堆栈（居中对齐），但它不会拉伸。还尝试设置 minHeight，但它只是为我的“居中”视图设置了具体大小。

Answer 1

一种方法是使用最小高度为滚动视图高度的“外部”VStack。

随着顶部的“行数”，蓝色 VStack 增加，“外部”堆栈下部的 Text 对象将减少，直到无法再压缩。

到那时，“外部”堆栈将变得比滚动视图高，您就可以滚动了。

这是一个简单的例子：

import SwiftUI

struct ScrollTestView: View {
    
    @State var numRows: Int = 0
    
    var body: some View {
        
        GeometryReader { geometry in
            
            ScrollView {
                
                // "outer" VStack
                //  minimum Height is the scroll view height
                VStack(alignment: .center, spacing: 0) {
                    if numRows > 0 {
                        // "blue" VStack with variable number of "rows"
                        //  remove a row on each tap
                        VStack(alignment: .center, spacing: 20) {
                            Text("Each tap in blue frame removes a row.")
                            ForEach((1...numRows), id: \.self) {
                                Text("Hello \([=10=])")
                            }
                        }
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .onTapGesture {
                            if numRows > 0 {
                                numRows -= 1
                            }
                        }
                    }

                    Text("Hello World\nEach tap in gray frame adds a row above.")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .multilineTextAlignment(.center)
                        .background(Color.gray)
                        .padding(24)
                        .onTapGesture {
                            numRows += 1
                        }

                }
                .frame(minHeight: geometry.size.height)
                
            }
            
        }
        
    }

}

struct ScrollTestView_Previews: PreviewProvider {
    static var previews: some View {
        ScrollTestView()
    }
}

使滚动视图中的视图在带有标签的顶部 vstack 之间以可用 space 为中心（它可以更改）

Make view in scroll view centered in available space between top vstack with labels (it can change)

uiscrollview

swiftui

vstack

hstack

geometryreader