Flutter 마스터하기: 사용자 정의 스크롤 보기

이 튜토리얼에서는 CustomScrollView 위젯과 그 슬라이버를 사용하여 사용자 정의 스크롤 효과를 얻는 방법을 배웁니다. 사용자 지정 스크롤 보기는 특정 스크롤 효과를 개발하거나 ScrollView의 스크롤 콘텐츠를 더 많이 제어하려는 경우에 특히 유용합니다.

그렇다면 슬리버는 무엇일까요? 문서에서:

A sliver is a portion of a scrollable area. You can use slivers to achieve custom scrolling effects.

슬라이버는 RenderSliver 개체를 생성해야 하는 특정 위젯이며 CustomScrollView의 자식입니다.

ListView와 GridView는 모두 CustomScrollView를 사용하고 내부적으로 위젯을 슬라이버합니다.

Flutter에서 제공하는 유용한 Sliver는 다음과 같습니다.

SliverAppBar : 이 슬라이버는 앱 바를 렌더링하며 일반적으로 사용자 지정 스크롤의 첫 번째 자식으로 사용됩니다. 사용자의 스크롤에 따라 높이를 변경하도록 구성할 수 있습니다.

SliverGrid : 위젯 그리드를 렌더링하는 슬라이버

SliverList 및 SliverFixedExtentList : scrollview 내에서 목록을 렌더링하는 슬라이버. 목록의 고정 범위 버전은 하위 항목의 높이/너비를 계산할 필요가 없기 때문에 더 효율적입니다

.

SliverToBoxAdapter : 상자 위젯을 포함하는 슬라이버, 사용자 정의 스크롤 보기 내부에 위젯을 포함하려는 경우 유용합니다

.

SliverPadding : 다른 슬라이버에 패딩을 적용하는 슬라이버.

첫 번째 사용자 정의 스크롤 보기를 빌드해 보겠습니다.

CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Custom Scroll View'),
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.amber,
                  child: Text('$index'),
                );
              },
              childCount: 20,
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  child: Text(' $index'),
                );
              },
            ),
          )

이것은 다음을 포함하는 간단한 스크롤 뷰입니다.

상단의 앱바

그리드

목록

결과는 다음과 같습니다.

Check it out here

NotificationListener 및 ScrollNotification

사용자 정의 스크롤 보기를 사용할 때 특히 유용한 다른 위젯은 NotificationListener ScrollNotification 입니다. 사용자가 ScrollController를 사용하지 않고 스크롤할 때 이 위젯을 사용하여 이벤트를 수신할 수 있습니다.

NotificationListener 내부에 CustomScrollView를 래핑해 보겠습니다.

NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          print(notification);
          return true;
        },
        child: CustomScrollView(
...
)

이제 사용자가 스크롤 뷰와 상호 작용할 때마다 onNotification 콜백이 ScrollNotification과 함께 호출되며 알림 정보를 사용하여 위젯의 레이아웃을 변경하거나 데이터를 관리할 수 있습니다.
사용자가 스크롤 보기의 내용 끝에 도달하면 더 많은 데이터를 로드할 수 있습니다.
구현해 봅시다.

          onNotification: (notification) {
            if (notification is ScrollEndNotification) {
              // We use 20 as our threshold to load more data
              if (notification.metrics.extentAfter < 20) {
                print('Load more data');
              }
            }
            return true;
          },

더 멋진 튜토리얼을 확인하려면 here을 클릭하십시오!