文章/答案/技术大牛

发布

社区首页 >问答首页 >变量3列NavigationView SwiftUI

问变量3列NavigationView SwiftUI
EN

Stack Overflow用户

提问于 2021-02-14 15:23:40

回答 1查看 466关注 0票数 4

问题

我希望能够根据侧边栏选择来更改导航视图中的列数。也就是说，大多数视图将具有所需的3列布局(侧栏>列表>详细信息)，但其中一个视图将有两个列布局(侧栏>详细信息)。我试图直接在导航视图的顶层设置它，但是这并没有改变任何事情。

NavigationView{
    SidebarView()
    if selection != .explore {
          ListView()
    }
    DetailView()
}

在上面的例子中，如果选择是“探索”，那么应该只有一个侧边栏和一个详细视图。

对于如何实现这一点，有什么想法吗？

复制代码

我希望"searchView“占据全部宽度。意味着应该只显示一个侧栏和搜索视图。

在macOS或iPadOS上运行

import SwiftUI

enum SidebarSelection {
    case library
    case notes
    case search
}


struct ContentView: View {
    
    @State var selection : SidebarSelection? = SidebarSelection.library
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: ListView(), tag: SidebarSelection.library, selection: $selection){
                    Label("Library", systemImage: "book")
                }
                .tag(SidebarSelection.library)
                NavigationLink(destination: ListView(), tag: SidebarSelection.notes, selection: $selection){
                    Label("Notes", systemImage: "doc.text")
                }
                .tag(SidebarSelection.notes)
                NavigationLink(destination: SearchView(), tag: SidebarSelection.search, selection: $selection){
                    Label("Search", systemImage: "magnifyingglass")
                }
                .tag(SidebarSelection.search)
            }
            .listStyle(SidebarListStyle())
            
            Text("List View")
            
            if selection != .search {
                Text("Detail View")
            }
        }
    }
}

struct ListView: View {
    var body: some View{
        List {
            ForEach(0..<10){ index in
                NavigationLink(destination: Text("DetailView: \(index)")){
                    Text("Link to \(index) detail view")
                }
            }
        }
    }
}

struct SearchView: View {
    var body: some View {
        Text("Full width search view")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

swift

swiftui

回答 1

Stack Overflow用户

发布于 2022-09-14 03:42:37

实际上，您可以做的非常简单，要实现这一点，您只需对SwiftUI更加具体，并使用@ViewBuilder属性包装器即可。

struct ContentView: View {
    
    @ViewBuilder
    var body: some View {
        if(twoColumns == true){
            NavigationView{
                SidebarView()
                DetailView()
            }
        } else {
            NavigationView{
                SidebarView()
                ListView()
                DetailView()
            }
        }
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66196886

复制

相似问题

问变量3列NavigationView SwiftUI
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问变量3列NavigationView SwiftUIEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问变量3列NavigationView SwiftUI
EN