SliverList class
주축을 따라 선형 배열로 여러 개의 상자 자식을 배치하는 슬라이버입니다.
슬리버에 대해 자세히 알아보려면 CustomScrollView.slivers를 참조하세요.
각 자식은 교차 축에서 SliverConstraints.crossAxisExtent 를 가져야 하지만 자체 주 축 범위를 결정합니다.
SliverList는 슬라이버의 가시 영역 밖에 있는 자식 요소들이 구체화되지 않았기 때문에 "추측 항법"을 통해 스크롤 오프셋을 결정합니다. 즉 , SliverList는 해당 자식 요소들의 주축 범위를 학습할 수 없습니다. 대신, 새롭게 구체화된 자식 요소들은 기존 자식 요소들 옆에 배치됩니다.
자식 요소의 주축에 고정된 범위가 있는 경우 SliverList 대신 SliverFixedExtentList 를 사용하는것이 좋습니다.SliverFixedExtentList는 자식 요소의 주축에서 범위를 얻기 위해 레이아웃을 수행할 필요가 없으므로 더 효율적입니다.
자식 요소의 주축에 고정된 범위가 있는 경우 SliverFixedExtentList를 사용하는 것이 좋습니다. SliverFixedExtentList는 자식 요소의 주축에서 범위를 얻기 위해 레이아웃을 수행할 필요가 없으므로 더 효율적입니다.
SliverGrid class
여러 개의 상자 자식을 2차원 배열로 배치하는 슬라이버입니다.
슬리버에 대해 자세히 알아보려면 CustomScrollView.slivers를 참조하세요.
SliverGrid는 gridDelegate 에 의해 결정되는 임의의 위치에 자식 요소를 배치합니다. 각 자식 요소는 gridDelegate 에 지정된 크기를 가져야 합니다.
그리드의 주축 방향은 스크롤되는 방향이고, 교차축 방향은 직교 방향입니다.
공식 문서 코드
저번 포스팅도 마찬가지로 이번에도 CustomScrollView 안에서 사용가능한 위젯이 되겠다. 특이한 게 SliverList 는 예제가 없다.. (솔직히 없어도 되긴한다) 암튼 이번에도 간단히 알아보자.
일단 CustomScrollView 안에서 사용되기 때문에 작성 위치는 이러하다.
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
// TODO
]
),
),
],
),
SliverList 는 필수값으로 delegate 를 받는데 이제 여기다가 SliverChildListDelegate 혹은 SliverChildBuilderDelegate 배치해서 사용해 주면 되겠다. 근데 BuilderDelegate 쎌빠엔 그냥 Sliver.builder 사용해서 itemBuilder 로 배치하는 게 내 생각엔 훨씬 편해 보이긴 한다. 뭐 솔직히 취향 차이니까 어련히 잘 쓸 거라고 생각하겠다.
그다음은 SliverGrid 다.
이것도 작성 위치는 동일한데 얘는 필수 값으로 두 개를 받는다.
CustomScrollView(
slivers: [
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
// TODO
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container();
},
childCount: 20,
),
)
],
),
어째서냐면 Grid 이기 때문에 각 아이템마다 크기와 간격등을 필수로 지정해줘야 하기 때문이다. 다른 하나는 SLiverList 와 같은 delegate 를 받는데 이것도 SliverChildListDelegate 혹은 SliverChildBuilderDelegate 중에 선택해서 사용하면 된다. 그리고 아까도 말했지만 .builder 로 가져오면 delegate 가 아니라 itemBuilder 를 가져오기 때문에 훨씬 수월하게 제작할 수 있다.
하위 속성 (SliverList)
| 속성명 | 타입 | 기본값 | 설명 |
| delegate | SliverChildDelegate | - | 자식 위젯 생성을 제어하는 위임 객체 |
| itemBuilder | NullableIndexedWidgetBuilder | - | 각 인덱스에 대해 위젯을 생성하는 함수 |
| separatorBuilder | NullableIndexedWidgetBuilder | - | 항목 사이에 삽입할 위젯을 생성하는 함수 |
| itemCount | int? | - | 생성할 항목 수를 지정 |
| findChildIndexCallback | ChildIndexGetter? | 자식의 인덱스를 찾는 데 사용되는 콜백 | |
| addAutomaticKeepAlives | bool | true | KeepAlive 위젯을 자동으로 추가할지 여부 |
| addRepaintBoundaries | bool | true | 각 자식에 RepaintBoundary를 추가할지 여부 |
| addSemanticIndexes | bool | true | 자식 위젯에 접근성 인덱스를 부여할지 여부 |
| children | List<Widget> | - | 정적인 자식 위젯 리스트 |
하위 속성 (SliverGrid)
| 속성명 | 타입 | 기본값 | 설명 |
| delegate | SliverChildDelegate | - | 자식 위젯 생성을 제어하는 위임 객체 |
| gridDelegate | SliverGridDelegate | - | 그리드의 배치와 크기를 정의하는 델리게이트 |
| itemBuilder | NullableIndexedWidgetBuilder | - | 각 인덱스에 대해 위젯을 생성하는 함수 |
| itemCount | int? | - | 생성할 항목 수 |
| findChildIndexCallback | ChildIndexGetter? | - | 자식 위젯의 인덱스를 찾는 콜백 함수 |
| addAutomaticKeepAlives | bool | true | 자동으로 KeepAlive 위젯을 추가할지 여부 |
| addRepaintBoundaries | bool | true | 각 자식에 RepaintBoundary를 적용할지 여부 |
| addSemanticIndexes | bool | true | 접근성을 위한 인덱스를 부여할지 여부 |
| children | List<Widget> | [] | 정적으로 정의된 자식 위젯 목록 |
| crossAxisCount | int | - | 고정 열 수 (SliverGrid.count 생성자용) |
| maxCrossAxisExtent | double | - | 열 너비의 최대값 (SliverGrid.extent 생성자용) |
| mainAxisSpacing | double | 0.0 | 행 간의 간격 |
| crossAxisSpacing | double | 0.0 | 열 간의 간격 |
| childAspectRatio | double | 1.0 | 자식 위젯의 가로세로 비율 |
암튼 이렇게 간단하게 SliverList & SliverGrid 에 대해서 알아보았다. CustomScrollView 에서도 그냥 위젯 배치하게 만들어 놨으면 얼마나 좋았을까.. 하는 그런 마음이지만 뭐 이렇게 만들어 놓았으니 우린 이것에 대하여 감사하는 마음으로 사용해야 한다..
도움이 되었길 바라며 마치겠다.
