SwiftUI 间隔布局问题

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

由于 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)
        }
    }
}

SwiftUI 间隔布局问题

SwiftUI spacer layout issue

xcode

swiftui