Question

因此，我正在SwiftUI中实现UI，并在以下图片的最左端一直无法实现小的“标题标签”。基本上，我有一个旋转90度的标题以显示在选项卡的侧面，并且我希望用户能够输入自定义标题，因此我需要标题区域能够动态调整大小。但是我也将其嵌入到HStack中，只希望它占用少量空间，而不是全部空间。当我实现layoutPriority时，它会减小标题区域占用的水平空间，但是如果标题文本占用的空间比HStack中的其他元素更多，它将不再垂直扩展。如果我删除layoutPriority，它会垂直扩展以显示所需的完整标题文本，但也会占用我不想要的HStack的三分之一。有什么方法可以实现吗？

                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的大小存储在父级中，与是否使用它无关紧要。否则，父级将无法正确布局。

动态调整元素的一个尺寸

1 个答案: