如何在 SwiftUI 中使用文本旋转或类似的东西构建可滚动的侧边菜单？

问题描述

我想构建一个如下图所示的菜单，我可以在其中滚动菜单。我确实尝试了 ScrollView 中的 HStack/vstack 和文本和/或堆栈上的旋转修饰符的多种组合。但是，我的任何尝试都没有真正按预期工作。

尝试 1

代码

struct ContentView: View {

    let sections = ["Exclusives","Apple","Android","Videos","Got a leak ?"].reversed()

    var body: some View {
        vstack(spacing: 0) {
        
            // Header
            Rectangle()
                .fill(Color(UIColor.quaternaryLabel))
                .frame(height: UIScreen.main.bounds.width * 0.2)
        
            // Vertical Menu + Content
            HStack(spacing: 0) {
            
                // Menu using vstack and rotation on Text
                ScrollView(.vertical) {
                    vstack(spacing: 32) {
                        ForEach(sections,id: \.self) { section in
                            Text(section)
                                // padding added on workingdog suggestion.
                                // But steal not producing exactly what I'm looking for. ?
                                .padding()
                                .rotationEffect(.degrees(-90),anchor: .center)
                        }
                    }
                }
            
                // Content Placeholder
                Rectangle()
                    .fill(Color(UIColor.tertiarySystemFill))
                    .frame(maxWidth: .infinity,maxHeight: .infinity)
            }
            .ignoresSafeArea(.all,edges: .bottom)
        }
    }
}

结果

尝试 2

代码

struct ContentView: View {

    let sections = ["Exclusives","Got a leak ?"].reversed()

    var body: some View {
        vstack(spacing: 0) {
        
            // Header
            Rectangle()
                .fill(Color(UIColor.quaternaryLabel))
                .frame(height: UIScreen.main.bounds.width * 0.2)
        
            // Vertical Menu + Content
            HStack(spacing: 0) {
            
                // Menu using rotation on HStack
                ScrollView(.vertical) {
                    HStack(spacing: 32) {
                        ForEach(sections,id: \.self) { section in
                            Text(section)
                        }
                    }
                    .rotationEffect(.degrees(-90),anchor: .center)
                }
            
                // Content Placeholder
                Rectangle()
                    .fill(Color(UIColor.tertiarySystemFill))
                    .frame(maxWidth: .infinity,edges: .bottom)
        }
    }
}

结果

问题

我确实尝试了其他方法，但对这两个概念进行了细微更改。但据我所知，问题来自使用旋转修饰符，它旋转内容，而不是视图本身（导致不需要的行为）。

感谢您的帮助！

解决方法

也许这更接近图片：

var--

,

我确实找到了一个很好的解决方案，使用 Attempt 2 并使用 @robniper 旋转整个 Text 视图，详细答案在这里：https://stackoverflow.com/a/59802487/5541378