swiftui - 所有 iphone 上的 SwiftUI 响应式设计
问题描述
我正在构建应用程序来练习我的 swiftUI 技能,我用 figma 创建了设计并将其复制到我的 xcode 中,我认为我在我的设备是 的时候做得很好Iphone 12 pro max
,但是在切换到例如之后:Iphone se
整个设计被毁了。如何修复设计以在所有 iphone 上看起来都不错
顺便说一句,我用.offset
了很多,这是问题吗?
ZStack{
Color("background").ignoresSafeArea()
Image("Group 7").offset(x:-163)
Image("Group 6").offset(x:150, y:-400)
Image("Group 8").offset(x:150,y:50)
VStack{
Text("drink water").font(.custom("Lobster 1.4.otf", size: 60)).foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1))).tracking(-0.3).multilineTextAlignment(.center).shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4)
Image(uiImage: #imageLiteral(resourceName: "Fitz Water"))
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 375, height: 251)
.clipped()
.frame(width: 375, height: 251)
.shadow(color: Color(#colorLiteral(red: 0.9791666865348816, green: 0.9628472328186035, blue: 0.9628472328186035, alpha: 0.25)), radius:25, x:0, y:20)
Spacer()
}
VStack{
Text("Today you have only drank: 0,5 Litres").font(.system(size: 25, weight: .regular, design: .rounded)).foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1))).tracking(-0.3).multilineTextAlignment(.leading).shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4).offset(x:38)
.padding(10)
Text("Which is not enough...").font(.system(size: 25, weight: .regular, design: .rounded)).foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1))).tracking(-0.3).multilineTextAlignment(.leading).shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4).offset(x:-37)
.padding(10)
Text("You need to drink ").font(.system(size: 25, weight: .regular, design: .rounded)).foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1))).tracking(-0.3).multilineTextAlignment(.leading).shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4).offset(x:-57)
.padding(10)
Text("1.5").font(.custom("Prompt Regular", size: 110)).foregroundColor(Color(#colorLiteral(red: 0.14, green: 0.73, blue: 1, alpha: 1))).tracking(-0.3).multilineTextAlignment(.center).shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:1, x:0, y:2)
Text("Litres more").font(.system(size: 25, weight: .regular, design: .rounded)).foregroundColor(Color(#colorLiteral(red: 0.9, green: 0.93, blue: 0.92, alpha: 1))).tracking(-0.3).multilineTextAlignment(.leading).shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:4, x:0, y:4).offset(x:-90)
.padding(10)
Button(action: {
print("Edit button was tapped")
}) {
Image("ASD")
}.offset(x:180,y:50)
}.position(x: 160, y: 550)
}
解决方案
推荐阅读
- pandas - 时间序列重采样错误 - 熊猫列中没有 Dateindex
- django - 将模型中字段的默认值设置为另一个模型实例
- hadoop - hive 3 版本中 hive.support.sql11.reserved.keywords 的替代方案是什么
- javascript - 如何根据 React 中的角色授权用户
- python - 元组索引超出范围,Tensorflow
- csv - 'b' 尝试在 Jupyter 中加载数据文件时添加到文件名
- python - Python Pandas 样式根据列中的值更改整行的背景颜色
- azure-logic-apps - 在 Azure 数据工厂中使用 Web 活动触发邮件时出错
- reactjs - 如果我们在 React 中有两个 Counter 组件,我们是否必须复制 Counter 代码?
- c# - C# string.LastIndexOf 是否总是特定于文化?