SwiftUI构建的UI在小屏iOS设备显示异常，部分元素未渲染如何解决？

问题根源 #

• 核心问题是当前布局未做超出屏幕高度的滚动适配，小屏设备垂直高度不足时，VStack会默认挤压/截断子视图
• 存在多处硬编码尺寸、固定间距逻辑，未适配小屏的紧凑空间
• 使用UIScreen.main获取屏幕尺寸的方式不符合SwiftUI自适应规范，横竖屏切换、分屏场景下会出现适配错误

具体修复方案 #

1. 外层增加滚动容器

把EntireView的根VStack嵌套进ScrollView，内容超过屏幕高度时可滚动，避免元素被截断：

struct EntireView: View {
    var viewModel: ViewModel
    var body: some View {
        ScrollView { // 新增滚动容器
            VStack {
                HeadView(vm: viewModel)
                Rectangle()
                    .fill(.gray)
                    .frame(height: 1)
                    .padding(.horizontal, 10) // 替代UIScreen.main.bounds.width-20的写法，适配所有容器宽度
                FieldView(viewModel: viewModel)
                ButtonView()
            }
            .padding(.vertical) // 统一全局上下边距
        }
    }
}

2. 优化文字适配

给所有Text增加行数限制和最小缩放系数，避免文字过长溢出：

// 示例Text通用配置
Text(vm.description)
    .font(.custom(FontType.OpenSans.semibold, size: 14))
    .lineLimit(2) // 可根据业务需求调整最大行数，填nil代表无限折行
    .minimumScaleFactor(0.8) // 空间不足时文字最小缩放到原尺寸的80%

3. 替换硬编码尺寸

把固定宽高的视图改为自适应内容的实现，比如HeadView里的绿色按钮：

// 移除原硬编码frame写法 .frame(width: 69, height: 25)
// 改为自适应内边距的写法
.padding(.horizontal, 16)
.padding(.vertical, 4)

FieldView里的垂直分割线不要写死高度，改为限制最大高度的自适应写法：

Rectangle()
    .fill(.blue)
    .frame(width: 1)
    .frame(maxHeight: 25) // 限制最大高度，适配父容器尺寸

4. 小屏紧凑布局适配

通过系统提供的垂直尺寸类判断当前设备是否为小屏紧凑模式，动态调整间距：

struct FieldView: View {
    let viewModel: HoldingDetailViewModel
    // 获取当前垂直尺寸类，compact对应小屏/横屏的紧凑高度场景
    @Environment(\.verticalSizeClass) var verticalSizeClass
    
    var body: some View {
        // 紧凑模式下缩小全局间距，适配小屏空间
        VStack(spacing: verticalSizeClass == .compact ? 12 : 20) {
            // 内部子VStack的间距也做对应适配
            VStack(spacing: verticalSizeClass == .compact ? 6 : 10) {
                Text("some text")
                    .foregroundColor(.blue)
                Text("some text")
                    .foregroundColor(.blue)
            }
            // 其余子VStack同理调整即可
        }
        .font(.custom(FontType.OpenSans.semibold, size: 14))
    }
}

内容的提问来源于stack exchange，提问作者stompy