【Flutter】Table|テーブルでマス目上にWidgetを表示

今回はTableの基本的な使い方を紹介します。

Tableを使えばWidgetをテーブルで表示できます。

\ 世界最大級のオンライン学習サービス /

目次

Tableの使い方

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        Container(
          height: 32,
          color: Colors.green,
        ),
        TableCell(
          verticalAlignment: TableCellVerticalAlignment.top,
          child: Container(
            height: 32,
            width: 32,
            color: Colors.red,
          ),
        ),
        Container(
          height: 64,
          color: Colors.blue,
        ),
      ],
    ),
    TableRow(
      decoration: const BoxDecoration(
        color: Colors.grey,
      ),
      children: <Widget>[
        Container(
          height: 64,
          width: 128,
          color: Colors.purple,
        ),
        Container(
          height: 32,
          color: Colors.yellow,
        ),
        Center(
          child: Container(
            height: 32,
            width: 32,
            color: Colors.orange,
          ),
        ),
      ],
    ),
  ],
),

TableTableRowとセットで使用されます。

上記コードのようにテーブルで使用する行数TableRowchildrenの要素として渡します。セルの周りにボーダーを表示するにはborderの引数にTableBorder.all()を渡します。

TableRowTableCellを使用することで、セルごとに要素の配置を指定できます。

カラム別に範囲をパーセントで指定

Table(
  border: TableBorder.all(),
  columnWidths: const {
    0: FractionColumnWidth(0.5),
    1: FractionColumnWidth(0.3),
    2: FractionColumnWidth(0.2),
  },
  children: [ ... ]
),

カラム別に範囲をパーセントで指定するにはcolumnWidthsを使用します。

columnWidthsの引数にはMap型で{カラムインデックス : FractionColumnWidth(割合)}を渡し、カラムごとに範囲を指定できます。

一緒に読みたい

参考

  • URLをコピーしました!
目次