SwiftUI 水平滚动视图中灵活调整子视图高度，不影响父级 HStack 框架

在 SwiftUI 中的水平滚动视图中扩展和缩小视图，而不会影响父级 HStack 的框架

引言

在 SwiftUI 中使用水平滚动视图时，调整子视图的高度可能会影响整个 HStack 的框架。为了解决这个问题，我们将探索一种方法，通过这种方法，我们可以扩展和缩小视图，同时保持 HStack 的框架不变。

问题

当我们在一个包含三个视图的 HStack 中使用水平滚动视图时，如果第二个视图的高度可变，它可能会改变 HStack 的高度。这是因为 SwiftUI 将所有视图视为一个整体，因此一个视图的变化会影响其他视图。

解决方案

为了解决这个问题，我们将使用 GeometryReader 来获取 HStack 的框架，然后使用 frame(maxWidth:) 修改器来限制第二个视图的最大宽度。这将防止第二个视图的高度变化影响 HStack 的框架。

步骤

1. 使用 GeometryReader 获取 HStack 的框架：

GeometryReader { geo in
   // HStack 的框架存储在 `geo.size.width` 中
}

2. 使用 frame(maxWidth:) 修改器限制第二个视图的最大宽度：

cryptoTab()
    .frame(maxWidth: geo.size.width)

代码示例

struct ContentView: View {
    @State private var showExchangeRates = false
    @State private var showExpand = false

    var body: some View {
        VStack {
            // 其他内容...

            ScrollView(.horizontal) {
                HStack {
                    // 使用 GeometryReader 获取 HStack 的框架
                    GeometryReader { geo in
                        cryptoTab()
                            .frame(maxWidth: geo.size.width)
                    }

                    // 其他视图...
                }
            }

            // 其他内容...
        }
    }
}

结论

通过使用 GeometryReader 和 frame(maxWidth:) 修改器，我们能够在不影响父级 HStack 框架的情况下扩展和缩小视图。这使得我们可以创建动态布局，其中子视图的高度可以变化，而不会影响整体结构。

常见问题解答

• 为什么 onAppear 和 onDisappear 修改器不起作用？
  • 因为 SwiftUI 可能将 HStack 中的所有三个视图都视为已出现。
• 为什么 DragGesture 手势不起作用？
  • 这种方法效果不稳定，并且不是最佳解决方案。
• 使用这种方法有哪些优势？
  • 确保 HStack 的框架在更改第二个视图的高度后不会受到影响。
  • 允许第二个视图根据需要扩展和缩小。
• 这种方法有哪些限制？
  • 仅适用于水平滚动视图。
• 我可以使用这种方法创建其他布局吗？
  • 是的，这种方法可以用来创建各种动态布局，其中子视图的高度可以变化，而不会影响整体结构。