목록보기
ListView: 명시적 목록에서 위젯의 스크롤 가능한 선형 배열을 만듭니다. 이 생성자는 소수의 자식이 있는 목록 보기에 유용합니다. 목록을 작성하려면 실제로 표시되는 자식뿐만 아니라 목록 보기에 나타날 수 있는 각 자식에 대해 작업을 수행해야 하기 때문입니다.
→ ListView의 생성자에 요소(ListTile)를 직접 구현하여 ListView를 구성하는 방법입니다. 위젯이 생성되면 모든 자식이 생성되어 목록 보기에 표시됩니다. 모든 항목이 생성되어 목록 보기에 등록되면 목록 보기가 화면에 표시됩니다.
자녀 수가 적은 경우에 적합합니다.
body: ListView(
children: <Widget>(
ListTile(
//leading. 타일 앞에 표시되는 위젯. 참고로 타일 뒤에는 trailing 위젯으로 사용 가능
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
)
),
),
문제
하지만 1000개 또는 10,000개 항목생성자를 통해 가지가 있는 목록을 만들 때 문제가 발생할 수 있습니다. 모든 항목이 생성되고 메모리에 로드된 후에 목록 보기가 표시되기 때문에 많은 시간과 리소스가 소모됩니다.그것은해야한다. 그리고 대부분의 경우 사용자는 목록의 일부만 본 후 앱을 포기할 가능성이 더 큽니다. 그래서 그때 제가 사용하고 있는 것은 ListView.builder입니다.
ListView.빌더
ListView.builder 요청 시 구축되는 스크롤 가능한 선형 위젯 배열을 구축합니다. 빌더는 실제로 보이는 자식에 대해서만 호출되기 때문에 이 생성자는 자식 수가 많은(또는 무한한) 목록 보기에 적합합니다.
- 게으른 목록: SD 카드 또는 서버에서 이미지를 천천히 로드합니다. 수시로 이미지를 불러오는 방식입니다.
ListView.builder는 요청 시 리포지토리 또는 서버에서 파일을 로드합니다. 그래서 많은 수의 파일을 불러올 때 이것을 사용하는 것이 좋습니다. 인스타그램을 시작할 때 전 세계 사람들의 모든 피드를 로드하면 휴대폰이 폭발할 것입니다. 하지만 이 위젯을 사용하면 표시 부분만 파일을 불러옵니다. 통화를 효율적으로 할 수 있습니다.
많은 양의 아이템을 사용할 때 적합합니다.
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${items(index)}'),
);
},
),
- 조각의 수 : 로드할 목록 보기의 수를 지정합니다. 번호로 나열. 일반적으로 변수의 길이는 숫자로 열거해야 하므로 사용합니다. 예) 기사.길이
- 아이템 빌더 : ListView에서 빌드할 컴포넌트입니다.
목록보기 분리
ListView.separated는 ListView.builder에 구분선을 추가한 형태입니다.
afeArea(
child: ListView.separated(
itemCount: datas.length,
itemBuilder: (BuildContext context, int index) {
return DemoListTile(datas(index));
},
// Divider 로 구분자 추가.separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
);
}
}
참고
https://velog.io/@juni416/ListView-vs-ListView.builder – 차이점