Table class
자식 위젯에 테이블 레이아웃 알고리즘을 사용하는 위젯입니다.
공식 문서 코드
Table 클래스는 우리가 흔히 아는 표라고 생각하면 편하다.
이제 html 로 만들면 편하겠지만 우린 플러터이기 때문에 정해준거 걍 쓰면 된다. 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| children | List<TableRow> | [] | 테이블에 표시할 행 목록 |
| columnWidths | Map<int, TableColumnWidth>? | - | 열의 너비를 결정하는 규칙을 설정 |
| defaultColumnWidth | TableColumnWidth | FlexColumnWidth() | 명시적으로 설정되지 않은 열의 기본 너비를 설정 |
| textDirection | TextDirection? | - | 열 정렬 방향을 설정 |
| border | TableBorder? | - | 테이블의 테두리 스타일을 설정 |
| defaultVerticalAlignment | TableCellVerticalAlignment | TableCellVerticalAlignment.top | 셀의 기본 수직 정렬 방식을 설정 |
| textBaseline | TextBaseline? | - | baseline 정렬 시 기준으로 사용할 텍스트 기준선 설정 |
일단 기본적인 사용을 하긴 위해선 좀 귀찮은 짓을 해야 한다.
맨 상위 속성 Table 로 해놓고 children 안에 TableRow, 또 그 children 안에서 이제 TableCell 사용해주면 되는 구조다.
Table(
children: [
TableRow(
children: [
TableCell(
child: Container(),
),
// TODO Cell
],
),
],
),
사실 위의 공식 예제를 보면 알겠지만 굳이 TableCell 을 사용하지 않아도 좋다.
TableRow 까지만 하고 그 안에는 자기가 원하는 것을 넣으면 되는 것이다.
허나 이제 TableCell 을 알아서 크기에 맞춰진다는 점을 참고하면 졸을 것 같다.
이번엔 예의 주시할것은 columnWidths 인데 이걸로 각 셀마다의 비율을 설정해줄 수 있다.
만약 TableCell 이 3개가 있다면 그 셀마다 크기를 다르게 설정해줄수 가 있다.
근데 보면 Map<int, TableColumnWidth> 을 받는 좀 이상한 친구기 때문에 사용에 유의하도록 하자.
columnWidths: {
0: IntrinsicColumnWidth(),
1: FlexColumnWidth(),
2: FixedColumnWidth(64),
},
예제에서 사용한것은 IntrinsicColumnWidth, FlexColumnWidth, FixedColumnWidth 이렇게 세개 있는데 간단하게 설명하자면 IntrinsicColumnWidth() 는 하위 위젯에 크기에 따라 차지하는 크기도 달라지는 왜 있는지 모르겠는(?) 위젯이고 FlexColumnWidth() 는 이름부터 Flex 달린것이 동작하는 것도 차지할 수 있는 공간 다 차지해버리는 녀석이다. FixedColumnWidth() 위젯은 double 값을 넣을 수 있는 비율로 계산하는 것이 아닌 실질적인 값으로 크기를 넣을 수 있게 해주는 위젯이 되겠다.
보면 굉장히 자유롭게 셀을 제작할수 있게 되어있다. 그래서 생각이상으로 표만들기에 활용도가 높을것 같고 GridView 느낌도 나서 제작도 쉬울 것 같다. 여하튼 이렇게 Table 위젯에 대해 알아보았고 도움이 되었길 바라며 마치겠다.
