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

Question

我可以將所有視圖都包含在一個列表中

List {
   // contents
}

但這似乎是垂直滾動。 我如何使它水平？

Answer 1

您需要將.horizontal屬性添加到滾動視圖。 否則它不會滾動。

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

Answer 2

從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 3

要制作水平滾動內容，您可以將HStack包裝在ScrollView ：

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

Answer 4

您可以使用 .horizo​​ntal 屬性並使用自定義元素。 對我來說，我使用 cusomt CircleView

  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)