面试题：Swift中GeometryReader与Spacer复杂布局应用

Question

假设有一个垂直布局的视图，顶部是一个固定高度的标题视图，底部是一个固定高度的按钮视图，中间部分需要自适应填充剩余空间，并且中间部分要根据自身的大小动态调整子视图的布局（如改变字体大小）。请使用GeometryReader和Spacer实现这个布局，并解释实现思路。

Answer 1

实现代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // 顶部固定高度标题视图
            Text("标题视图")
              .frame(height: 50)
              .background(Color.blue)

            // 中间自适应填充部分
            GeometryReader { geometry in
                Spacer()
                    .onAppear {
                        // 根据中间部分大小动态调整子视图布局（示例：打印中间部分的宽度）
                        print("中间部分宽度: \(geometry.size.width)")
                    }
            }

            // 底部固定高度按钮视图
            Button("按钮视图") { }
              .frame(height: 50)
              .background(Color.green)
        }
    }
}

实现思路

1. 使用 VStack 进行垂直布局：VStack 是SwiftUI中用于垂直排列子视图的容器。
2. 顶部标题视图：创建一个 Text 视图作为标题，通过 frame(height: 50) 设定其固定高度为50，并设置背景颜色为蓝色，方便区分。
3. 中间自适应部分：利用 GeometryReader 来获取自身大小信息。GeometryReader 可以让我们在视图内部访问其几何属性，比如大小和位置。在 GeometryReader 内部放置 Spacer，Spacer 会自动填充剩余空间。同时，通过 onAppear 修饰符，在视图出现时获取 GeometryReader 的大小信息，这里以打印宽度为例，实际应用中可根据此大小信息来动态调整子视图布局，如改变字体大小等。
4. 底部按钮视图：创建一个 Button 视图作为按钮，通过 frame(height: 50) 设定其固定高度为50，并设置背景颜色为绿色，方便区分。这样就实现了顶部和底部固定高度，中间自适应填充剩余空间，且中间部分能根据自身大小动态调整子视图布局的效果。