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

Posted 2023-02-24

【中文标题】在 WatchOS 中使用列表时滚动行为不正确

【英文标题】：Incorrect scroll behavior when using a list in WatchOS

【发布时间】：2019-10-21 03:51:47

【问题描述】：

行为 #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 个列表元素并且我只能滚动视图的该部分（元素列表中）。

行为 #2： 我还尝试将列表放在ScrollView 中，这导致了 behavior_2，其中有两个不同的可滚动区域：第一个是带有文本的区域（“Text 1”等......）和容器/列表的视图（意味着我不能滚动单个元素），第二个滚动区域是列表中的实际元素，但是一旦我到达顶部元素，滚动部分就不会继续到文本等：

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)
    

我也尝试将 ScrollView 与 VStack 切换为这样的：

VStack(alignment: .leading)
    ScrollView 
           .
           .
           .
    

这就像行为_2：

关于如何获得所需行为的任​​何建议（当您滚动过去文本时，您会滚动列表元素（这意味着您滚动得越多，看到的文本越少），直到到达列表底部等）？

当然不用我实现一个新的“列表”视图，然后使用 for each 循环遍历元素

【参考方案1】：

如果您将 4 个Texts 放入您的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)