如何使用放置在列表上方的 VStack 使整个视图可滚动

Question

目前我的视图只允许列表本身可以滚动。 有谁知道如何通过放置在 VSTACK 下方的列表使整个视图可滚动？

var body: some View {
        VStack {
                ZStack{
                    Circle()
                        .stroke(Color.black, lineWidth: 5)
                        .frame(width: 150, height: 150)
                    Text("Score")
                        .font(.system(size: 20))
                        .bold()
                }.padding(.bottom, 30)
                Text("Friends")
                    .bold()
                    .font(.system(size: 24))
                    List{
                        ForEach(allFriends) { item in
                            HStack{
                                    ZStack{
                                        Circle()
                                            .fill(LinearGradient(gradient: Gradient(colors: [Color("LightBlue"), Color("LightPink"), Color("LightYellow")]), startPoint: .bottom, endPoint: .top))
                                            .frame(width: 60, height: 60)
                                        Text(item.emoji)
                                            .font(.system(size: 40))
                                    }.padding(.trailing, 40)
                                    Text(item.name)
                                        .font(.system(size: 20))
                                        .bold()
                            }
                        }
                    }
            }
        }
    }

struct ProfilePage_Previews: PreviewProvider {
    static var previews: some View {
        ProfilePage()
    }
}

Answer 1

这里有 2 个可能的解决方案。 (1) 将 header 放在 List 中，或者 (2) 使用 ScrollView 而不是 List。 （您必须将 ForEach 循环更改回您的数据数组。）

struct ProfilePage: View {
    var body: some View {
        putHeaderWithinList
        // OR
        //useScrollViewInsteadOfList
    }
    
    var putHeaderWithinList: some View {
        VStack {
            List{
                VStack {
                    ZStack{
                        Circle()
                            .stroke(Color.black, lineWidth: 5)
                            .frame(width: 150, height: 150)
                        Text("Score")
                            .font(.system(size: 20))
                            .bold()
                    }.padding(.bottom, 30)
                    Text("Friends")
                        .bold()
                        .font(.system(size: 24))
                }
                .frame(maxWidth: .infinity)

                ForEach(0..<10) { index in
                    HStack{
                        ZStack{
                            Circle()
                                .fill(LinearGradient(gradient: Gradient(colors: [Color("LightBlue"), Color("LightPink"), Color("LightYellow")]), startPoint: .bottom, endPoint: .top))
                                .frame(width: 60, height: 60)
                            Text("\(index)")
                                .font(.system(size: 40))
                        }.padding(.trailing, 40)
                        Text("\(index)")
                            .font(.system(size: 20))
                            .bold()
                    }
                }
            }
        }
    }
    
    var useScrollViewInsteadOfList: some View {
        ScrollView {
            VStack {
                
                ZStack{
                    Circle()
                        .stroke(Color.black, lineWidth: 5)
                        .frame(width: 150, height: 150)
                    Text("Score")
                        .font(.system(size: 20))
                        .bold()
                }.padding(.bottom, 30)
                Text("Friends")
                    .bold()
                    .font(.system(size: 24))

                ForEach(0..<10) { index in
                    VStack {
                        Divider()
                        HStack{
                            ZStack{
                                Circle()
                                    .fill(LinearGradient(gradient: Gradient(colors: [Color("LightBlue"), Color("LightPink"), Color("LightYellow")]), startPoint: .bottom, endPoint: .top))
                                    .frame(width: 60, height: 60)
                                Text("\(index)")
                                    .font(.system(size: 40))
                            }.padding(.trailing, 40)
                            Text("\(index)")
                                .font(.system(size: 20))
                                .bold()
                        }
                    }
                }
            }
        }
    }
        
}