在小屏幕设备上损坏 UI - SwiftUI

Question

所以基本上我已经制作了我的 UI 如果不是因为我的 UI/Stacks 似乎不适合 iPod 等较小屏幕的设备，它工作得很好触摸第 7 代或 iPhone SE 第 2 代。我的印象是，如果我避免硬编码帧并使用动态元素，例如堆栈上的间距参数、.padding、Spacer() 等，那么 SwiftUI 将发挥其布局魔力，并且可以跨平台工作多种屏幕尺寸。我什至没有在这里使用复杂的视图，它只是几个堆栈和文本视图。

代码：

struct EntireView: View {
var viewModel: ViewModel
var body: some View {
    VStack {
        HeadView(vm: viewModel)
        Rectangle()
            .frame(width: UIScreen.main.bounds.width - 20, height: 1)
        FieldView(viewModel: viewModel)
        ButtonView()
    }
}

}

struct HeadView: View {

var body: some View {
    VStack {
        VStack(spacing: 15) {
            Text("some text")
                .font(.custom(FontType.OpenSans.bold, size: 16))
            Text(vm.description)
                .font(.custom(FontType.OpenSans.semibold, size: 14))
        }
        .padding()
        
        VStack {
            HStack {
                VStack {
                    Text("some text")
                        .font(.custom(FontType.OpenSans.bold, size: 16))
                    Text("some text")
                        .font(.custom(FontType.OpenSans.regular, size: 12))
                }
                Spacer()
                VStack {
                    Text("some text")
                        .font(.custom(FontType.OpenSans.bold, size: 16))
                    Text(""some text")
                        .font(.custom(FontType.OpenSans.regular, size: 12))
                }
                Spacer()
                VStack {
                    Text("some text")
                        .font(.custom(FontType.OpenSans.bold, size: 16))
                    Text("some text")
                        .font(.custom(FontType.OpenSans.regular, size: 12))
                }
            }
        }
        .padding()
        HStack {
            Text("some text")
                .font(.custom(FontType.OpenSans.italic, size: 14))
            Spacer()
            Text("some text")
                .font(.custom(FontType.OpenSans.bold, size: 14))
                .foregroundColor(.white)
                .frame(width: 69, height: 25)
                .background(.green)
                .cornerRadius(4)
        }
        .padding()
    }
}

}

struct FieldView: View {
let viewModel: HoldingDetailViewModel

var body: some View {
    VStack(spacing: 20) {
        VStack(spacing: 10) {
            Text("some text")
                .foregroundColor(.blue)
            Text("some text")
                .foregroundColor(.blue)
        }
        
        VStack(spacing: 10) {
            Text("some text")
                .foregroundColor(.blue)
            HStack {
                Text("some text")
                Rectangle()
                    .fill(.blue)
                    .frame(width: 1, height: 25)
                Text("some text")
            }
            .foregroundColor(.blue)
        }
        
        VStack(spacing: 10) {
            Text("some text")
                .foregroundColor(.blue)
            Text("some text")
                .foregroundColor(.blue)
        }
        
        VStack(spacing: 10) {
            Text("some text")
                .foregroundColor(.blue)
            Text("some text")
                .foregroundColor(.blue)
        }
        
        VStack(spacing: 10) {
            Text("some text")
                .foregroundColor(.blue)
            Text("some text")
                .foregroundColor(.blue)
        }
        
    }
    .font(.custom(FontType.OpenSans.semibold, size: 14))
}

在较小的设备上，有些元素甚至没有被渲染，因为它们不适合屏幕，我应该如何解决这个问题？

Answer 1

目前，您已经将如此多的垂直堆栈堆叠在一起，以至于 UI 构建器用完了物理屏幕空间来渲染所有 UI 元素。

我想你想用的是这样的 ScrollView:

struct EntireView: View {
    var viewModel: ViewModel
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            HeadView(vm: viewModel)
            Rectangle()
                .frame(width: UIScreen.main.bounds.width - 20, height: 1)
            FieldView(viewModel: viewModel)
            ButtonView()
        }
    }
}

这样，所有 UI 元素都呈现在一个大的 VStack 中，可以这么说，您可以滚动浏览。因此，不限于物理屏幕尺寸。这是你想要的吗？

如果您希望视图的某些部分可滚动而某些部分不可滚动，您可以执行以下操作：

struct EntireView: View {
    var viewModel: ViewModel
    var body: some View {
        VStack {
            HeadView(vm: viewModel)
            ScrollView(.vertical, showsIndicators: false) {
            
                 Rectangle()
                     .frame(width: UIScreen.main.bounds.width - 20, height: 1)
                 FieldView(viewModel: viewModel)
                 ButtonView()
             }
        }
        
    }
}

这样，HeadView 将保持在屏幕顶部的位置，其他内容将可以滚动。

在小屏幕设备上损坏 UI - SwiftUI

Broken UI on devices with small screen size - SwiftUI

layout

ios

swift

swiftui