高中数学01——基本初等函数的图形及其性质

Table 的概念

• Table 是 Flutter 中用于 网格布局 的 Widget
• 类似 HTML 的 <table>，可以按 行（TableRow）和列 排布子组件
• 适合 规则网格 布局，不适合滚动列表（ListView 更适合动态列表）

Table 的优势是可以控制列宽、对齐和边框，非常适合展示 表格数据 或 多行多列固定布局。

Table 的基本结构

Table(
  children: [
    TableRow(children: [Widget1, Widget2, Widget3]),
    TableRow(children: [Widget4, Widget5, Widget6]),
  ],
)

• children：List<TableRow>
• TableRow：一行，包含若干列（children）
• 注意：每一行的列数可以不同，但 Flutter 会按最长行补齐空白

Table 的常用属性

属性	类型	说明
children	List<TableRow>	表格的行列表
columnWidths	Map<int, TableColumnWidth>	指定每列宽度，可以按列号设置
defaultColumnWidth	TableColumnWidth	默认列宽，如果 columnWidths 未设置某列，使用默认
textDirection	TextDirection	文本方向，LTR/RTL
border	TableBorder	表格边框
defaultVerticalAlignment	TableCellVerticalAlignment	默认垂直对齐方式
clipBehavior	Clip	裁剪行为

---

列宽类型（TableColumnWidth）

Flutter 提供了几种常用的列宽控制方式：

类型	说明
FlexColumnWidth	按比例分配剩余空间，例如 FlexColumnWidth(2) 比 FlexColumnWidth(1) 宽两倍
FixedColumnWidth	固定宽度，例如 FixedColumnWidth(100)
IntrinsicColumnWidth	根据列内容决定宽度，列宽 = 最大子元素宽度
FractionColumnWidth	占父宽度的比例，例如 FractionColumnWidth(0.3)

如果 columnWidths 没有指定某列，如果下面：

columnWidths: {
  1: FlexColumnWidth(2),
  2: FlexColumnWidth(1),
},

Flutter 会 fallback 到 defaultColumnWidth。

/// Rows size vertically based on their contents. To control the individual
/// column widths, use the [columnWidths] property to specify a
/// [TableColumnWidth] for each column. If [columnWidths] is null, or there is a
/// null entry for a given column in [columnWidths], the table uses the
/// [defaultColumnWidth] instead.
///
/// By default, [defaultColumnWidth] is a [FlexColumnWidth]. This
/// [TableColumnWidth] divides up the remaining space in the horizontal axis to
/// determine the column width. If wrapping a [Table] in a horizontal
/// [ScrollView], choose a different [TableColumnWidth], such as
/// [FixedColumnWidth].

[defaultColumnWidth] is a [FlexColumnWidth].，所以默认情况下，所有列都是 FlexColumnWidth(1)，也就是自动平分剩余空间。

在 Table 里，决定每一列宽度的优先级是这样的：

• 如果你在 columnWidths 里指定了某个列的宽度策略（比如 FixedColumnWidth、FlexColumnWidth 等），那一列就会按这个来。
• 如果 columnWidths 没有指定某列，Flutter 会 fallback 到 defaultColumnWidth。所有列都是 FlexColumnWidth(1)，也就是自动平分剩余空间。

表格对齐方式（垂直方向）

TableCellVerticalAlignment 枚举常用值：

值	说明
top	顶部对齐
middle	居中对齐
bottom	底部对齐
baseline	文字基线对齐
fill	填满整行

TableBorder（表格边框）

Table(
  border: TableBorder.all(
    color: Colors.black,
    width: 1,
  ),
)

• TableBorder.all → 所有边都有边框
• 也可以用 TableBorder.symmetric 或 TableBorder 自定义上下左右边框

案例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Table Demo")),
        body: Center(
          // 创建一个简单的表格
          child: Table(
            // 添加边框
            border: TableBorder.all(color: Colors.black),
            // 垂直居中
            defaultVerticalAlignment: TableCellVerticalAlignment.middle,
            // 定义列宽
            // 第一列宽度固定为 80，第二列占剩余空间的 2/3，第三列占 1/3
            columnWidths: {
              0: FixedColumnWidth(80),
              1: FlexColumnWidth(2),
              2: FlexColumnWidth(1),
            },
            children: const [
              // 表头
              TableRow(
                children: [
                  Text("ID", textAlign: TextAlign.center),
                  Text("Name", textAlign: TextAlign.center),
                  Text("Score", textAlign: TextAlign.center),
                ],
              ),
              // 表格内容
              TableRow(
                children: [
                  Text("1", textAlign: TextAlign.center),
                  Text("Alice", textAlign: TextAlign.center),
                  Text("95", textAlign: TextAlign.center),
                ],
              ),
              TableRow(
                children: [
                  Text("2", textAlign: TextAlign.center),
                  Text("Bob", textAlign: TextAlign.center),
                  Text("88", textAlign: TextAlign.center),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

当我们如下配置列宽的时候：

  columnWidths: {
    // 0: FixedColumnWidth(80),
    1: FlexColumnWidth(2),
    2: FlexColumnWidth(1),
  },