Table

Flutter에서 테이블 레이아웃 관리하기: Table

Table 위젯은 자식 위젯들을 테이블 레이아웃 알고리즘을 사용하여 배치하는 데 사용됩니다. 이는 행과 열로 구성된 2차원 레이아웃을 제공하며, 다양한 너비와 높이를 가진 열과 행을 유연하게 정의할 수 있습니다.

주요 속성

• children: TableRow 위젯의 리스트로 테이블의 행을 정의합니다.
• columnWidths: 각 열의 너비를 정의합니다. TableColumnWidth의 서브클래스를 사용하여 열 너비를 설정할 수 있습니다.
• defaultColumnWidth: 모든 열에 적용될 기본 너비를 정의합니다. 기본값은 FlexColumnWidth입니다.
• border: 테이블에 테두리를 추가합니다. TableBorder를 사용하여 설정할 수 있습니다.
• defaultVerticalAlignment: 모든 셀에 적용될 기본 세로 정렬을 정의합니다. TableCellVerticalAlignment를 사용합니다.
• textDirection: 텍스트의 방향을 정의합니다.
• textBaseline: 텍스트의 기준선을 설정하여 수직 정렬을 제어합니다.

주요 활용도

• 데이터 테이블: 데이터를 표 형식으로 체계적으로 배치할 수 있습니다.
• 복잡한 레이아웃: 복잡한 UI 요소들을 행과 열로 정리하여 배치할 수 있습니다.

예제 코드

아래 예제는 테두리가 있는 테이블을 만들고, 다양한 열 너비와 세로 셀 정렬을 사용하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Table Example'),
        ),
        body: Center(
          child: Table(
            border: TableBorder.all(),
            columnWidths: {
              0: FixedColumnWidth(100.0),
              1: FlexColumnWidth(),
              2: FractionColumnWidth(0.3),
            },
            defaultVerticalAlignment: TableCellVerticalAlignment.middle,
            children: [
              TableRow(children: [
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.grey,
                  child: Text('Fixed Width'),
                ),
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.blue,
                  child: Text('Flex Width'),
                ),
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.red,
                  child: Text('Fraction Width'),
                ),
              ]),
              TableRow(children: [
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.grey,
                  child: Text('Row 2, Col 1'),
                ),
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.blue,
                  child: Text('Row 2, Col 2'),
                ),
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.red,
                  child: Text('Row 2, Col 3'),
                ),
              ]),
              TableRow(children: [
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.grey,
                  child: Text('Row 3, Col 1'),
                ),
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.blue,
                  child: Text('Row 3, Col 2'),
                ),
                Container(
                  padding: EdgeInsets.all(8.0),
                  color: Colors.red,
                  child: Text('Row 3, Col 3'),
                ),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

추가 팁

• 스크롤 가능 테이블: 테이블을 가로 스크롤이 가능한 SingleChildScrollView로 감싸고 TableColumnWidth를 FixedColumnWidth로 설정하여 스크롤 가능한 테이블을 만들 수 있습니다.

• 적합한 위젯 선택:

  • 단일 행: 테이블에 단일 행만 필요하다면 Row 위젯을 사용하는 것이 더 적합합니다.
  • 단일 열: 테이블에 단일 열만 필요하다면 SliverList 또는 Column 위젯을 사용하는 것이 더 적합합니다.

• 행의 크기 조정:

  • 테이블의 행은 그 내용물에 따라 세로로 크기가 조정됩니다. 각 셀에 포함된 위젯들의 높이에 따라 행의 높이가 결정됩니다.

• 열 너비 제어:

  • columnWidths 속성을 사용하여 각 열의 너비를 제어할 수 있습니다. 지정되지 않은 경우 defaultColumnWidth가 사용됩니다.
  • 기본적으로 defaultColumnWidth는 FlexColumnWidth입니다. 이는 가로 축에서 남은 공간을 나눠 열 너비를 결정합니다.
  • 테이블을 가로 스크롤 가능한 SingleChildScrollView로 감싸야 한다면 FixedColumnWidth와 같은 다른 TableColumnWidth를 선택하는 것이 좋습니다.

• 테이블 레이아웃 알고리즘:

  • 테이블 레이아웃 알고리즘에 대한 자세한 내용은 RenderTable을 참조하세요.

• 자식 정렬 제어:

  • 자식의 정렬을 제어하려면 TableCell을 사용합니다. TableCell을 통해 셀 내의 콘텐츠 정렬을 세부적으로 제어할 수 있습니다.

관련 자료

•  catalog of layout widgets: 다양한 레이아웃 위젯 카탈로그입니다.

추가 참고 리소스

• Flutter Widget of the Week - Table
• 공식 문서 - Table