Как сделать ширину обзора равной супервизору в SwiftUI

У меня Button

введите описание изображения здесь

struct ContentView : View {
    var body: some View {
        HStack {
            Button(action: {}) {
                Text("MyButton")
                    .color(.white)
                    .font(Font.system(size: 17))
            }
            .frame(height: 56)
            .background(Color.red, cornerRadius: 0)
        }
    }
}

Но я хочу прикрепить его к краям супервизора (от конца до конца и начала супервизора). Нравится:

введите описание изображения здесь

HStack мне не помогает, и ожидаю. Фиксированная frame или ширина, равная UIScree.size, не являются гибкими решениями.


swiftui ios13
person Argas    schedule 08.06.2019    source источник

Ответы (5)


arrow_upward
72
arrow_downward

Вам нужно использовать модификатор .frame(minWidth: 0, maxWidth: .infinity)

Добавьте следующий код

        Button(action: tap) {
            Text("Button")
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.red)
        }
        .padding([.leading, .trailing], 20)

Модификатор Padding позволит вам оставить немного места по краю.

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

person DenFav    schedule 08.06.2019
comment
.infinity - приятная вещь, спасибо! Но установить какие-то элементы в супервизор невозможно. Но если установить .frame (minWidth: 0, maxWidth: .infinity) в Text и добавить padding() в Button - это будет работать! - person Argas; 08.06.2019
comment
Как я могу добавить определенную высоту для кнопки? Например, если мне нужно установить высоту кнопки 43 пикселей, как я могу это сделать? - person Gautam Shrivastav; 22.11.2019
comment
Одно небольшое дополнение: теперь вы можете использовать .padding(.horizontal, 20), если хотите, чтобы отступы были с обеих сторон, без упоминания левого и правого по отдельности. - person perte; 05.02.2020
comment
Почему minWidth: 0? Когда я его удаляю, мой вид больше, чем родительский. Я не понимаю здесь логики - person GrandSteph; 28.04.2020

arrow_upward
26
arrow_downward

Вы можете использовать GeometryReader: https://developer.apple.com/documentation/swiftui/geometryreader

Согласно Apple:

Это представление возвращает родительскому макету гибкий предпочтительный размер.

введите описание изображения здесь

Это гибкое решение, так как оно изменяется в соответствии с изменениями родительского макета.

person Matteo Pacini    schedule 08.06.2019
comment
Я могу подтвердить, что это работает, чтобы настроить кнопку на полную ширину, однако я не могу добавить отступы ни к одному размеру кнопки. - person user3565259; 11.06.2019

arrow_upward
5
arrow_downward

Простое добавление следующего в ваш код заставит кнопку расширяться от края до края. (Вы также можете добавить отступы, если хотите)

.frame(minWidth: 0, maxWidth: .infinity)

Весь код кнопки будет выглядеть так:

struct ContentView : View {
    var body: some View {
        HStack {
            Button(action: {}) {
                Text("MyButton")
                    .color(.white)
                    .font(Font.system(size: 17))
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding(.top, 8)
            .padding(.bottom, 8)
            .background(Color.red, cornerRadius: 0)
        }
    }
}
person Tejas    schedule 26.09.2019

arrow_upward
1
arrow_downward

Я нашел одно решение:

var body: some View {
    Button(action: {}) {
            HStack {
                Spacer()
                Text("MyButton")
                    .color(.white)
                    .font(Font.system(size: 17))
                Spacer()
            }
            .frame(height: 56)
            .background(Color.red, cornerRadius: 0)
        }.padding(20)
}

Но я не уверен, что это лучший вариант. Может быть, найдется более изящное решение /

person Argas    schedule 08.06.2019
comment
Одна из проблем заключается в том, что кнопку можно нажимать за пределами ее видимых границ. Это означает, что пользователь может неправильно нажать кнопку, даже если он нажимал на пробел. - person Zorayr; 01.05.2020

arrow_upward
1
arrow_downward

Вот чистое решение SwiftUI, в котором вы хотите заполнить ширину родительского элемента, но ограничить высоту произвольным соотношением сторон (скажем, вам нужны квадратные изображения):

        Image("myImage")
            .resizable()
            .scaledToFill()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .aspectRatio(16.0 / 9.0, contentMode: .fit)

Просто замените 16.0 / 9.0 любым желаемым соотношением сторон.

Я потратил около дня, пытаясь понять это, потому что я не хотел использовать GeometryReader или UIScreen.main.bounds (что не является кроссплатформенным)

Изменить: нашел еще более простой способ.

person Sherwin Zadeh    schedule 18.11.2020