ios ScrollViews和NavigationStacks可以在SwiftUI中一起工作吗？

mlmc2os5 于 2023-06-25 发布在 iOS

关注(0)|答案(1)|浏览(85)

我最近开始在SwiftUI上开发（因此问题很简单），所以作为布局的练习，我试图重新创建苹果自己的音乐应用程序。我面临的主要问题是NavigationStack和缺乏资源，考虑到它是多么新。
我编写了以下代码来复制Library选项卡：

NavigationStack{
    
    List(menuCategories) {
        menuCategory in NavigationLink(value: menuCategory
        ){
            Label{
                Text(menuCategory.name)
                    .font(.title2)
            } icon:{ Image(systemName: menuCategory.imageName).foregroundStyle(.red)
            }
        }
        .padding(.horizontal, -20)
        
    }.navigationDestination(for: MenuCategory.self) {
        menuCategory in
        Text(menuCategory.name)
    }
    
    
    ScrollView(.vertical, showsIndicators: true){
        
        VStack(alignment: .leading){
            
            Text("Recently Added")
                .font(.headline)
                .padding(.horizontal, 20.0)
            
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 130), spacing: 20)]
            ){
                ForEach(recentAlbums, id: \.self) {
                    
                    item in
                    VStack(alignment: .leading){
                        ZStack{
                            Color(item.color)
                            Text(item.name)
                        }
                        
                        .cornerRadius(10)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                        .aspectRatio(1.0, contentMode: .fit)
                        
                        Text(item.name)
                        Text(item.artist)
                            .foregroundStyle(Color(.gray))
                    }
                    .padding(.bottom, 10.0)
                    .font(.body)
                    .lineLimit(1)
                }
            }
            .padding(.horizontal, 20.0)
            
        }
        .navigationTitle("Library")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button("Edit") {
                    self.screen = 0;
                }
            }
        }
    }
}
.scrollContentBackground(.hidden)
.tabItem {
    Image(systemName: "play.square.stack")
    Text("Library")
}

以下是它的外观预览：

问题是，在预览版和模拟器上，顶部列表（艺术家，专辑等）和底部网格（最近添加的专辑）有单独的滚动，所以整个页面不能向下滚动，你可以滚动任何一个区域，见下面屏幕截图的底部区域作为示例：

我试图将顶部的List移动到ScrollView中，但是整个List消失了，只有Grid显示在屏幕上。我试着移动不同的元素，但还没有找到一个组合，工作还没有。任何帮助将不胜感激。
谢谢你！

ios

来源：https://stackoverflow.com/questions/76523617/can-scrollviews-and-navigationstacks-work-together-in-swiftui

1条答案

按热度按时间

epfja78i1#

根据我的经验，如果你使用List和其他任何东西一起使用，很难得到任何好的结果。所以我建议两种选择之一：
1.仅使用List。它不必包含所有相同的项目。你可以把你的链接放在上面，LazyVGrid放在下面，例如：

struct HorizontalRow: View { // <-- first item type in the list
    
    var text: String
    var systemName: String
    
    var body: some View {
        HStack {
            Text(text)
            Image(systemName: systemName)
        }
    }
}

struct GridView: View { // <-- second item type in the list
    
    var recentAlbums = [ "A", "B", "C" ]
    
    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 130), spacing: 20)]){
            ForEach(recentAlbums, id: \.self) { item in
                VStack {
                    Image(systemName: "mic")
                    Text(item)
                }
            }
        }
    }
}

struct MainScreenView: View { 
    
    var listItems = ["One", "Two", "Three"]
    
    var body: some View {
        List { // <-- the list with different items
            ForEach(listItems, id: \.self) { item in
                HorizontalRow(text: item, systemName: "keyboard")
            }
            GridView()
        }
    }
}

1.将列表替换为ScrollView { LazyVStack {，并将元素（包括网格）直接放置在LazyVStack中。如果你想完全控制事情的外观，这是更好的。但缺点是你需要在list已经有样式的地方提供更多样式。

赞(0）回复(0）举报 2023-06-25

我来回答

ios ScrollViews和NavigationStacks可以在SwiftUI中一起工作吗？

1条答案

相关问题

热门标签

最新问答