首页 > 解决方案 > 所有 iphone 上的 SwiftUI 响应式设计

问题描述

我正在构建应用程序来练习我的 swiftUI 技能,我用 figma 创建了设计并将其复制到我的 xcode 中,我认为我在我的设备是 的时候做得很好Iphone 12 pro max,但是在切换到例如之后:Iphone se整个设计被毁了。如何修复设计以在所有 iphone 上看起来都不错iphone 12 专业版

在此处输入图像描述

顺便说一句,我用.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)
        }

标签: swiftui

解决方案


推荐阅读