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

Question

我想构建一个菜单，如下图所示，我可以在菜单之间滚动。我确实尝试了在 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", "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

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