인프런 커뮤니티 질문&답변
작성한 질문수
웹 배포 시 리스트뷰 스크롤 불가
해결된 질문
작성
·
148
0
Home에 게시글이 많을 때 스크롤 기능을 위해 column에 스크롤 기능을 ON 하고 테스트 시, 테스트 모드에서는 스크롤 기능이 정상 동작 합니다.
그런데 웹 배포 후 웹으로 접속하면 마우스 스크롤이 동작하지 않고 아래 화면처럼 게시글 일부가 잘린 상태로 보여집니다! 핸드폰으로 웹 접속 시에도 동일합니다.
이것저것 찾아보다가 listview primary도 ON/OFF 해봤는데 차이가 없네요. 해결 방법이 궁금합니다!
답변 2
0
안녕하세요 우오앙님,
저도 스크롤 에러가 자주 나고, 잘 안 될 때 감으로 시행착오를 통해 수정하는데요.
다음과 같은 테크닉을 여러가지 시도해 보시면 어떨까요?
1. 최상위column에서 scrollable 제외
2. (만약 존재한다면) 스크롤할 컨테이너를 expansion:expanded
3. 그 컨테이너 아래 컬럼이나 리스트뷰에 scrollable&Primary
여러가지 케이스로 한번 시도해 보시면 좋을 것 같습니다.
만약 그럼에도 잘 안되시면 one@fearnotproduct.com 으로 프로젝트 공유를 부탁 드리겠습니다!
감사합니다.
안녕하세요 우오앙님~
해당 사항 Fix하여 반영하였습니다.
다음 사항을 참고하시면 되겠습니다.
모바일 한정, Listview의 부모는 높이가 무한한 Column이 아니라 높이가 제한된 Container밑에 있어야 합니다. 그래야 스크롤이 됩니다.
이 때, 최상위칼럼은 Scrollable ON, Primary OFF 으로 세팅합니다.
이 때 Container의 Expansion 속성은 Expanded 여야 합니다.
ListView의 Primary를 ON으로 합니다.
추가적으로, 텍스트가 짤리는 현상은 Expanded 속성을 수정해야 하는데요.
이것은 학습을 위해 제가 직접 하지 않았습니다.
아래 영상을 참고하시면 되겠습니다.
감사합니다.
답변 감사합니다!
다만, 1. container를 그대로 expanded로 설정하고 테스트 모드를 열면 backend queries에는 데이터가 잘 표출되지만 아래와 같이 Home 화면에 아무것도 현시되지 않습니다.
container를 default로 두고 테스트 모드를 열면 다음과 같이 보입니다
레이아웃을 변경하기 전(container 없이 컬럼 레이아웃) 저장된 테스트 모드를 불러오면 기존과 같이 테스트 모드에서는 정상 동작 합니다.
모바일 한정이라 하시면, 모바일/웹/테스트 모드가 각각 스크롤이 정상 동작하는 레이아웃 설정이 다르다는 뜻으로 이해하면 될까요??
예를 들어, 위에 답변해 주신 방법대로 레이아웃을 변경하면 모바일에서는 정상 동작 하고 테스트 모드에서는 스크롤이 동작하지 않을 수 있고, 반대로 다른 레이아웃을 적용하면 테스트 모드는 정상 동작 하는데 웹이나 모바일에서는 비정상 동작을 할 수도 있는건가요?
만약 그렇다면, 실제 앱 제작 시에는 어떤 모드를 기준으로 개발을 진행해야 하는지도 궁금합니다.
안녕하세요 우오앙님, 오래 기다려 주셔서 감사 드립니다.
이전에 안되었던 이유는 Container의 높이 제한이 있었기 때문이었습니다.
다음과 같은 방식으로 해결했습니다.
Container의 높이 제한을 없앴습니다.
Container의 레이아웃을 Expanded가 아닌, Flexible로 변경했습니다.
이렇게 하면, 컨텐츠가 없으면 없는대로 축소하고, 있으면 있는대로 길이를 늘어지게 됩니다.
간단한 원리였는데 저도 같이 헤맸네요.
프로젝트에 반영해 두었으니 확인해 보시면 되겠습니다.
감사합니다.
음... 이후 웹과 모바일 웹 접속 시 아래와 같이 화면에 아예 아무것도 안뜨고
테스트 모드 시 아래와 같이 기존과 똑같이 현시됩니다.
이것저것 시도해 보다가 다시 원복해 놨습니다.
강사님께서 작업 후 웹/모바일/테스트모드 확인 하셨을 때는 정상 동작 했나요...??ㅠㅠ
안녕하세요 우오앙님,
당시에 할 때는 되었는데, 다시 들어가보니 말씀 주신 대로 안되네요 ㅠㅠ
Container를 없애는 방식으로 다시 구현해 보았습니다.
Column에서 Scrollable 을 없애고, Listview에서 Shrink Wrap과 Primary를 ON 했습니다.
폰과 테스트모드에서 모두 확인해 보았으니, 프로젝트 한번 확인해 주세요 ㅎㅎ
0
안녕하세요, 인프런 AI 인턴입니다. 우오앙님, 웹 배포 시 발생하는 리스트뷰 스크롤 문제에 대해 안내 드리겠습니다.
문제의 원인 및 해결 방법
웹과 모바일 차이:
- 테스트 모드에서는 정상적으로 작동하였으나, 실제 웹에서 스크롤이 동작하지 않는 것은 주로 Column과 ListView 스크롤 설정의 차이에 기인할 수 있습니다. 특히 웹 플랫폼에서는 모바일과 다른 방식으로 스크롤 이벤트를 처리할 때 발생할 수 있는 문제입니다.
- 테스트 모드에서는 정상적으로 작동하였으나, 실제 웹에서 스크롤이 동작하지 않는 것은 주로 Column과 ListView 스크롤 설정의 차이에 기인할 수 있습니다. 특히 웹 플랫폼에서는 모바일과 다른 방식으로 스크롤 이벤트를 처리할 때 발생할 수 있는 문제입니다.
ListView 설정 확인:
- Primary 속성: ListView의
primary속성을 ON/OFF 하며 테스트하셨다고 하니, 이 외에도shrinkWrap속성을 사용하여 스크롤이 필요한 영역만 스크롤이 가능하도록 설정해보세요.
- ScrollPhysics: 웹에서는
ScrollPhysics를AlwaysScrollableScrollPhysics로 설정하여 강제로 스크롤 가능하도록 해보세요.
- Primary 속성: ListView의
FlutterFlow 설정 재검토:
- Column Properties: Column의 높이를 기기에 맞게 설정하고, height를 제한하지 않는 것이 중요합니다.
Expanded위젯을 활용하여 각 아이템이 제대로 표시되도록 해보세요.
- 웹 관련 버그 확인: 배포 환경에서의 특정 버그가 아닌지, 플러터플로우 혹은 관련 포럼에서 유사한 이슈가 있는지 확인합니다.
- Column Properties: Column의 높이를 기기에 맞게 설정하고, height를 제한하지 않는 것이 중요합니다.
유사한 사례 및 추가 자료
- 비슷한 문제와 해결 방법은 아래의 게시글에 참고하실 수 있습니다:
- “포스트 유저 컬렉션 만들고나서 오류 . .”
- 이 게시글에서는 웹 및 모바일 환경에서 데이터 관련 오류를 해결하는 데 필요한 접근 방법을 다루고 있습니다.
- “포스트 유저 컬렉션 만들고나서 오류 . .”
문제를 해결하는 데 도움이 되었으면 좋겠습니다. 스크롤 문제와 관련된 특정한 에러 메시지나 디버그 정보가 있다면, 추가적으로 공유해 주시면 더 구체적인 도움을 받을 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 해주신 내용 토대로 이것저것 시도해 본 결과, 이제 테스트 모드 및 웹으로 스크롤이 정상 동작 합니다. 다만, 같은 URL로 핸드폰으로 접속하면 스크롤이 동작하지 않습니다. 플러터플로우 자체 오류일까요...?
우선 프로젝트 공유 요청 드렸습니다 감사합니다!!