Получение VStack для уменьшения до минимальной ширины при содержании текста SwiftUI

#swiftui #frame #vstack

#swiftui #фрейм #vstack

Вопрос:

Я все еще новичок в 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)

                
        )
    }
}
 

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

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

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

Спасибо!

Ответ №1:

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

Я поместил фрейм после фона, и это сработало.

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

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

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