Flutter Table


简介

一种布局方法

  • 一个可以对齐子元素进行table 布局算法的Widget

基本用法

大多用于多行多列的需求

  • 如果你只有一行或者一列,其实选择Row和Column更合适一些
  • 表格中行的大小是根据列行数和宽度计算的来,控制列宽可以使用 columnWidth 属性
  • 注意,Table中每一行的列数需要一致,否则报错

实例演示

import 'package:flutter/material.dart';

class TableDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin:const EdgeInsets.only(top: 10.0),
      child:Table(
        columnWidths: const {
          0: FixedColumnWidth(50.0),
          1: FixedColumnWidth(100.0),
          2: FixedColumnWidth(50.0),
          3: FixedColumnWidth(100.0),
        },
        border: TableBorder.all(
            color: Colors.red, width: 1.0, style: BorderStyle.solid),
        children: const [
          TableRow(
            children: [
              Text('A1'),
              Text('B1'),
              Text('C1'),
              Text('D1'),
            ],
          ),
          TableRow(
            children: [
              Text('A2'),
              Text('B2'),
              Text('C2'),
              Text('D2'),
            ],
          ),
          TableRow(
            children: [
              Text('A3'),
              Text('B3'),
              Text('C3'),
              Text('D3'),
            ],
          ),
        ],
      ),
    );
  }
}