如何在 SwiftUI 中制作水平列表？

Question

我可以将所有视图包含在一个列表中

List {
   // contents
}

但这似乎是垂直滚动。我如何让它水平？

Answer 1

要制作可水平滚动的内容，您可以将 HStack 包裹在 ScrollView 中：

ScrollView {
  HStack {
    ForEach(0..<10) { i in
      Text("Item \(i)")
      Divider()
    }
  }
}
.frame(height: 40)

Answer 2

您需要将 .horizontal 属性添加到滚动视图。否则它不会滚动。

ScrollView (.horizontal, showsIndicators: false) {
     HStack {
         //contents
     }
}.frame(height: 100)

Answer 3

从 iOS 14 beta1 和 XCode 12 beta1 开始，您将能够将 LazyHStack 包裹在 ScrollView 中以创建一个水平的惰性项目列表，即，每个项目将仅按需加载：

ScrollView(.horizontal) {
            LazyHStack {
                ForEach(0...50, id: \.self) { index in
                    Text(String(index))
                        .onAppear {
                            print(index)
                        }
                }
            }
        }

Answer 4

您可以使用 .horizontal 属性并使用自定义元素。对我来说，我使用自定义 Circle View

  var body: some View {
        VStack{
            Divider()
            ScrollView(.horizontal){
                HStack(spacing:10){
                    ForEach(0..<10){
                        index in
                        CircleView(label: "\(index)")
                    }
                }.padding()
            }.frame(height:100)
            Divider()
            Spacer()
        }
        
    }
}

    //struct CircleView:View
    @State var label:String
    var body:some View {
        ZStack{
            Circle()
                .fill(Color.yellow)
                .frame(width: 70, height: 70)
            Text(label)
        }
    }
}

Answer 5

我正在使用 Swift 版本 5

List(items) { item in
    Text("\(item.name)")
}.scrollOptions(direction: .horizontal, showsIndicators: true)

如何在 SwiftUI 中制作水平列表？

How to make a Horizontal List in SwiftUI?

ios

swiftui