swift - 在 WatchOS 中使用列表时滚动行为不正确

Question

行为#1:我试图在获得元素列表之前获得文本并使所有内容都紧密地滚动。我尝试在很多方面更改代码，但最终得到了不同的错误行为。这是behavior_1的代码:

struct Thing: Hashable {
    var name: String
    var number: Int
}
struct SummaryView: View {
    var things = [Thing(name: "Paul", number: 42),Thing(name: "Jackie", number: 41),Thing(name: "James", number: 49),Thing(name: "Paola", number: 22)]
    var body: some View {
        VStack(alignment: .leading){
            Text("Text 1")
            Text("Text 2")
            Text("Text 3")
            Text("Text 4")
            List{
                ForEach(self.things, id: \.self){ thing in
                    VStack(alignment: .leading){
                        Text(thing.name)
                        Text("\(thing.number) Years")
                            .foregroundColor(Color.blue)
                    }
                    .padding()
                    .frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.leading)
                }
            }
            Spacer()
            NavigationLink(destination: Text("HI")){
                Text("Finished")
            }

        }.edgesIgnoringSafeArea(.bottom)
    }
}

这使得屏幕上有一小部分是列表并且是可滚动的:这意味着我一次只能看到大约 1 个列表元素，并且我只能 ScrollView 的该部分(元素列表中的)。

行为#2:我还尝试将列表放入 ScrollView 中，这导致了 behavior_2，其中有两个不同的可滚动区域:第一个是包含文本的区域(“Text 1”等... )和列表的容器/ View (意味着我无法滚动各个元素)，第二个滚动区域是列表中的实际元素，但一旦到达顶部元素，滚动部分就不会继续到文本等:

import SwiftUI

struct Thing: Hashable {
    var name: String
    var number: Int
}
struct SummaryView: View {
    var things = [Thing(name: "Paul", number: 42),Thing(name: "Jackie", number: 41),Thing(name: "James", number: 49),Thing(name: "Paola", number: 22)]
    var body: some View {
        ScrollView{
            VStack(alignment: .leading){
                    Text("Text 1")
                    Text("Text 2")
                    Text("Text 3")
                    Text("Text 4")
                    List{
                        ForEach(self.things, id: \.self){ thing in
                            VStack(alignment: .leading){
                                Text(thing.name)
                                Text("\(thing.number) Years")
                                    .foregroundColor(Color.blue)
                                }
                            .padding()
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.leading)
                        }
                    }.aspectRatio(contentMode: .fit)
                Spacer()
                NavigationLink(destination: Text("HI")){
                    Text("Finished")
                }

            }

        }.edgesIgnoringSafeArea(.bottom)
    }
}

我还尝试使用 VStack 切换 ScrollView 以获得如下内容:

VStack(alignment: .leading){
    ScrollView {
           .
           .
           .
    }
}

其行为类似于behavior_2:

有关如何获得所需行为的任​​何建议(当您滚动经过文本时，然后滚动列表元素(这意味着您滚动得越多，看到的文本就越少)，直到到达列表底部等)？

当然，我不需要实现一个新的“列表” View ，然后使用 foreach 循环来迭代元素

Answer 1

如果您将 4 个 Text 放入 List 中，它将随之滚动。 Spacer 也是不必要的:

var body: some View {
    VStack(alignment: .leading) {
        List {
            VStack {
                Text("Text 1")
                Text("Text 2")
                Text("Text 3")
                Text("Text 4")
            }   .padding()
            ForEach(self.things, id: \.self){ thing in
                VStack(alignment: .leading){
                    Text(thing.name)
                    Text("\(thing.number) Years")
                        .foregroundColor(Color.blue)
                }   .padding()
            }
        }
        NavigationLink(destination: Text("HI")){
            Text("Finished")
        }

    }.edgesIgnoringSafeArea(.bottom)
}