如何设置 GeometryReader 框架高度答案

【问题标题】：How to set the GeometryReader's frame height如何设置 GeometryReader 框架高度
【发布时间】：2020-11-14 18:55:57
【问题描述】：

我想动态设置 PagerViewTest 的框架高度，而无需手动设置直接作用于 GeometryReader 的高度（参见注释掉的行）。正如您在图片中看到的那样，框架的尺寸比圆圈大得多。我希望它和圆一样大。

struct PagerViewTest<Content: View>: View {
  let content: Content

  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  var body: some View {

    GeometryReader { geometry in
      HStack(spacing: 0) {
        return content
          .frame( alignment: .leading)
      }
    }
    //    .frame(height: 200) // TODO: should not be hardcoded!
  }

}

struct PagerViewTest_Previews: PreviewProvider {
  static var previews: some View {
    PagerViewTest() {
      Circle()
        .frame(width: 200)
      Circle()
        .frame(width: 200)
      Circle()
        .frame(width: 200)
    }
    .previewLayout(.sizeThatFits)
  }
}

【问题讨论】：

你应该给你的圈子一个框架或大小！对？然后将该框架或大小提供给 GeometryReader

标签： ios swift iphone swiftui

【解决方案1】：

圆形是一个形状 - 它没有自己的大小。所以我们需要给它一个应该被填充的框架。一旦我们这样做了，页面视图中的 GeometryReader 将不再需要。

这里是更新的代码。使用 Xcode 12.1 / iOS 14.1 测试

注意：GeometryReader 不关心内部内容，它消耗外部容器中的可用空间并将其提供给内部容器。

struct PagerViewTest<Content: View>: View {
  let content: Content

  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  var body: some View {
      HStack(spacing: 0) {
        return content
          .frame( alignment: .leading)
      }
  }

}

struct PagerViewTest_Previews: PreviewProvider {
  static var previews: some View {
    PagerViewTest() {
      Circle()
        .frame(width: 200, height: 200)
      Circle()
        .frame(width: 200, height: 200)
      Circle()
        .frame(width: 200, height: 200)
    }
    .previewLayout(.sizeThatFits)
  }
}

【讨论】：