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

Posted 2023-02-23

【中文标题】如何在 SwiftUI 中制作水平列表？

【英文标题】：How to make a Horizontal List in SwiftUI?

【发布时间】：2019-06-10 08:17:50

【问题描述】：

我可以将我的所有视图都包装在一个列表中

List 
   // contents

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

【问题讨论】：

见developer.apple.com/tutorials/swiftui/…

【参考方案1】：

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

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

【讨论】：

这不是一个列表，它会同时呈现所有内容

看看这个 - youtube.com/watch?v=TU2lR1qAe_k&t=24s

【参考方案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)
                        
                
            
        

【参考方案3】：

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

ScrollView 
  HStack 
    ForEach(0..<10)  i in
      Text("Item \(i)")
      Divider()
    
  

.frame(height: 40)

【讨论】：

这不会重用view-s，所以不确定它是否可以解决。另外，我没有看到任何水平列表的例子，也许我们需要等待一下:)

我不确定 List 是否正确地重用了这些项目）

@Markicevic Apple 教程也使用相同的方法来制作水平滚动内容，正如 DenFav 所说，我们不确定 List 的重用。但是，下一个测试版肯定会有改进！

同意我们还不确定 List 是否重用了 view-s，但不确定它怎么可能不重用，我的意思是为什么有 list，我们可以在里面有 Scroll 和 VStack ，为什么还要有List。我同意在屏幕上显示水平项目是正确的，但不确定它是否可以作为列表工作。 SwiftUI 仍有很多值得学习的地方。

我检查了层次结构，看起来List 是建立在UITableView 之上的，它也回收了单元格； ScrollView 中的 HStack 不会回收，如果您尝试调试层次结构，您将看到滚动视图边界之外的所有视图

【参考方案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)
        
    

【参考方案5】：

我正在使用 Swift 版本 5

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

【讨论】：

没有名为scrollOptions的选项