How to make whole View scrollable with VStack placed above a List

user_13079468 0
Viewed 109

Currently my view only allows for the list to be scrollable by itself. Does anyone know how to make a whole view scrollable with a list placed below a 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()
    }
}
swiftui swift
1 Answers

Here are 2 possible solutions. (1) put the header within the List, or (2) use a ScrollView instead of a List. (You'll have to change the ForEach loop back to your data array.)

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()
                        }
                    }
                }
            }
        }
    }
        
}
user_112799710
Related