Apple TV应用SwiftUI分类菜单设计适配问题求助

方案1：实现原生Settings风格菜单 #

原生Apple TV设置菜单的核心是利用List配合NavigationStack（tvOS 16+），复用系统默认交互与样式，无需过度自定义：

import SwiftUI

struct SettingsCategoryView: View {
    let categories: [String]
    @Binding var selectedCategory: String
    
    var body: some View {
        NavigationStack {
            List(categories, id: \.self) { category in
                Button(action: {
                    selectedCategory = category
                }) {
                    Text(category)
                        .font(.title2)
                        .foregroundColor(selectedCategory == category ? .white : .secondary)
                }
                .listRowBackground(selectedCategory == category ? Color(.systemBlue) : Color.clear)
                .listRowInsets(EdgeInsets(top: 12, leading: 20, bottom: 12, trailing: 20))
            }
            .listStyle(.plain)
            .navigationTitle("设置")
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var selectedCategory = "通用"
    let categories = ["通用", "显示与亮度", "声音", "应用"]
    
    var body: some View {
        SettingsCategoryView(categories: categories, selectedCategory: $selectedCategory)
    }
}

• 关键细节：
  • 用.plain列表样式配合系统默认焦点交互，自动适配tvOS操作逻辑
  • 选中行设系统蓝色背景，未选中行用Color.clear避免多余底色
  • 文字颜色区分选中/未选中状态，贴合原生视觉规范

方案2：修复现有代码的灰色栏问题 #

如果要保留自定义样式，灰色栏通常来自List默认行背景、容器填充或ScrollView底色，可按以下方式修改：

场景1：用VStack替代List自定义布局 #

若之前用List导致默认灰色行，直接改用VStack+Button完全自定义：

struct SettingsCategoryView: View {
    let categories: [String]
    @Binding var selectedCategory: String
    
    var body: some View {
        VStack(spacing: 8) {
            ForEach(categories, id: \.self) { category in
                Button(action: {
                    selectedCategory = category
                }) {
                    Text(category)
                        .font(.title2)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.vertical, 12)
                        .padding(.horizontal, 20)
                }
                .background(selectedCategory == category ? Color(.systemBlue) : Color.clear)
                .cornerRadius(8)
            }
        }
        .padding()
        .background(Color.black)
    }
}

场景2：保留List但清除默认背景 #

若必须用List，强制清除行背景并使用纯列表样式：

List(categories, id: \.self) { category in
    // 按钮内容
}
.listStyle(.plain)
.listRowBackground(Color.clear)
.background(Color.black)

焦点状态适配补充 #

tvOS需确保焦点样式正确，可通过.focused()修饰符自定义焦点效果：

@FocusState private var focusedCategory: String?

Button(action: { selectedCategory = category }) {
    Text(category)
}
.focused($focusedCategory, equals: category)
.background(focusedCategory == category ? Color.blue.opacity(0.8) : Color.clear)

内容的提问来源于stack exchange，提问作者LevelOne2k