Question

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

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

Image（“ 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)

        }
    }
}

Answer 1

由于相对宽度已被弃用且不可用，因此，如果您要使用响应式设计，则可以使用UIScreen.main.bounds.width，将此值分配给变量，则可以在代码中使用它来获取与大小成正比的正确大小的登录框架。屏幕：

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

我会将登录视图嵌套在另一个ZStack中。另外，我将使用此ZStack的（alignment：.bottom）修饰符将“ forgotPasswordBottom”按钮自动定位到视图的底部，然后将修饰符“框架”添加到整个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)
        }
    }
}

SwiftUI间隔符布局问题

1 个答案: