Question

我有一个列表，该列表是从使用SwiftUI构建的已解析CSV文件中加载的，我似乎找不到一种水平滚动列表的方法。

List {
    // Read each row of the array and return it as arrayRow
    ForEach(arrayToUpload, id: \.self) { arrayRow in
        HStack {
            // Read each column of the array (Requires the count of the number of columns from the parsed CSV file - itemsInArray)
            ForEach(0..<self.itemsInArray) { itemNumber in
                Text(arrayRow[itemNumber])
                    .fixedSize()
                    .frame(width: 100, alignment: .leading)
            }
        }
    }
}
.frame(minWidth: 1125, maxWidth: 1125, minHeight: 300, maxHeight: 300)
.border(Color.black)

列表显示了我想要的样子，但是我只是停留在这一点上。

Preview Image Of Layout

Answer 1

迅速5 ； iOS 13.4

您应该按照Vyacheslav Pukhanov的建议使用ScrollView，但是在您的情况下，异步调用数据到达后，滚动视图的大小不会更新。因此，您有2个选择：

提供默认值或替代视图。
为ForeEach内部的HStack提供固定大小。（我用了这个）

我遇到了同样的问题，即将水平的网格分为两列。这是我的解决方法

import SwiftUI

struct ReviewGrid: View {
    @ObservedObject private var reviewListViewModel: ReviewListViewModel

init(movieId: Int) {
    reviewListViewModel = ReviewListViewModel(movieId: movieId)
    //ReviewListViewModel will request all reviews for the given movie id
}

var body: some View {
    let chunkedReviews = reviewListViewModel.reviews.chunked(into: 2)
    // After the API call arrive chunkedReviews will get somethig like this => [[review1, review2],[review3, review4],[review5, review6],[review7, review8],[review9]]
    return ScrollView (.horizontal) {
            HStack {
                ForEach(0..<chunkedReviews.count, id: \.self) { index in
                    VStack {
                        ForEach(chunkedReviews[index], id: \.id) { review in
                            Text("*\(review.body)*").padding().font(.title)
                        }
                    }
                }
            }
            .frame(height: 200, alignment: .center)
            .background(Color.red)
    }
}

}

这是一个虚拟的例子，不要期望花哨的观点;）

希望对您有帮助。

Answer 2

为此，您应该使用水平ScrollView而不是列表。

ScrollView(.horizontal) {
    VStack {
        ForEach(arrayToUpload, id: \.self) { arrayRow in
            HStack {
                ForEach(0..<self.itemsInArray) { itemNumber in
                    Text(arrayRow[itemNumber])
                        .fixedSize()
                        .frame(width: 100, alignment: .leading)
                }
            }
        }
    }
}

列表视图-是否可以水平滚动？

2 个答案: