有没有更好的方法在 SwiftUI 中创建多列（数据表）列表视图

Posted 2023-02-23

【中文标题】有没有更好的方法在 SwiftUI 中创建多列（数据表）列表视图

【英文标题】：Is there a better way to create a multi-column (Data table) List view in SwiftUI

【发布时间】：2021-07-20 22:27:53

【问题描述】：

在下面编辑

我正在尝试将 JSON 文件呈现为数据表，类似于在数据库应用程序中看到的内容。到目前为止，我最好的结果来自列表的 HStack，但是这样做，每个列表都可以自行滚动（我也无法想象任何简单的方法来对列表进行排序。有没有办法创建这个数据库视图使用单个列表视图而不是多个列表视图效果？

顺便说一句，“SwiftDataTables”正是我想要实现的目标，尽管该 pod 似乎已经过时，并且没有足够的文档让我处理我的数据。

这是我目前正在使用的屏幕截图：

这是我正在使用的代码：

//
//  ContentView.swift
//  Shared
//
//  Created by Kyle Carroll on 7/19/21.
//

import SwiftUI
import SwiftDataTables

struct ContentView: View 

    @StateObject var bookStore : BookStore = BookStore(books:bookData)

    var body: some View 
            HStack(spacing: 0) 
                List 
                    ForEach (bookStore.books)  book in
                        ListCell3(book: book)
                    
                
                .listStyle(PlainListStyle())
                .frame(width: 75, height: nil, alignment: .center)
                List 
                    ForEach (bookStore.books)  book in
                        ListCell(book: book)
                    
                
                .listStyle(PlainListStyle())
                List 
                    ForEach (bookStore.books)  book in
                        ListCell2(book: book)
                    
                
                .listStyle(PlainListStyle())
        
    


struct ListCell: View 

    var book : Book

    var body: some View 
            HStack 
                Text(book.title)
        
    


struct ListCell2: View 

    var book : Book

    var body: some View 
            HStack 
                Text(book.author)
        
    


struct ListCell3: View 

    var book : Book

    var body: some View 
            HStack 
                Text(book.id)
        
    


struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        if #available(ios 15.0, *) 
            ContentView()
                .previewInterfaceOrientation(.landscapeLeft)
         else 
            // Fallback on earlier versions
        
    

编辑：

我偶然发现我的 ListCell 结构在一行中列出了所有元素，它们之间有分隔符，但是，我不知道如何获得元素之间的定义间距。 HStack 中的全局“间距”会导致元素未对齐，因为每个单元格中的文本长度不同。我希望某些“列”具有不同的固定宽度。

    var book : Book

    var body: some View 
        HStack(alignment: .center, spacing: nil) 
                Text(book.id)
                Divider()
                Text(book.title)
                Divider()
                Text(book.author)
        
    

【问题讨论】：

是否有理由将它们放在单独的单元格中，而不是将 book.title、book.author 和 book.id 放在 HStack 中？

我将它们放在单独的单元格中，以便在不同列之间提供适当的间距（以及列之间垂直分隔符的可能性）。如果有办法在 HStack 中添加适当的分隔，我还没有发现。

【参考方案1】：

通过更改列表视图单元格结构的内容，我能够将每个属性放在一行中，然后使用修饰符将它们均匀地隔开，如下所示：

struct ListCell: View 

    var book : Book

    var body: some View 
        HStack(alignment: .center, spacing: nil) 
                Text(book.id)
                .frame(maxWidth: 50, alignment: .leading)
                Divider()
                Text(book.title)
                .frame(maxWidth: 200, alignment: .leading)
                Divider()
                Text(book.author)
                .frame(maxWidth: 200, alignment: .leading)