SwiftUI 垂直 ScrollView 弹回并不显示其中的所有视图答案

【问题标题】：SwiftUI vertical ScrollView springs back up and doesn't show all the views within itSwiftUI 垂直 ScrollView 弹回并不显示其中的所有视图
【发布时间】：2020-07-22 09:57:49
【问题描述】：

我正在开发一个布局与此类似的项目，其中我有几个视图堆叠在 VStack 中，底部有一个按钮，所有这些都嵌入在滚动视图中。正如您在图像中看到的，滚动视图弹回并且不显示按钮。

var body: some View {
    VStack {
        Rectangle()
            .fill(Color.green)
            .frame(height: 300)
        Spacer()
        ScrollView {
            RectanglesView()
            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                Text("Click me")
            }
            .offset(y: 50)
            .frame(width: 300)
            
        }
    }.edgesIgnoringSafeArea(.all)
}

我确实认为问题是由于按钮的偏移造成的，因为如果我删除它，它会正常运行，但我不想丢失按钮的位置。

【问题讨论】：

这是错误的期望。 .offset(y: 50) 不会改变视图的位置/位置，而只会改变绘图的位置。
道歉 :-) 我不是专家，我还在学习。
您的内容插入不正确。
@Priyal 我该如何修复它们？请记住，这只是一个测试代码，而不是实际项目的样子。
我没有在 SWIFTUI 上工作过...但可以尝试.. 可以分享示例项目吗？

标签： ios swift iphone swiftui scrollview

【解决方案1】：

代替偏移，添加填充，像这样在 VStack 中（下面稍微修改了代码）

    var body: some View {
    ZStack{
        VStack {
            Rectangle()
                .fill(Color.green)
                .frame(height: 300)
            Spacer()
            ScrollView {
                VStack{
                Rectangle()
                    .fill(Color.red)
                    .frame(height: 300)
                Rectangle()
                    .fill(Color.yellow)
                    .frame(height: 300)
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                    Text("Click me")
                    }.padding() //instead of offset
                .frame(width: 300)
                }.frame(alignment: .leading)
                
            }
        }.edgesIgnoringSafeArea(.all)
    }
}

【讨论】：

【解决方案2】：

您是否尝试将 Button 移出 ScrollView()？

如下所示：

struct ContentView: View {
   var body: some View {
        VStack {
            Rectangle()
                .fill(Color.green)
                .frame(height: 300)
            Spacer()
            ScrollView(.vertical) {
                Rectangle().fill(Color.red).frame(width: 400, height: 200)
                Rectangle().fill(Color.blue).frame(width: 400, height: 200)
                Rectangle().fill(Color.yellow).frame(width: 400, height: 200)
                 Rectangle().fill(Color.green).frame(width: 400, height: 200)
            }
            
            
            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                Text("Click me")
                    .font(.headline)
                           }
        }.edgesIgnoringSafeArea(.all)
    }

}

【讨论】：