在 SwiftUI 中的 HStack 和 VStack 之间添加空间

Question

我是 swift UI 新手。我正在尝试在 swift ui 中创建简单的登录表单。我试图在顶部角落放置圆形形状，并在其中放置文本并归档。然后我尝试将图像放入 VStack 中，并带有相应的文本和按钮，但设计正在从底部扩展，我试图增加登录按钮的宽度，但实际上它并没有增加..

这是我的代码..

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.clear
            HStack() {
                Circle()
                    .fill(.blue)
                    .frame(width: 50, height: 60)

                Text("SLOP")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)

        VStack(alignment: .center) {
            Image("login")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(10)
                .padding()

            Text("Hello !")
                .font(.title)
                .bold()
            Text("Please select the Option")
                .bold()
            Button {
                print("Login button was tapped")
            } label: {
                Text("Login")
                    .padding()
                    .foregroundStyle(.white)
                    .background(.blue)
                    .frame(width: 1000, height: 60)
            }

            Button {
                print("Registration button was tapped")
            } label: {
                Text("Registration")
                    .padding()
                    .foregroundStyle(.white)
                    .background(.blue)
                    .frame(width: 200, height: 60)
            }
        }
    }
}

实际设计截图。

这是该应用程序的屏幕截图。图像位置不正确，登录文本按钮宽度未增加。

Answer 1

我建议对左上角的圆圈和文本使用

.overlay

。要确保叠加层确实位于屏幕的左上角，请在

maxHeight: .infinity

上设置

VStack

。

对于登录按钮，只需设置

maxWidth: .infinity

并在之后应用背景颜色（修饰符的顺序很重要）。您可能还需要一些额外的填充物。

像这样：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center) {
            Image("login")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(10)
                .padding()

            Text("Hello !")
                .font(.title)
                .bold()
            Text("Please select the Option")
                .bold()
            Button {
                print("Login button was tapped")
            } label: {
                Text("Login")
                    .padding()
                    .foregroundStyle(.white)
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .background(.blue) // after setting the max width
            }

            Button {
                print("Registration button was tapped")
            } label: {
                Text("Registration")
                    .padding()
                    .foregroundStyle(.white)
                    .background(.blue)
                    .frame(width: 200, height: 60)
            }
        }
        .padding()
        .frame(maxHeight: .infinity)
        .overlay(alignment: .topLeading) {
            HStack {
                Circle()
                    .fill(.blue)
                    .frame(width: 50, height: 60)

                Text("SLOP")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

            }
            .padding(.leading, 20)
        }
    }
}