Блог

Я только начинаю учиться быстрому.

На картинке выше показан экран, который я сделал с помощью VStack и HStack.

Но я хочу разместить кнопку или текст там, где захочу.

Эта картинка-картинка, которую я расположил, отрегулировав размер с помощью рамки.

Однако при изменении разрешения возникает проблема с тем, что кнопка или текст перемещаются по экрану.

Я хочу сохранить эту договоренность и сделать так, чтобы она автоматически применялась при различных разрешениях iPhone.

 VStack {
        HStack {
            Text("Hello")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(Color.black)
                .multilineTextAlignment(.center)
        }
        VStack {
            HStack {
                VStack {
                    Text("ID")
                        .padding()
                    Text("PW")
                        .padding()
                }
                
                VStack {
                    TextField("ID", text: $ID)
                        .padding()
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    SecureField("password", text: $password)
                        .padding()
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
            }
            
        }
        VStack {
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                Text("Login")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
        
            }
            .padding()
            .background(Color.green.cornerRadius(18))
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                Text("Sign up")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
            }
            .padding()
            .background(Color.red.cornerRadius(18))
        }
    }
 

Исходный код очень неопытен.

Я был бы признателен, если бы вы дали мне знать, является ли это правильным способом написания макета.

Воспользуйся .frame(maxWidth: .infinity) . это позволяет View максимально увеличить размер их контейнера.

Кроме того, используйте .background() модификатор Text «нет Button «.

Если вы используете .background() Button такие же коды, как и ваши, Button действует только для текстовой области.

 VStack {
    Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
        Text("Login")
            .font(.title)
            .fontWeight(.bold)
            .frame(maxWidth: .infinity, alignment: .center)
            .foregroundColor(Color.white)
            .background(Color.green.cornerRadius(18)) 
    }
    .padding()

    Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
        Text("Sign up")
            .font(.title)
            .fontWeight(.bold)
            .frame(maxWidth: .infinity, alignment: .center)
            .foregroundColor(Color.white)
            .background(Color.red.cornerRadius(18))
    }
    .padding()
}