Динамическое изменение размера только одного измерения элемента

Question

Итак, я реализую пользовательский интерфейс в SwiftUI и не могу реализовать маленькую «вкладку заголовка» полностью слева на рисунке ниже. По сути, у меня есть заголовок, который поворачивается на 90 градусов для отображения на боковой стороне вкладки, и я хочу, чтобы пользователь мог вводить пользовательский заголовок, поэтому мне нужно, чтобы область заголовка могла динамически изменять размер. Тем не менее, я также включил его в HStack и хочу, чтобы он занимал небольшое количество места, а не целую треть. Когда я реализую layoutPriority, он уменьшает горизонтальное пространство, занимаемое областью заголовка, но больше не расширяется по вертикали, если текст заголовка занимает больше места, чем другие элементы в HStack. Если я удаляю layoutPriority, он расширяется по вертикали, чтобы отобразить полный текст заголовка, как я хочу, но также занимает целую треть HStack, что мне не нужно. Есть ли способ, который мне не хватает для реализации этого?

UIElement

                HStack{
                    EventTitleBackground(name:name).rotationEffect(.degrees(270))
                         .frame(minHeight: 0, maxHeight: .infinity)
                         .frame(minWidth: 0, maxWidth: .infinity)
                         .layoutPriority(2)


                    Spacer()

                    VStack(alignment: .leading){
                         Text(time)
                             .font(.title)
                         Spacer()
                         Text("\(truncatedLatitude)  \(truncatedLongitude)")
                             .font(.title)
                         Spacer()

                         Text("Altitude: \(truncatedAltitude)")
                             .font(.title)

                      }
                      .layoutPriority(4)

                      Spacer()

                     VStack(alignment: .leading){
                          HStack{
                              Text("BOBR: \(bobrLargeText)")
                                  .font(.title)
                              Text(" \(bobrSmallText)")
                                  .font(.body)
                      }
                          Spacer()
                          Text("Heading | Course: \(heading) | \(heading)")
                              .font(.title)
                          Spacer()
                          Text("Groundspeed: \(groundSpeed)")
                              .font(.title)

                     }
                      .layoutPriority(4)
                      Spacer()
                }

Answer 1

Предлагаю вам проверить этот простой пример. Нажав на прямоугольник, вы можете повернуть его, а с помощью ползунков вы можете изменить «ширину» прямоугольников. Честно говоря, он работает точно так же, как указано в документации Apple.

import SwiftUI

struct ContentView: View {
    @State var angle0 = Angle(degrees: 0)
    @State var angle1 = Angle(degrees: 0)

    @State var width0: CGFloat = 100
    @State var width1: CGFloat = 100

    var body: some View {
        VStack {
            HStack {
                Color.red.frame(width: width0, height: 50)
                    .onTapGesture {
                        self.angle0 += .degrees(90)
                }
                .rotationEffect(angle0).border(Color.blue)

                Color.green.frame(width: width1, height: 50)
                    .onTapGesture {
                        self.angle1 += .degrees(90)
                }
                .rotationEffect(angle1).border(Color.blue)

                Spacer()
            }
            Slider(value: $width0, in: 50 ... 200) {
                Text("red")
            }
            Slider(value: $width1, in: 50 ... 200) {
                Text("green")
            }
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

результат, вероятно, далеко от того, что вы ожидали ...

Давайте изменим часть красного цвета

Color.red//.frame(width: width0, height: 50)
    .onTapGesture {
        self.angle0 += .degrees(90)
}
.rotationEffect(angle0).border(Color.blue).frame(width: 50, height: width0)

и увидим разницу

Решением для вас может быть что-то вроде

import SwiftUI

struct VerticalText: View {
    let text: String
    @Binding var size: CGSize
    var body: some View {
        Color.red.overlay(
            Text(text).padding().fixedSize()
            .background(
                GeometryReader { proxy -> Color in
                    // avoid layout cycling!!!
                    DispatchQueue.main.async {
                        self.size = proxy.size
                    }
                    return Color.clear
                }
        ).rotationEffect(.degrees(-90))
        )
            .frame(width: size.height, height: size.width)
            .border(Color.green)
    }
}

struct ContentView: View {
    @State var size: CGSize = .zero
    var body: some View {
        HStack(alignment: .top) {
            VerticalText(text: "Hello, World!", size: $size)
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper eros non condimentum mattis. In hac habitasse platea dictumst. Mauris aliquam, enim eu vehicula sodales, odio enim faucibus eros, scelerisque interdum libero mi id elit. Donec auctor ipsum at dolor pellentesque, sed dapibus felis dignissim. Sed ac euismod purus, sed sollicitudin leo. Maecenas ipsum felis, ultrices a urna nec, dapibus viverra libero. Pellentesque quis est nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum luctus a est eget posuere.")
        }.frame(height: size.width)
            .border(Color.red).padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Смотрите, что размер VerticalText хранится в родительском, не имеет значения, используете вы его или нет. В противном случае родитель не будет правильно размещен.