如何在SwiftUI中制作粘条?

jecbmhm3  于 2023-03-28  发布在  Swift
关注(0)|答案(5)|浏览(132)

我是SwiftUI的新手,仍然不明白如何在List顶部制作粘滞条。就像苹果音乐应用程序中列出艺术家或歌曲时的字母一样(看example)。
我探索了ListNavigationView的能力,但一无所获。😔

jhdbpxl9

jhdbpxl91#

LazyVStack提供了一个带有pinnedView参数的初始化器,它可以完成这一任务。

wqsoz72f

wqsoz72f2#

LazyVStack初始化器中使用pinnedViews

LazyVStack(pinnedViews: [.sectionHeaders]) {
    Section(header: Text("Sticky Header")) {
        ForEach(0...3) { item in
            Text(item)
        }
    }
}
ix0qys7i

ix0qys7i3#

SwiftUI’s列表视图内置了对节和节标题的支持,就像UIKit中的UITableView一样。要在某些单元格周围添加节,请先在其周围放置Section
我们要做的是创建一个包含两个部分的列表视图:一个用于重要任务,一个用于不太重要的任务。

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Important tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }

            Section(header: Text("Other tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }
        }
    }
}
gxwragnw

gxwragnw4#

您可以在List上使用List样式.listStyle(PlainListStyle()),并在iOS 13 +上使用Section
例如

struct ContentView: View {
  var content = MyData()
    var body: some View {
      List {
        ForEach(content.sections, id: \.title) { section in
          Section(content: {
            ForEach(section.rows, id: \.self) { row in
              Text(row)
            }
          }, header: {
            Text(section.title)
          })
        }
      }
      .listStyle(PlainListStyle())
    }
}

给定:

struct MyData {
  struct Section {
    var title: String
    var rows: [String]
  }

  var sections: [Section] = []
}
voj3qocg

voj3qocg5#

这是更容易的方法来使用粘头尝试这种方法,让我知道它的工作...

struct LatestMagazineView: View {
    @Environment(\.dismiss) var dismiss
    let columns = [GridItem(.flexible()),GridItem(.flexible())]
    @State  var searchText: String = ""
    var body: some View {
        
        ZStack {
            VStack(spacing:0) {
                Color.orange.ignoresSafeArea().frame(height: 25)
                ScrollView{
                    VStack(spacing: 0){
                        
                        AsyncImage(url: URL(string: "")){img in
                            img.resizable().frame(height: 225)
                            
                        }placeholder: {
                            Image("Anoop").resizable().frame(height: 225)
                        }
                        Image("soft").resizable().frame(width: UIScreen.main.bounds.width, height: 65, alignment: .leading)
                        
                        
                        LazyVGrid(columns: columns, spacing: 10, pinnedViews: [.sectionHeaders]){
                            Section(header:
                                        VStack{
                                TextField("Enter Search Text...", text: $searchText).font(.title)
                                
                                    .padding(4)
                                    .padding(.leading,searchText.isEmpty ? 29 : 4)
                                
                                    .foregroundColor(.white)
                                
                                    .cornerRadius(8)
                                    .overlay(
                                        RoundedRectangle(cornerRadius: 22)
                                            .stroke(Color.white, lineWidth: 2)
                                    )}.padding(6).background(Color.yellow)
                            ) {
                                ForEach(0..<21){_ in
                                    VStack(alignment: .leading){
                                        AsyncImage(url: URL(string: "")){ img in
                                            img .resizable()
                                                .frame(height: 255)
                                        }placeholder: {
                                            Image("soft")
                                                .resizable()
                                                .frame(height: 255)
                                        }
                                    }.padding(8).background(Color.white).cornerRadius(4).shadow(radius: 1)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

相关问题