SwiftUI间隔布局问题

哑光黑

我仍在尝试通过创建登录表单来了解swiftUI。我试图将“ forgotPasswordImage”放置在白色圆角矩形的底部,并为其赋予相同的宽度(和比例高度)。

从屏幕截图中可以看到,“ forgotPassword”图像未像我期望的那样位于底部。有趣的是,在图像上添加了以下方法,使图像向上移动。

图片(“ forgotPasswordBottom”)。resizable()。relativeWidth(1).scaledToFit()

如何在应用匹配的宽度和高度以保持正确的纵横比的同时将图像放置在圆角矩形的底部。

谢谢!

import SwiftUI

struct LogIn : View {
    var body: some View {

        ZStack{

            Image("LoginBackground")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)

            RoundedRectangle(cornerRadius: 30).foregroundColor(.white).relativeSize(width: 0.8, height: 0.7)

            VStack{
                Spacer()
                Image("forgotPasswordBottom").resizable().relativeWidth(1).scaledToFit()
            }.relativeSize(width: 0.8, height: 0.7)

        }
    }
}

屏幕截图

众多的

由于relativeWidth已弃用且不可用,因此,如果您想使用响应式设计,可以使用UIScreen.main.bounds.width,将此值分配给变量,则可以在代码中使用它来获取与屏幕成比例的正确大小的登录框架:

var loginViewWidth = UIScreen.main.bounds.width / 1.3 

我将登录视图嵌套在另一个第二个ZStack中。同样,我将使用此ZStack的(alignment:.bottom)修饰符将“ forgotPasswordBottom”按钮自动定位到视图的底部,然后将修饰符'frame'添加到整个ZStack中,如下所示:

import SwiftUI

struct ContentView: View {

var loginViewWidth = UIScreen.main.bounds.width / 1.3

    var body: some View {
        ZStack{
            Image("LoginBackground")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)

            ZStack(alignment: .bottom) {

                RoundedRectangle(cornerRadius: 30).foregroundColor(.white)

                Image("forgotPasswordBottom")
                    .resizable()
                    .aspectRatio(contentMode: .fit)

            }.frame(width: loginViewWidth, height: loginViewWidth * 1.7)
        }
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章