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

Question

我想构建一个如下图所示的菜单，我可以在菜单之间滚动。我确实在 ScrollView 中尝试了 HStack/VStack 和 Text and/or 堆栈上的旋转修饰符的多种组合。但是，none 我的尝试确实按预期工作。

尝试 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", "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 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, maxHeight: .infinity)
            }
            .ignoresSafeArea(.all, edges: .bottom)
        }
    }
}

结果

问题

我确实尝试了其他方法，并从这两个概念派生出微小的变化。但据我了解，问题来自于使用旋转修饰符，它旋转内容，而不是视图本身（导致不需要的行为）。

感谢您的帮助！

Answer 1

也许这样更接近图片：

struct ContentView: View {
                                                                      // added this space
    let sections = ["Exclusives", "Apple", "Android", "Videos", "Got a leak ?", ""].reversed()
    
    var body: some View {
        HStack { 
            // Menu using HStack 
        ScrollView(.horizontal) {
            HStack(spacing: 32) {
                ForEach(sections, id: \.self) { section in
                    Text(section)
                        .padding().border(.red)
                }
            }
        }.rotationEffect(.degrees(-90), anchor: .center)
            VStack(spacing: 0) {
                // Header
                Rectangle()
                    .fill(Color(UIColor.quaternaryLabel))
                    .frame(height: UIScreen.main.bounds.width * 0.2)
                // Vertical Content
                HStack(spacing: 0) {
                    // Content Placeholder
                    Rectangle()
                        .fill(Color(UIColor.tertiarySystemFill))
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
            }
        }.ignoresSafeArea(.all, edges: .bottom)
    }
}

Answer 2

我确实找到了一个很好的解决方案，使用尝试 2 并使用@robniper 旋转整个文本视图这里有详细的答案：

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

How to build scrollable side menu using text rotation (or something similar) in SwiftUI?

swift

swiftui

vstack

hstack

swiftui-scrollview

尝试 1

代码

结果

尝试 2

代码

结果

问题