flutter table使用方法

 

 Table 使用说明

/**
 * Flutter Table组件用法详解
 *
 * 本代码段展示了如何使用Flutter的Table组件来创建一个带有自定义列宽和边框的表格。
 * 
 * 你可以通过下面的属性来控制表格的各个方面：
 * - children：表格的行，是一个TableRow的列表。
 * - columnWidths：用于设置每一列的宽度。
 * - defaultColumnWidth：如果columnWidths未设置，则所有列将使用此宽度。
 * - textDirection：文本方向，通常不需要设置。
 * - border：设置表格的边框。
 * - defaultVerticalAlignment：设置单元格的默认垂直对齐方式。
 * - textBaseline：与defaultVerticalAlignment配合使用，当设置为baseline时使用。
 */

Flutter Table 组件代码

Table(
  // 设置每列的固定宽度
  columnWidths: <int, TableColumnWidth>{
    0: FixedColumnWidth(Screen.width(300)),
    1: FixedColumnWidth(Screen.width(300)),
  },

  // 设置单元格默认的垂直对齐方式为middle，即垂直居中
  defaultVerticalAlignment: TableCellVerticalAlignment.middle,

  // 设置表格的边框样式：灰色边框，宽度为2个屏幕单位
  border: TableBorder.all(
    color: Colors.grey,
    width: Screen.width(2),
  ),

  // 设置表格的行和单元格
  children: [
    TableRow(
      // 第一行的背景色
      decoration: BoxDecoration(
        color: ColorGather.colorBg(),
      ),
      children: [
        Container(
          alignment: Alignment.center,
          height: Screen.width(80),
          child: Text(
            '荣誉等级', 
            style: TextStyle(fontSize: Screen.width(28)),
          ),
        ),
        Text(
          '荣誉等级', 
          style: TextStyle(fontSize: Screen.width(28)), 
          textAlign: TextAlign.center,
        ),
      ],
    ),
    TableRow(
      children: [
        Container(
          alignment: Alignment.center,
          height: Screen.width(80),
          child: Text(
            '黄铜', 
            style: TextStyle(fontSize: Screen.width(28)),
          ),
        ),
        Text(
          '荣誉等级', 
          style: TextStyle(fontSize: Screen.width(28)), 
          textAlign: TextAlign.center,
        ),
      ],
    ),
  ],
)