主页 / coding / 问题 / 77044543
Accepted
lazarevzubov
Asked: 2023-09-05 20:31:16 +0800 CST

通过 ScrollView 的子视图之一填充所有可用空间

  • 772

在我的应用程序中，我有一个ScrollView具有一个静态子视图作为标题和一个LazyVStack包含多个元素的视图模型，其中填充了视图模型中的数据。此外，如果此“动态”数据为空，而不是LazyVStack，我将显示占位符视图。这是视图的简化结构：

var body: some View {
  GeometryReader { geometry in
    ScrollView {
      HStack(spacing: .zero) {
        Text("This is my greeting to you")
        Spacer()
      }
      if greetings.isEmpty {
        PlaceholderView()
          .frame(height: geometry.size.height)
      } else {
        LazyVStack {
          ForEach(greetings, id: \.self) {
            Text($0)
          }
        }
      }
    }
  }
}
private var greetings: [String]

PlaceholderView:

VStack {
  Image(systemName: "hand.wave")
  Text("Hello world!")
}

我想显示在可用空间的中间（即，在这种情况下，整个屏幕高度减去顶部PlaceholderView的高度。）这里的许多类似的问题建议使用，但在这种情况下没有帮助：HStackGeometryReader

GeometryReader { geometry in
  ScrollView {
    HStack(spacing: .zero) {
      Text("This is my greetings to you")
      Spacer()
    }
    if greetings.isEmpty {
      ExampleView()
        .frame(height: geometry.size.height)
    } else {
      LazyVStack {
        ForEach(greetings, id: \.self) {
          Text($0)
        }
      }
    }
  }
}

使用上面的代码PlaceholderView会占用比所需更多的空间。就我而言，它应该是这样的geometry.size.height - hStackHeight：

有没有办法让PlaceholderView屏幕高度减去 的HStack高度？非常感谢任何指导。

ios

2 个回答

  1. 如果您PlaceholderView在一秒钟内换行GeometryReader，那么您可以使用它来获取全局坐标空间中的垂直位移（这就是hStackHeight您所提到的）。这可以从高度中减去：

    if greetings.isEmpty {
    GeometryReader { proxy2 in
        PlaceholderView()
            .frame(height: geometry.size.height
                   - proxy2.frame(in: .global).minY)
    }
} else {

    占位符视图

    该解决方案的唯一问题是，当使用滚动操作推开顶部的消息时，高度会增加。这意味着消息和占位符不同步移动，这看起来有点奇怪。ScrollView因此，根据 superpuccio 的回答，当没有可显示的问候语时，我可能会选择抑制。

    编辑终于解决了。VStack内部还需要一个附加的ScrollView。然后调整就可以使用 的坐标空间了VStack。这解决了非同步滚动移动的问题：

    var body: some View {
    GeometryReader { geometry in
        ScrollView {
            VStack(spacing: 0) {
                HStack(spacing: .zero) {
                    Text("This is my greeting to you")
                    Spacer()
                }
                if greetings.isEmpty {
                    GeometryReader { proxy2 in
                        PlaceholderView()
                            .frame(height: geometry.size.height -
                                   proxy2.frame(in: .named("VStack")).minY
                            )
                    }
                } else {
                    LazyVStack {
                        ForEach(greetings, id: \.self) {
                            Text($0)
                        }
                    }
                }
            }
            .coordinateSpace(name: "VStack")
        }
    }
}
    • 1
  2. Best Answer

    如果您不需要占位符上下弹跳，则可以避免使用 a ，ScrollView以防没有数据可显示。我是说：

    struct SomeView: View {
    @State private var greetings = [String]()

    var body: some View {
        if greetings.isEmpty {
            VStack {
                header
                placeholder
            }
        } else {
            ScrollView {
                header
                LazyVStack {
                    ForEach(greetings, id: \.self) {
                        Text($0)
                    }
                }
            }
        }
    }

    @ViewBuilder
    private var placeholder: some View {
        VStack {
            Image(systemName: "hand.wave")
            Text("Hello World")
        }
        .frame(maxHeight: .infinity)
    }

    @ViewBuilder
    private var header: some View {
        HStack(spacing: .zero) {
            Text("This is my greeting to you")
            Spacer()
        }
    }
}

    结果是：

    • 1

相关问题