ListTile class
일반적으로 텍스트와 앞뒤 아이콘을 포함하는 고정 높이의 단일 행입니다.
목록 타일은 1~3줄의 텍스트를 포함하며, 선택적으로 아이콘이나 체크박스와 같은 다른 위젯이 측면에 배치됩니다. 타일의 아이콘(또는 다른 위젯)은 leading 및 trailing 매개변수로 정의됩니다. 첫 번째 텍스트 줄은 선택 사항이 아니며 title 로 지정합니다. 선택 사항 인 subtitle 은 추가 텍스트 줄에 할당된 공간을 차지하며, isThreeLine 이 true인 경우 두 줄을 차지합니다. dense 가 true인 경우, 이 타일의 전체 높이와 title 및 subtitle 위젯을 감싸는 DefaultTextStyle 의 크기가 줄어듭니다.
제목이 줄 바꿈되지 않도록 하고, subtitle이 줄 바꿈되지 않도록( isThreeLine 이 false인 경우) 또는 두 줄로 줄바꿈되도록(isThreeLine이 true인 경우) 하는 것은 호출자의 책임입니다 .
선행 및 후행 위젯 의 높이는 Material 사양에 따라 제한됩니다. 단, 한 줄 ListTiles는 접근성을 위해 예외가 적용됩니다. 아래 예시를 통해 Material 사양 및 접근성 요구 사항을 모두 준수하는 방법을 확인하세요.
앞뒤 위젯 은 원하는 만큼 수평으로 확장될 수 있으므로 적절히 제한해야 합니다.
목록 타일은 일반적으로 ListView 에서 사용되거나 Drawer 및 Card 의 Column 에 정렬됩니다.
공식 문서 코드
사용자들의 정보나 물건의 텍스트 정보 등등이 리스트 형태로 나열되어 있는 것을 본 적이 있을 것이다. 그러한 UI를 제작할 때 List + Row + Container 를 사용하여 만들 수도 있을 것이다. 하지만 이러한 일을 할 필요 없이 바로 사용할 수 있게 만들어둔 위젯이 있는데 바로 ListTile 이다.
이 ListTile 은 리스트 형태의 레이아웃을 만들 때 자주 사용하는 매우 유용한 위젯이다. 기본적으로 하나의 행(row)을 구성하게 되며 구성요소를 포함시킬 수 있다. 한번 알아보자. (하위 속성이 좀 심하게 많다.)
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| leading | Widget? | – | 제목 앞에 표시할 위젯 |
| title | Widget? | – | 리스트 항목의 주요 내용 |
| subtitle | Widget? | – | 제목 아래에 표시되는 추가 내용 |
| trailing | Widget? | – | 제목 뒤에 표시할 위젯 |
| isThreeLine | bool | false | 3줄 레이아웃을 사용할지 여부 |
| dense | bool? | null | 조밀한 레이아웃 적용 여부 |
| visualDensity | VisualDensity? | null | 타일의 레이아웃 밀도 |
| shape | ShapeBorder? | null | 타일 외곽의 모양 |
| selectedColor | Color? | null | 선택된 상태일 때 아이콘과 텍스트 색상 |
| iconColor | Color? | null | 기본 아이콘 색상 |
| textColor | Color? | null | 텍스트 색상 |
| titleTextStyle | TextStyle? | null | 제목의 텍스트 스타일 |
| subtitleTextStyle | TextStyle? | null | 서브타이틀의 텍스트 스타일 |
| leadingAndTrailingTextStyle | TextStyle? | null | leading과 trailing 텍스트 스타일 |
| style | ListTileStyle? | null | 타일의 스타일 설정 |
| contentPadding | EdgeInsetsGeometry? | null | 타일 내부 패딩 |
| enabled | bool | true | 타일을 활성화할지 여부 |
| onTap | GestureTapCallback? | – | 탭 이벤트 발생 시 호출 |
| onLongPress | GestureLongPressCallback? | – | 롱프레스 이벤트 발생 시 호출 |
| onFocusChange | ValueChanged<bool>? | – | 포커스 상태 변경 시 호출 |
| mouseCursor | MouseCursor? | null | 마우스 커서 스타일 |
| selected | bool | false | 선택 상태 여부 |
| focusColor | Color? | null | 포커스 상태일 때 배경색 |
| hoverColor | Color? | null | 호버 상태일 때 배경색 |
| splashColor | Color? | null | 터치 시 물결 효과 색상 |
| focusNode | FocusNode? | null | 포커스를 관리할 노드 |
| autofocus | bool | false | 자동으로 포커스할지 여부 |
| tileColor | Color? | null | 선택되지 않은 상태에서의 배경색 |
| selectedTileColor | Color? | null | 선택된 상태에서의 배경색 |
| enableFeedback | bool? | null | 제스처 인식 시 피드백 제공 여부 |
| horizontalTitleGap | double? | null | leading/trailing와 제목 사이의 간격 |
| minVerticalPadding | double? | null | 제목과 서브타이틀의 최소 수직 패딩 |
| minLeadingWidth | double? | null | leading 위젯의 최소 너비 |
| minTileHeight | double? | null | 타일의 최소 높이 |
| titleAlignment | ListTileTitleAlignment? | null | 제목 및 서브타이틀의 수직 정렬 방식 |
| internalAddSemanticForOnTap | bool | true | onTap 사용 시 접근성에 버튼 속성 추가 여부 |
하위 속성이 너무 많아서 뭔가 압도되지만 항상 그랬듯이 이번에도 사용하기 위해서 알아야 할 것은 별거 없다.
일단은 필수값은 존재하지 않는다. 즉 자기 마음대로 배치할 수 있도록 되어 있다는 것인데 그저 ListTile 의 용도는 그 기본 탬플릿을 제공해 주는 것이라고 생각하면 된다.
기본적인 구조부터 알아보자.
ListTile(
leading: Icon(Icons.account_circle),
title: Text('최최최최최'),
subtitle: Text('Flutter Developer 입니닷!'),
trailing: Icon(Icons.arrow_forward_ios),
onTap: () {
print('ListTile tapped!');
},
)하위 속성 표에도 다 나와 있지만 leading 에는 아이콘 같은 것을 배치하면 앞에 아이콘이 그대로 반영되게 된다.
title 은 중앙의 글자를 나타내는데 진짜 '중앙' 정렬을 하고 싶다면 그냥 Text 의 하위 속성인 textAlign 을 사용해서 정렬해 주면 그대로 반영이 된다. (isThreeLine 속성을 true 로 활성화해준다면 중앙 타이틀에 총 3개까지 배치할 수 있게 된다.)
또한 기본적으로 onTap 이 달려 있기 때문에 굳이 GestureDectector 라든가 InkWell 같은 위젯을 삽입하지 않아도 자체적으로 InkWell 의 효과가 들어가 있는 onTap 을 지원하기 때문에 그냥 사용하면 된다.
이제 이 위젯을 본인이 원하는 곳에 삽입해 주면 되는데 예를 들어 리스트 안에다가 넣어줄 수 있겠다.
ListView(
children: [
ListTile(
leading: CircleAvatar(child: Text('A')),
title: Text('Alice'),
subtitle: Text('alice@example.com'),
trailing: Icon(Icons.message),
onTap: () => print('Tapped Alice'),
),
ListTile(
leading: CircleAvatar(child: Text('B')),
title: Text('Bob'),
subtitle: Text('bob@example.com'),
trailing: Icon(Icons.message),
onTap: () => print('Tapped Bob'),
),
],
)
공식 문서에서는 여러 가지 예제를 제공해 주는데 그중에서도 이 예제는 ListTile 을 Material 위젯으로 래핑 한 모습을 보여주고 있다.
또 밑의 예제는 ListTile이 활성화, 선택 또는 비활성화될 때 텍스트와 아이콘의 색상을 변경할 수 있음을 보여주고 있다.
(버튼이 비활성화된 후에는 타일 클릭이 막힘!)
이렇게 ListTile 을 활용하여 쉽게 만들 수 있는데 사실 이 위젯으로는 한계가 있다. 그래서 공식문서에서는 놀랍게도 그냥 직접 만들라고 한다.. (실화임)
암튼 이렇게 ListTiile 에 대하여 알아보았는데 정말 코딩 시간을 단축해 주는 위젯임이 분명하니 한 번씩은 맛을 봐보는 것을 추천한다. 그럼 도움이 되었길 바라며 마치겠다.
