如何在visionOS中于主视图外部添加可滚动日语音节列表？

直接用SwiftUI的ScrollView(.horizontal)配合HStack就能实现你要的横向滚动音节列表，以下是完整实现代码：

核心代码示例 #

import SwiftUI

struct SignDictMainView: View {
    // 定义あ到を的日语音节数组
    private let japaneseSyllables = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ",
                                    "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と",
                                    "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ",
                                    "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "ら", "り",
                                    "る", "れ", "ろ", "わ", "を"]
    
    var body: some View {
        VStack(spacing: 0) {
            // 你的主视图内容，替换成实际业务代码
            ZStack {
                Color.gray.opacity(0.1)
                Text("SignDict 主内容区域")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            // 底部横向滚动音节栏
            Divider()
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 16) {
                    ForEach(japaneseSyllables, id: \.self) { syllable in
                        Text(syllable)
                            .font(.title2)
                            .padding(.vertical, 8)
                            .padding(.horizontal, 12)
                            .background(Color.accentColor.opacity(0.1))
                            .cornerRadius(8)
                            .hoverEffect(.lift) // VisionOS专属悬浮交互效果
                            .onTapGesture {
                                // 点击音节后的业务逻辑，比如跳转对应手语条目
                                print("选中音节：\(syllable)")
                            }
                    }
                }
                .padding(.horizontal, 20)
                .padding(.vertical, 10)
            }
            .frame(height: 60)
            .background(Color.systemBackground)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    SignDictMainView()
}

关键说明 #

• 布局结构：用VStack将主内容区域与底部滚动栏垂直拼接，主内容区域通过frame(maxWidth: .infinity, maxHeight: .infinity)占满剩余空间，确保滚动栏固定在底部
• 横向滚动：ScrollView(.horizontal)启用横向滚动，showsIndicators: false隐藏默认滚动条（可根据需求开启）
• 交互优化：添加hoverEffect(.lift)适配VisionOS的空间交互，让音节项在悬浮时产生抬起效果，提升沉浸式体验
• 自定义样式：可以修改Text的字体、背景色、圆角等属性，匹配你的App设计风格

如果需要更复杂的单元格布局，直接替换HStack内的Text为自定义View即可，完全满足类似UICollectionView的自定义需求。

内容的提问来源于stack exchange，提问作者Antonio A. Chavez