ListView

 

ListView

ListView 는 가장 일반적으로 사용되는 스크롤 위젯입니다. 스크롤 방향으로 자식을 차례로 표시합니다.

교차축에서 하위 항목은 ListView 를 채워야 합니다 .

 

null이 아닌 경우 itemExtent 는 하위 항목이 스크롤 방향으로 지정된 범위를 갖도록 강제합니다.

null이 아닌 경우  prototypeItem 하위 요소가 스크롤 방향에서 지정된 위젯과 동일한 범위를 갖도록 강제합니다.

 

 

ListView 4가지 

1. 기본 생성자는 자식의 명시적인 List<Widget>을 사용합니다. 이 생성자는 하위 수가 적은 목록 보기에 적합합니다. 목록 을 구성하려면 실제로 표시되는 하위 항목만이 아니라 목록 보기에 표시될 수 있는 모든 하위 항목에 대해 작업을 수행해야 하기 때문입니다.
2. ListView.builder 생성자는 요청에 따라 하위 항목을 빌드하는 IndexedWidgetBuilder 를 사용합니다 . 이 생성자는 실제로 표시되는 하위 항목에 대해서만 빌더가 호출되므로 하위 항목 수가 많거나 무한한 목록 보기에 적합합니다.
3. ListView.separated 생성자는 두 개의 IndexedWidgetBuilder 를 사용합니다 . 즉 , 요청 시 하위 항목을 빌드하고 유사하게 하위 항목 사이에 나타나는 구분 기호 하위를 빌드합니다 itemBuilderseparatorBuilder 이 생성자는 고정된 수의 하위 항목이 있는 목록 보기에 적합합니다.
4. ListView.custom 생성자 는 하위 모델의 추가 측면을 사용자 정의하는 기능을 제공하는 SliverChildDelegate 를 사용합니다 . 예를 들어 SliverChildDelegate 는 실제로 표시되지 않는 어린이의 크기를 추정하는 데 사용되는 알고리즘을 제어할 수 있습니다.

 

 

 

ListView

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

 

ListView.builder

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

Widget build(BuildContext context) {
  return ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: entries.length,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        height: 50,
        color: Colors.amber[colorCodes[index]],
        child: Center(child: Text('Entry ${entries[index]}')),
      );
    }
  );
}

 

 

 

 

ListView.separated

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

Widget build(BuildContext context) {
  return ListView.separated(
    padding: const EdgeInsets.all(8),
    itemCount: entries.length,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        height: 50,
        color: Colors.amber[colorCodes[index]],
        child: Center(child: Text('Entry ${entries[index]}')),
      );
    },
    separatorBuilder: (BuildContext context, int index) => const Divider(),
  );
}

 

 

https://youtu.be/KJpkjHGiI5A