[ Flutter ] 리스트

SingleChildScrollView

💬  SingleChildScrollView는 하나의 자식 위젯만 가질 수 있다.

💬  Column을 자식 위젯으로 설정하면 표시할 위젯의 크기만큼 가로 길이를 가지며, ListBody를 사용하면 스크롤 가능 영역이 가로로 꽉 차기 때문에 사용자가 스크롤하기 더 쉬워진다.

예제

final items = List.generate(100, (i) => i).toList();  // 0부터 99까지의 값을 갖는 리스트 생성

SingleChildScrollView(
  child: ListBody(
    children: items.map((i) => Text('$i')).toList(),
  ),
),

 

ListView, ListTile

💬  SingleChildScrollView와 ListBody의 조합과 동일한 효과를 내지만, 좀 더 리스트 표현에 최적화된 위젯이다.

💬  ListTile 위젯을 사용하여 리스트 아이템을 쉽게 작성할 수 있다.

💬  ListView의 children 프로퍼티에 다수의 위젯을 배치하면 정적인 리스트를 쉽게 만들 수 있다.

💬  ListTile 위젯

    ◽  아이콘이나 글자를 leading (왼쪽), title (중앙), trailing (오른쪽)에 위치시킬 수 있다.

    ◽  onTap 프로퍼티에는 리스트의 항목을 터치했을 때 실행하는 동작을 정의한다.

예제

ListView(
  scrollDirection: Axis.vertical,
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.home),
      title: Text('Home'),
      trailing: Icon(Icons.navigate_next),
      onTap: () { },
    ),
    ListTile(
      leading: Icon(Icons.event),
      title: Text('Event'),
      trailing: Icon(Icons.navigate_next),
      onTap: () { },
    ),
    ListTile(
      leading: Icon(Icons.camera),
      title: Text('Camera'),
      trailing: Icon(Icons.navigate_next),
      onTap: () { },
    ),
  ],
),

 

List.generate

List.generate(
  itemList.length,
  (index) => _buildItem(itemList[index]),
),

◽  length 길이만큼 0부터 index - 1까지 범위의 각 인덱스를 오름차순으로 호출하여 만든 값으로 리스트를 생성

 

ListView.separated

ListView.separated(
  separatorBuilder: (context, index) => Divider(
    height: 0,
    indent: 16,     // 구분선 앞부분 margin
    endIndent: 16,  // 구분선 뒷부분 margin
    color: Colors.grey,
  ),
  itemBuilder: (context, index) {
    return Item(
      item: itemList[index]
    );
  },
  itemCount: itemList.length,
),

◽  ListView 아이템들 사이에 구분선을 주는 위젯을 설정할 수 있다.

 

CheckboxListTile

💬  체크박스가 있는 리스트를 만들고 싶을 때 사용한다.

CheckboxListTile(
  title: const Text('Animate Slowly'),
  secondary: const Icon(Icons.hourglass_empty),
  value: _check,
  onChanged: (value) {
    setState(() {
      _check = value;
    }
  },
),

 

SwitchListTile

💬  토글이 있는 리스트를 만들고 싶을 때 사용한다.

SwitchListTile(
  title: const Text('Light'),
  secondary: const Icon(Icons.lightbulb_outline),
  value: _lights,
  onChanged: (value) {
    setState(() {
      _lights = value;
    }
  },
),

 

ExpansionPanelList

💬  접었다 펼 수 있는 리스트를 만들고 싶을 때 사용한다.

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {
    action(index, isExpanded);
  },
  children: _data.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return _header(item);
      },
      body: _body(item),
      isExpanded: item.isExpanded,
    );
  }).toList(),
);