Уменьшение VStack до minWidth при наличии текста SwiftUI

Я все еще новичок в SwiftUI, и у меня возник странный случай, который я не совсем понимаю. В принципе, у меня есть VStack, который содержит несколько текстовых представлений, но также имеет фоновое представление. В идеале я бы хотел, чтобы фон увеличивался в ширину настолько, насколько это необходимо, до определенной точки. Я полагаю, это то, что minWidth и maxWidth в .frame()

Я начал с этого, и, похоже, он работает:

struct TestView: View {
    var body: some View {
        VStack {
            Text("Title")
            Text("Message")
        }
        .background(
            Rectangle()
                .foregroundColor(Color.blue)
                .frame(minWidth: 0,
                       maxWidth: 270)
                
        )
    }
}

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

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

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

Таким образом, кажется, что если поместить рамку вокруг фона, минимальное / максимальное значение влияет только на этот фоновый вид. Если я затем попытаюсь разместить фрейм вокруг VStack, я получу следующее:

struct TestView: View {
    var body: some View {
        VStack {
            Text("Title")
            Text("Message")
        }
        .frame(minWidth: 0,
               maxWidth: 270)
        .background(
            Rectangle()
                .foregroundColor(Color.blue)

                
        )
    }
}

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

Несмотря на то, что я не думаю, что у меня есть что-то, что выталкивает его, он все равно выталкивает полную maxWidth.

Я также пробовал переместить рамку в текст, но это дает тот же результат. Каков правильный способ заставить VStack с фоном расти только вместе с его содержимым до maxWidth?

Спасибо!


person Jason Brady    schedule 22.02.2021    source источник


Ответы (1)


Ну, я тупой, буквально сразу после публикации я кое-что вспомнил о том, как порядок модификаторов в View имеет значение.

Я поставил рамку после фона, и все заработало.

struct TestView: View {
    var body: some View {
        VStack {
            Text("Title")
            Text("Message    abcdefghijklmnopqrstuvwxyz")
        }
        .background(
            Rectangle()
                .foregroundColor(Color.blue)
        )
        .frame(minWidth: 0,
               maxWidth: 270)
    }
}

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

Я оставлю свой вопрос здесь, на случай, если он когда-нибудь поможет кому-то другому.

person Jason Brady    schedule 22.02.2021