Создание кнопки пролетают через VStack

Question

В настоящее время у меня есть следующий вид SwiftUI:

HStack {
  ...
  VStack {
    TextField { ... }
    SecureField { ... }
    Button { ... }
  }
  ...
}

Я добавил .background(Color.green) к Button, икак вы можете видеть, вид очень плотно прилегает к тексту.

Мне интересно, есть ли способ отрегулировать ширину кнопки, чтобы она заполняла VStack - что-то вроде .fillрежим для UIStackView.

Answer 1

Вы можете использовать HStack с Text и Spacer, чтобы получить Button, который заполняет ширину его родителя:

Button(action: handleSignInAction) {
    HStack {
        Text("Sign In")
        Spacer()
    }
}.background(Color.green)

Answer 2

Если вы хотите придерживаться метода SwiftUI, документы предлагают вам использовать GeometryReader и установить ширину кнопок вручную. Считыватель геометрии обновляет свои свойства для разных устройств и при вращении.

GeometryReader { geometry in
     Button().frame(width: geometry.size.width, height: 100)
}

Answer 3

Как то так?

              Button(action: {
                    // Do your login thing here
                }) {
                    Capsule()
                        .frame(height: 44)
                        .overlay(Text("Login").foregroundColor(Color.white)).padding()
                }

Answer 4

Сделайте рамку текста кнопки размером UIScreen, а затем установите цвет фона после него (убедитесь, что все изменения стиля сделаны после изменения размера рамки, в противном случае изменения стиля будут только виден на оригинальной рамке по умолчанию). Размер кадра будет распространяться вверх, увеличивая ширину кнопки до ширины экрана.

Button(action: {
                // Sign in stuff
            }) {
                Text("Sign In")
                .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                .background(Color.green)
            }

Вы также можете добавить некоторые отрицательные горизонтальные отступы между установкой рамки и фона, чтобы сместить от края экрана:

Button(action: {
                    // Sign in stuff
                }) {
                    Text("Sign In")
                    .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                    .padding(.horizontal, -10.0)
                    .background(Color.green)
                }

Answer 5

Я не уверен, есть ли метод .fill, аналогичный UIStackView, но, если вы хотите сделать, это предоставить некоторый интервал для Button (или любое представление в этом отношении), что сработало для меня,либо установив frame или padding

.frame(width: 300, alignment: .center) (здесь мы также можем установить высоту, но, если нет, она сможет выводить высоту на основе текста кнопки.

Если вы не хотите устанавливать произвольную ширину, вы также можете import UIKit и использовать UIScreen и получить устройства на полную ширину. (Возможно, SwiftUI может получить это, но не нашел егов это время еще)

.frame(width: UIScreen.main.bounds.width, alignment: .center)

и затем вы можете добавить немного отступов для некоторой передышки

.padding(.all, 20)

Проблема с заполнением заключается в том, чтоэто добавит к дополнительной ширине экрана, поэтому мы должны учитывать это при установке ширины.

(20 * 2 стороны от начала и конца)

.frame(width: UIScreen.main.bounds.width - 40, alignment: .center)

(дыханиеномер предназначен для случаев, когда текст охватывает конец экрана или если ваше выравнивание равно .leading или .trailing)