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

Question

所以基本上我已经制作好了我的UI，如果不是因为我的UI/Stack似乎不适合像iPod Touch 7th gen或iPhone SE 2nd gen这样屏幕较小的设备，它就可以正常工作，那么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将保持在屏幕顶部的位置，其他内容将可滚动。