tvOS 设置 UI 和转换

Question

我想做出与 tvOS 设置类似的视图。 我希望左侧的视图是静态的，而右侧的视图是可导航的。

我尝试使用NavigationSplitView，因为它一开始看起来像这样，但行为与它非常不同，我开始怀疑这个视图是根据系统控件的行为创建的还是毕竟是定制的。

这种行为可以通过系统控制来实现吗？还是我必须自己写这样的东西？

这就是它的样子

Answer 1

据我所知没有固定的选项，我已经重新编程了。

首先我创建了一个水平视图 HStack，元素间距为 0。

在这个 HStack 中，我创建了两个垂直视图 VStack，左边的一个我给出了屏幕 50% 的固定大小，右边的一个没有固定的大小，因为否则它会给列表带来问题（至少在我的情况下）

在右侧的VStack中我存储了NavigationStack，因此您可以在其中导航。

我是这样做的：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0){ //<- avoid space between both vstack
            VStack{
                Group{
                    RoundedRectangle(cornerRadius: 90, style: .circular)
                        .fill(.gray.opacity(0.3))
                        .frame(width: UIScreen.main.bounds.width * 0.3, height: UIScreen.main.bounds.width * 0.3)
                        .shadow(radius: 12)
                }
            }.frame(width: UIScreen.main.bounds.width * 0.5) //<- 50% of Screen for left part
            
            
            VStack{
                NavigationStack{
                    List{
                        ForEach(1..<5){setting in
                            NavigationLink {
                                Text("Your Setting!")
                            } label: {
                                Text("\(setting). Setting")
                            }
                        }
                    }
                    .listStyle(.grouped) //<- make list like your example gif
                }
            }
        }.background(.gray.opacity(0.2))
    }
}

#Preview {
    ContentView()
}