如何使用SwiftUi

Question

应该是3行的图片，第1行由3个正方形组成，其中大约是该行的三分之一，第2行有一个矩形和一个正方形，最后一行只有一个矩形。我面临的问题是，当我将视图添加到父母身上时，我得到了结果：

为了实现这种布局，我尝试使用Vstacks和Hstack的组合，并尝试使用gemetryReader使用大约1/3的视图来计算图片的宽度。

import SwiftUI

struct OverviewTiles: View {
    var body: some View {
        // TODO: There will be different designs so be sure to look out for that
        GeometryReader { geo in
            let size = geo.size.width * 0.66
            VStack(spacing: 16) {
                HStack(spacing: 16) {
                    Image("tiles_square")
                        .resizable()
                        .scaledToFit()
                        .frame(width: size)
                    VStack(spacing: 16) {
                        Image("tiles_square")
                            .resizable()
                            .scaledToFit()
                        Image("tiles_square")
                            .resizable()
                            .scaledToFit()
                    }
                }
                HStack(spacing: 16) {
                    Image("tiles_landscape")
                        .resizable()
                        .scaledToFit()
                        .frame(width: size)
                    Image("tiles_square")
                        .resizable()
                        .scaledToFit()
                }
                Image("tiles_landscape")
                    .resizable()
                    .scaledToFit()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        
    }
}

视图本身是在卷轴内实例化的。我是Swiftui的新手，我想知道这是否是正确的方法。最终，我喜欢让此元素对方向更改做出正确的反应，尽管可能会更改图像的顺序。因此，是否以正确的方式使用几何学或有更好的方法可以实现这一目标？

非常感谢您，为您提供帮助。

当我尝试您的代码时，它看起来很像第一个屏幕截图（您的目标布局）。但是，当您将其全部包裹在

ScrollView

中时，它看起来像第二个屏幕截图（Broken）。 A内部的视图以其理想尺寸显示，并且A

ScrollView

的理想尺寸很小。因此，您需要确保

Answer 1

嵌套在

ScrollView

中，而不是相反：

GeometryReader