SwiftUI基础之ScrollView

使用ScrollVIew

ScrollVIew是SwiftUI中的UIScrollView，我们来看看他的初始化方法：

init ( _ axes: Axis.Set = .vertical, @ViewBuilder content: () -> Content)

axes表示方向:

.vertical 可垂直滚动

.horizontal 可水平滚动

[.vertical,.horizontal] 也可以放到集合里面，代表水平垂直都能滚动

content表示ScrollView里面的子视图。

垂直滚动

ScrollView.init(.vertical) {
    VStack() {
        Text("测试1")
        Text("测试2")
        HStack() {
            Text("测试3")
            Text("测试4")
         }
         Text("测试5")
         Text("测试6")
     }.background(.yellow)
}.background(.blue)

展示如下：

我们可以看到默认高度是整屏，宽度是内容自适应。 我们设置下高度就明显了：

ScrollView.init(.vertical) {
    VStack() {
        Text("测试1")
        Text("测试2")
        HStack() {
            Text("测试3")
            Text("测试4")
         }
         Text("测试5")
         Text("测试6")
     }.background(.yellow)
}.background(.blue).frame(height: 50)

展示如下：

水平滚动

ScrollView.init(.horizontal) {
    HStack() {
        Text("测试1")
        Text("测试2")
        VStack() {
            Text("测试3")
            Text("测试4")
         }
         Text("测试5")
         Text("测试6")
     }.background(.yellow)
}.background(.blue)

展示如下：

和垂直滚动相反的是宽度是整屏宽度，高度是内容自适应，同样可以改变宽度来改变ScrollView的宽度，这里我就不演示了。

水平滚动也能垂直滚动

ScrollView.init([.horizontal,.vertical]) {
    VStack() {
        HStack() {
            Text("测试1")
            Text("测试2")
            VStack() {
                Text("测试3")
                Text("测试4")
            }
            Text("测试5")
            Text("测试6")
         }.background(.yellow)
         HStack() {
            Text("测试11")
            Text("测试12")
            VStack() {
                Text("测试13")
                Text("测试14")
            }
            Text("测试15")
            Text("测试16")
          }.background(.green)
    }
}.background(.blue)

展示如下：

我们可以看到宽高都是整屏，那么可以根据需求改变frame即可。

常见的方法

• scrollDisabled(Bool) 是否禁止滑动
• scrollIndicators(ScrollIndicatorVisibility) 设置指示条