Flutter-Table组件的使用

配图来自网络，如侵必删

在日常的开发当中，我们可能会遇到以下的需求：

界面当中展示表格。

这种需求我们可以通过Table组件来实现。这篇博客分享Table组件的使用，希望对看文章的小伙伴有所启发。

源码

Table({
    Key? key,
    this.children = const <TableRow>[],
    this.columnWidths,
    this.defaultColumnWidth = const FlexColumnWidth(),
    this.textDirection,
    this.border,
    this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
  }) : assert(children != null),
       assert(defaultColumnWidth != null),
       assert(defaultVerticalAlignment != null),
       assert(defaultVerticalAlignment != TableCellVerticalAlignment.baseline || textBaseline != null, 'textBaseline is required if you specify the defaultVerticalAlignment with TableCellVerticalAlignment.baseline'),
       assert(() {
         if (children.any((TableRow row) => row.children == null)) {
           throw FlutterError(
             'One of the rows of the table had null children.\n'
             'The children property of TableRow must not be null.',
           );
         }
         return true;
       }()),
       assert(() {
         if (children.any((TableRow row) => row.children!.any((Widget cell) => cell == null))) {
           throw FlutterError(
             'One of the children of one of the rows of the table was null.\n'
             'The children of a TableRow must not be null.',
           );
         }
         return true;
       }()),
       assert(() {
         if (children.any((TableRow row1) => row1.key != null && children.any((TableRow row2) => row1 != row2 && row1.key == row2.key))) {
           throw FlutterError(
             'Two or more TableRow children of this Table had the same key.\n'
             'All the keyed TableRow children of a Table must have different Keys.',
           );
         }
         return true;
       }()),
       assert(() {
         if (children.isNotEmpty) {
           final int cellCount = children.first.children!.length;
           if (children.any((TableRow row) => row.children!.length != cellCount)) {
             throw FlutterError(
               'Table contains irregular row lengths.\n'
               'Every TableRow in a Table must have the same number of children, so that every cell is filled. '
               'Otherwise, the table will contain holes.',
             );
           }
         }
         return true;
       }()),
       _rowDecorations = children.any((TableRow row) => row.decoration != null)
                              ? children.map<Decoration?>((TableRow row) => row.decoration).toList(growable: false)
                              : null,
       super(key: key) {
    assert(() {
      final List<Widget> flatChildren = children.expand<Widget>((TableRow row) => row.children!).toList(growable: false);
      if (debugChildrenHaveDuplicateKeys(this, flatChildren)) {
        throw FlutterError(
          'Two or more cells in this Table contain widgets with the same key.\n'
          'Every widget child of every TableRow in a Table must have different keys. The cells of a Table are '
          'flattened out for processing, so separate cells cannot have duplicate keys even if they are in '
          'different rows.',
        );
      }
      return true;
    }());
  }

查看源码有利于学习、使用、自定义组件的开发，感兴趣的小伙伴可以查看一下。

属性说明

这里针对源码做出相应的属性说明，熟悉控件的属性方便大家的使用:

属性名称	属性说明
children	子组件
columnWidths	每一列的宽度
defaultColumnWidth	每一列的默认的宽度，默认情况都是均分
textDirection	文字方向
border	表格的边框
defaultVerticalAlignment	默认垂直方向的对齐方式

示例代码

 Table(
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        defaultColumnWidth: const FixedColumnWidth(80),
        children: [
          TableRow(children: [
            buildItem("1", Colors.redAccent),
            buildItem("2", Colors.orangeAccent),
            buildItem("3", Colors.yellowAccent),
            buildItem("4", Colors.greenAccent)
          ]),
          TableRow(children: [
            buildItem("5", Colors.greenAccent),
            buildItem("6", Colors.yellowAccent),
            buildItem("7", Colors.orangeAccent),
            buildItem("8", Colors.redAccent)
          ])
        ],
      ),

效果图如下所示：

效果图

完整的代码

以下的代码，可以直接复制到编译器去运行，方便小伙伴查看运行结果或者直接使用：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Table Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Table(
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        defaultColumnWidth: const FixedColumnWidth(80),
        children: [
          TableRow(children: [
            buildItem("1", Colors.redAccent),
            buildItem("2", Colors.orangeAccent),
            buildItem("3", Colors.yellowAccent),
            buildItem("4", Colors.greenAccent)
          ]),
          TableRow(children: [
            buildItem("5", Colors.greenAccent),
            buildItem("6", Colors.yellowAccent),
            buildItem("7", Colors.orangeAccent),
            buildItem("8", Colors.redAccent)
          ])
        ],
      ),
    );
  }

  buildItem(String content, Color backgroundColor) {
    return Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      color: backgroundColor,
      child: Text(content),
    );
  }
}