• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

ForEach 의 값을 어레이에서 받아왔는데요. 스크롤뷰리더로 감싸면 리프레쉬가 안됩니다.

21.04.25 01:07 작성 조회수 197

0

선생님^^ 스크롤뷰를 만들고 그안에

포이치로 값을 죽~ 보이게 했어요. 그 값은 모델에서 불러오는데요.

어레이에 어펜드를 하면 자동으로 스크롤뷰가 갱신이 되고 맨 아래 새로운 값이 추가되서 보이더라구요. 그런데 그 값이 화면을 넘어가면 가려져서 바로는 안보이고 손으로 스크롤을 해야 보입니다.

그래서 배운데로 스크롤뷰리더로 포이치구문을 감싸고 

scrollTo 를 이용해서 .bottom 이 되도록해서 

어레이에 새로 추가된 값이 항상 화면에 보이게 하고 싶은데요.

스크롤뷰리더를 사용하면 어레이 값을 처음에 딱 한번만 불러오고

추가로 어펜드 된 값들이 보이지를 않습니다. 왜그런 걸까요???

답변 1

답변을 작성해보세요.

0

안녕하세요

질문만 보고는 어떤 문제인지 확인이 어렵기 때문에

버튼을 누르면 데이터 추가하는 부분과

onChange를 통해서 데이터가 추가되는 순간을 캐치해서 아래로 내려가는 부분을 간단히 만들어봤습니다. 

코드 보시고 참고하시면 될 것 같습니다.

struct ContentView: View {

    struct DummyModel: Hashable {

        var number = 0

    }

    

    @State private var pxy: ScrollViewProxy?

    

    @State private var models = [DummyModel]()

    @State private var number = 0

    

    var body: some View {

        

        VStack{

            Button("Scroll To " + (self.models.last?.number.description ?? "")) {

                withAnimation(.easeInOut) {

                    pxy?.scrollTo(self.models.count - 1, anchor: .bottom)

                }

            }

            Button("add Data") {

                self.models.append(DummyModel( number: number))

                number += 1

            }

            

            ScrollViewReader(content: { proxy in

                ScrollView{

                    ForEach(0..<models.count, id: \.self) { index in

                        Text("\(models[index].number)")

                            .padding()

                    }

                }

                .onAppear(perform: {

                    self.pxy = proxy

                })

                .onChange(of: self.models, perform: { value in

                    withAnimation(.easeInOut) {

                        pxy?.scrollTo(self.models.count - 1, anchor: .bottom)

                    }

                })

            })

        }

    }

}