如何在swiftUI中创建动态大小元素

Question

我是swiftui的新手，开始有点流行起来。但我面临的主要问题是为不同的屏幕大小创建一个应用程序。这让我遇到了创建应用程序的瓶颈。我试图通过将整个代码封装在GeometryReader{ geometry in ...}中，然后使用geometry指定各种元素的大小(宽度、高度(和.position来解决这个问题。添加了示例代码。然而，当我切换屏幕大小时，它看起来一团糟。我在这个问题上已经坚持了很长时间。如果我使用了完全错误的方法，请纠正我。

struct CarInfoCard: View {

@State var cardValue: String
@State var cardUnit: String
@State var cardType: String
@State var cardNotify: Bool
@State var geo: GeometryProxy

var body: some View {
VStack(alignment: .leading){

HStack(alignment: .lastTextBaseline, spacing: 2) {
Text(cardValue)
//.font(.system(size: 40, weight: .bold, design: .rounded))
.font(.title)
.bold()
.foregroundColor(Color("ColorButtonLogo"))

Text(cardUnit)
// .font(.system(size: 25, weight: .bold, design: .rounded))
.font(.title3)
.bold()
.foregroundColor(Color("ColorButtonLogo"))
}
Text(cardType)
//.font(.system(size: 15, design: .rounded))
.font(.subheadline)
.foregroundColor(Color("ColorButtonLogo"))

}
.frame(width: geo.size.width/3.5, height: geo.size.height/10,alignment: .leading)
.frame(maxWidth:100)
.padding(.vertical,5)
//        .padding(.bottom, 5)
//.padding(.leading, 10)
.padding(.horizontal, 5)
.background(Color("ColorButton"))
//.cornerRadius(20)
.cornerRadius(geo.size.width/30)
.shadow(color: Color.black.opacity(0.15), radius: 20, x: 10, y: 10)
}
}

Answer 1

取决于您的布局风格。如果你的布局是基于比例的，就像flexbox布局一样，GeometryReader确实是不错的选择。然而，您需要做大量的工作才能让所有的UI元素都基于比率工作。

SwiftUI和flexbox布局有很大不同，因为许多元素不仅根据设备，还根据辅助功能设置来更改其大小和形状。这就是为什么使用系统字体、符号和颜色是一种很好的做法——它们可以适当地更改，而无需任何进一步的工作。

根据我的经验，最好的方法是为每个设备(大致分为iPhone、iPad和Mac(构建单独的UI，并尽可能使用基本视图和修改器(间隔符、对齐和堆栈(构建它们。这样，视图将在不同的设备中正确更改。如果您的UI中有一部分不能依赖于基本构建块，请仅在这些部分使用GeoReader或#If设备语句不要尝试基于整个UI比率构建，实现起来会非常痛苦。

如果你只需要每个元素都有一个合理的大小，SwiftUI将为你完成大部分工作。如果您在对齐方面有问题，请学习对齐指南。如果您需要按比例缩放所有内容，您可能需要使用库！Swift有许多flex布局库。

如果您想要更多关于让代码按预期工作的详细信息，您可能需要添加一些关于预期结果和实际结果的描述。