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

Question

我试图优化一个UI与VStacks和间隔在两者之间。该UI是理想的设计为iPhone 13专业屏幕大小(左)。对于较小的设备，其意图是间隔将以某种方式缩小，而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中，并使用它的间距。您可以读取视图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")
    }
}

}