Question

我想构建一个滚动屏幕，所以我想将其嵌入ScrollView。但是我无法实现它，视图只是缩小到其压缩大小。假设我希望ScrollView垂直滚动，所以我希望内容与scrollView的宽度匹配。所以我使用这样的预览：

struct ScrollSubview_Previews : PreviewProvider {
    static var previews: some View {
        func textfield() -> some View {
            TextField(.constant("Text")).background(Color.red)
        }

        return Group {
            textfield()
            ScrollView {
                textfield()
            }
        }
    }
}

但最终结果如下：

Answer 1

一种简单的方法，使用 frame（maxWidth：.infinity）

    ScrollView(.vertical) {
        VStack {
           ForEach(0..<100) {
              Text("Item \($0)")
          }
       }
       .frame(maxWidth: .infinity)
   }

Answer 2

实际上，您不再需要Geometry阅读器。 ScrollView已在XCode beta 3中重构现在，您可以声明自己具有.horizontal ScrollView或.vertical 这使得ScrollView的行为像任何普通的View协议一样。

例如：

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        ForEach((1...10).reversed()) {
            AnyViewYouWant(number: $0)
        }
    }
}

这将导致其父视图的宽度水平滚动的视图。高度将由ScrollView的子视图高度定义。

Answer 3

这是一个窍门：引入一个loading，它只有一个HStack：

Spacer

Answer 4

这是Beta 2中也存在的已知问题-在此处查看Apple的Xcode 11发行说明⬇️ https://developer.apple.com/documentation/xcode_release_notes/xcode_11_beta_2_release_notes。

Apple自己提到的解决方法是在元素内部为ScrollView设置固定框架。在那种情况下，我建议使用GeometryReader固定屏幕宽度，高度自动适应内容。

例如，如果您需要使ScrollView的内容适合屏幕宽度，则可以使用以下方法：

return GeometryReader { geometry in
     Group {
         self.textfield()
         ScrollView {
             self.textfield()
                 .frame(width: geometry.size.width)
         }
     }
 }

Answer 5

我以为这段代码会让蓝色方块填满屏幕，但我们看到很多红色，xcode 12.3

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        ScrollView(.vertical) {
            Spacer()
            VStack(alignment: .leading) {
                Spacer()
                Text("134")
                Spacer()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
        }
        .background(Color.red)
    }
}

Answer 6

您也可以使用额外的 HStack 和空间来完成此操作。

ScrollView(.vertical) {
    HStack {
        VStack {
             ForEach(0..<100) {
                Text("Item \($0)")
             }
         }
         Spacer()
     }
}

Answer 7

PreviewProvider与您的Canvas（渲染视图）有关。

如果要将文本放入ScrollView，则应创建视图

struct MyViewWithScroll : View {
    var body: some View {
        ScrollView {
            Text("Placeholder")
        }
    }
}

然后，在Canvas中渲染MyViewWithScroll（代码编辑器右侧的iPhone窗口）

#if DEBUG
struct MyViewWithScroll_Previews : PreviewProvider {
    static var previews: some View {
        MyViewWithScroll()
    }
}
#endif

使ScrollView内容在SwiftUI中填充其父级

7 个答案: