ScrollView 中的 SwiftUI 列表

Question

我想在 ScrollView 中制作我的列表，以便我可以滚动列表行和 header 一起滚动。

但我发现 ScrollView 中的 List 不起作用。它什么也没显示。

我应该两者都用。

我应该使用 ScrollView，这样当我滚动行时，我的 header（图像或文本）也可以滚动。
我应该使用 List 来使用 .ondelete() 方法。

我的示例代码如下。

@State private var numbers = [1,2,3,4,5,6,7,8,9]

var body: some View {
    ScrollView {
        Text("header")
        List {
            ForEach(numbers, id: \.self) {
                Text("\([=10=])")
            }
            .onDelete { index in
                // delete item
            }
        }
    }
}

有人知道为什么会发生这种情况和（或）如何解决吗？

Answer 1

不需要两个滚动对象。您也可以为此使用部分：

@State private var numbers = [1,2,3,4,5,6,7,8,9]

var body: some View {
    List {
        Section.init {
            Text("Header")
        }
        ForEach(numbers, id: \.self) {
            Text("\([=10=])")
        }
        .onDelete { index in
            // delete item
        }
    }
}

Answer 2

只需将 header 放入列表中，如

var body: some View {
    List {
        Text("Header").font(.title)
        ForEach(numbers, id: \.self) {
            Text("\([=10=])")
        }
        .onDelete { index in
            // delete item
        }
    }
}

Answer 3

可以，但是在List全屏的时候不行

在代码示例中，我使用 GeometryReader 使列表尽可能大。但是您也可以删除 GeometryReader 并将固定尺寸插入 .frame()

struct ContentView: View {
    
    @State private var numbers = [1,2,3,4,5,6,7,8,9]
    
    var body: some View {
        GeometryReader { g in
            ScrollView {
                Text("header")
                List {
                    ForEach(self.numbers, id: \.self) {
                        Text("\([=10=])")
                    }
                    .onDelete { index in
                        // delete item
                    }
                }.frame(width: g.size.width - 5, height: g.size.height - 50, alignment: .center)
            }
        }
    }
}

ScrollView 中的 SwiftUI 列表

SwiftUI List inside ScrollView

ios

swift

swiftui-list

swiftui