1

I write the following code and display data into Hstack on scrollview

in my case, I receive 10 items from a service call and shown those in Hstack When the user enters into screen first time first 5 days are visible,

But I need to show the last 5 dates first.

Need to visible last index first time(when entering into the screen).

i.e need to show current days first

HStack(alignment:.center){
                GeometryReader{ proxy in
                    ScrollView(.horizontal) {
                        
                        LazyHStack {
                            ForEach(days.indices, id: \.self) { i in
                                CalendarView(
                                    number: days[i].number,
                                    days: days[i].weekday,
                                    color: days[i].isToday ? #colorLiteral(red: 0.9060331583, green: 0.2547450066, blue: 0.3359550834, alpha: 1) : #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1),
                                    textcolor: days[i].isToday ? #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1) : #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1), proxy: proxy
                                )
                                .onTapGesture{
                                    print(days[i])
                                    // this is just for replacing the current selection
                                    for j in days.indices { days[j].isToday = false }
                                    days[i].isToday = true
                                }
                            }
                        }
                    }
                }
            }
            .padding([.trailing,.leading],3)

1 Answers1

1

Use ScrollViewReader

HStack(alignment:.center){
    GeometryReader{ proxy in
        ScrollView(.horizontal) {
            ScrollViewReader { value in // <== Here
                LazyHStack {
                    ForEach(days.indices, id: \.self) { i in
                        CalendarView(
                            number: days[i].number,
                            days: days[i].weekday,
                            color: days[i].isToday ? #colorLiteral(red: 0.9060331583, green: 0.2547450066, blue: 0.3359550834, alpha: 1) : #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1),
                            textcolor: days[i].isToday ? #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1) : #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1), proxy: proxy
                        )
                        .id(i) // <== Here
                        .onTapGesture{
                            print(days[i])
                            // this is just for replacing the current selection
                            for j in days.indices { days[j].isToday = false }
                            days[i].isToday = true
                        }
                    }
                }.onAppear(){ // <== Here
                    value.scrollTo(days.count - 1) // <== Here
                }
            }
        }
    }
}
.padding([.trailing,.leading],3)
Raja Kishan
  • 16,767
  • 2
  • 26
  • 52