extended_nested_scroll_view

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

고정 헤더와 동기화된 내부 스크롤 가능한 요소와 관련된 일반적인 문제를 해결하기 위해 내장된 NestedScrollView를 확장하는 플러터 패키지입니다. 특히 헤더가 고정된 상태에서 내부 콘텐츠가 스크롤될 때 부드러운 스크롤링 동작을 보장합니다. 여러 스크롤 가능한 섹션을 가진 접히는 헤더와 같은 복잡한 UI에 적합합니다. 이 패키지는 fluttercandies.com에서 유지보수되며 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼을 지원합니다.

사용 사례

고정 헤더가 있는 복잡한 레이아웃
중첩 스크롤 뷰에서의 동기화 스크롤링
접을 수 있는 헤더 디자인
다중 섹션 스크롤 가능한 인터페이스
사용자 정의 스크롤 조정
동적 콘텐츠를 갖춘 반응형 UI

주요 기능

고정 헤더 동기화 문제를 수정합니다
모든 플러터 플랫폼을 지원합니다
개선된 스크롤 조정
기존 NestedScrollView와의 간편한 통합
중첩 스크롤을 위한 최적화된 성능
기본 NestedScrollView 기능을 확장합니다

적합한 대상

고급 스크롤 가능한 UI를 구축하는 개발자
접을 수 있거나 고정된 헤더를 가진 앱
신뢰할 수 있는 중첩 스크롤 동작이 필요한 팀
다중 플랫폼에서의 UI 중심 애플리케이션
안정적인 스크롤 동기화를 원하는 플러터 개발자

고려 사항

NestedScrollView 메커니즘에 대한 이해가 필요합니다
간단한 스크롤 사례에 약간의 오버헤드를 추가할 수 있습니다
복잡한 스크롤 계층 구조에 가장 적합
기본 스크롤 가능한 레이아웃에는 필요하지 않습니다
스크롤 동기화 외의 사용자 정의 기능이 제한적

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Language: English | 中文简体

NestedScrollView: extended nested scroll view to fix following issues.

1.pinned sliver header issue

2.inner scrollables in tabview sync issue

3.do without ScrollController in NestedScrollView's body

Web demo for ExtendedNestedScrollView

extended_nested_scroll_view
Example for issue 1
Example for issue 2
- ExtendedVisibilityDetector
Do without ScrollController in NestedScrollView's body

Example for issue 1

give total height of pinned sliver headers in pinnedHeaderSliverHeightBuilder callback

 var tabBarHeight = primaryTabBar.preferredSize.height;
      var pinnedHeaderHeight =
          //statusBar height
          statusBarHeight +
              //pinned SliverAppBar height in header
              kToolbarHeight;

    ExtendedNestedScrollView(
        pinnedHeaderSliverHeightBuilder: () {
          return pinnedHeaderHeight;
        }
       )   ,

Example for issue 2

We usually keep list scroll position with following:

scene	onlyOneScrollInBody	description
AutomaticKeepAliveClientMixin	true	ScrollPosition will not be disposed, set onlyOneScrollInBody to true so that we can know which list is isActived.
PageStorageKey	false	ScrollPosition will be disposed, PageStorageKey just record the position info,the scroll positions in ExtendedNestedScrollView will always single one.

    ExtendedNestedScrollView(
       onlyOneScrollInBody: true,
    )

ExtendedVisibilityDetector

Provide ExtendedVisibilityDetector to point out which list is visible

   ExtendedVisibilityDetector(
      uniqueKey: const Key('Tab1'),
      child: ListView(),
   )

Do without ScrollController in NestedScrollView's body

due to we can't set ScrollController for list in NestedScrollView's body(it will breaking behaviours of InnerScrollController in NestedScrollView),provide Demos
pull to refresh
load more
scroll to top

show how to do it without ScrollController
pinned header height

show how to change pinned header height dynamically.

패키지, 저장소 및 앱 카테고리 검색