如何使 SwiftUI 中的文本在旋转框架的同时出现在侧面？

Question

目标是拥有如下所示的东西：

我知道.rotationEffect()以及此处提供的解决方案。

然而，这个解决方案的问题是它不旋转框架，它只旋转文本本身。

下图来自 Xcode 中的 Canvas 预览及其下面的代码。

HStack(spacing: 10) {
    Text("Distance")
        .rotationEffect(.degrees(270))
        .foregroundColor(.black)
        .minimumScaleFactor(0.01)

    Rectangle()
         .foregroundColor(.black)
         .frame(width: 3)
         .padding([.top, .bottom])
    Spacer()
}

正如您所看到的，文本超出了框架，框架保持其原始宽度，这使得文本很难紧贴视图的一侧，也很难让垂直线紧贴文本的一侧。

我能够弄清楚如何获得所需结果的唯一方法是使用修饰符.offset(x:)。但这感觉很混乱，并且我认为可能会导致错误。

有什么办法可以让框架随着文字一起旋转吗？

Answer 1

如果我们谈论动态检测，那么我们需要在旋转之前测量文本框架并应用于更改宽度/高度的框架尺寸

注意：当然，在简化的变体中，帧宽度可以只是硬编码

这是主要部分：

@State private var size = CGSize.zero

var body: some View {
    HStack(spacing: 10) {
        Text("Distance")
            .fixedSize()                  // << important !!
            .background(GeometryReader {
                Color.clear
                    .preference(key: ViewSizeKey.self, value: $0.frame(in: .local).size)
            })
            .onPreferenceChange(ViewSizeKey.self) {
                self.size = $0                        // << here !!
            }
            .rotationEffect(.degrees(270))
            .frame(width: size.height, height: size.width) // << here !!

使用的偏好键：

public struct ViewSizeKey: PreferenceKey {
    public typealias Value = CGSize
    public static var defaultValue = CGSize.zero
    public static func reduce(value: inout Value, nextValue: () -> Value) {
    }
}

GitHub 上的测试模块/依赖项