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

Posted 2023-02-23

【中文标题】SwiftUI 垂直 ScrollView 弹回并不显示其中的所有视图

【英文标题】：SwiftUI vertical ScrollView springs back up and doesn't show all the views within it

【发布时间】：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 上工作过...但可以尝试.. 可以分享示例项目吗？

【参考方案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)