SwiftUI:以某种方式在较小设备上调整 VStack 中的间隔符大小

Question

我正在尝试优化带有 VStack 和中间间隔的 UI。 UI 专为 iPhone 13 Pro 屏幕尺寸而设计(左)。对于较小的设备，其目的是使垫片以某种方式缩小，以使 UI 看起来仍然有吸引力。

我尝试通过使用具有 minHeight、idealHeight 和 maxHeight 的间隔框架来实现此目的。预期的布局出现在 iPhone 13 Pro 上，但在 iPhone SE 等较小的设备上，间隔条不会缩小到 minWidth。我该如何解决这个问题？

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            // Top Space
            Spacer()
                .frame(minHeight: 16, idealHeight: 32, maxHeight: .infinity)
                .fixedSize()
            
            // VStack 1
            VStack(spacing: 0) {
                // Image placeholder
                Rectangle()
                    .fill(Color.red)
                    .frame(height: 175)
                
                Spacer()
                    .frame(minHeight: 15, idealHeight: 62, maxHeight: .infinity)
                    .fixedSize()
                
                Text("Abc")
                    .frame(height: 100)
            }
            .background(Color.gray)
            
            // Middle Space
            Spacer()
                .frame(minHeight: 22, idealHeight: 100, maxHeight: .infinity)
                .fixedSize()
            
            // VStack 2
            VStack(spacing: 0) {
                // Image placeholder
                Rectangle()
                    .fill(Color.red)
                    .frame(height: 100)
                
                Spacer()
                    .frame(minHeight: 15, idealHeight: 35, maxHeight: .infinity)
                    .fixedSize()
                
                // Image placeholder
                Rectangle()
                    .fill(Color.red)
                    .frame(height: 195)
            }
            .background(Color.gray)
            
            // Bottom Space
            Spacer()
                .frame(minHeight: 16, idealHeight: 45, maxHeight: .infinity)
                .fixedSize()
        }
        .edgesIgnoringSafeArea(.all)
    }
}

Answer 1

我建议将所有内容包装在另一个 VStack 中并使用它的间距。 您可以在 View 的 init 中读出 UIScreen 边界，并将其与所有设备的边界进行比较。

struct SpacerTest: View {


var spacing: CGFloat

init() {
    let screenHeight = UIScreen.main.bounds.size.height
    
    if screenHeight < 500 {
        self.spacing = 20
    } else if screenHeight < 600 {
        self.spacing = 50
    } else {
        self.spacing = 100
    }
}

var body: some View {
    VStack(spacing: spacing) {
        Text("Spacing Test")
        Text("Spacing Test")
    }
}

}