Flutter表格展示插件freedom_table的使用

本包用于在Web上展示表格数据，并添加了对colspan和rowspan的支持。

功能

支持colspan和rowspan
表头行和主体行的高度取决于其子组件
可选分页功能

colspan 和 rowspan

完整示例

以下是完整的示例代码，展示了如何使用freedom_table插件来创建一个带有colspan和rowspan的表格：

import 'package:flutter/material.dart';
import 'package:freedom_table/freedom_table.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Freedom Table Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Freedom Table Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FreedomTable table;
  int changedTimes = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    setTable();
  }

  void setTable() {
    changedTimes++;
    table = FreedomTable(
      key: GlobalKey(),
      // 可选参数
      minCellWidthInFlexMode: 200,
      // 表头
      headers: getHeaders(),
      initBodyCells: changedTimes % 2 == 1 ? getPageData(10, 0) : getPageData(10, 1),
      // 可选参数
      pager: FreedomTablePager(
        totalCount: 90,
        pageEach: 10,
        callback: (currentPageIndex, totalPages, pageEach) {
          print("(currentPageIndex : $currentPageIndex, totalPages : $totalPages, pageEach : $pageEach)");
          table.updateBody(getPageData(totalPages, currentPageIndex));
        },
      ),
      // 可选参数
      theme: FreedomTableTheme(
        dividerColor: const Color(0xffe6e6e6),
        backgroundColor: const Color(0xfff2f2f2),
        hoverColor: const Color(0xfff6f6f6),
        hoverColorGetter: () => const Color(0xffFA8C00),
        pagerBorderColor: const Color(0xffcccccc),
        pagerTextColor: const Color(0xff666666),
        pagerTextFocusedColor: const Color(0xffffffff),
        pagerTextDisabledColor: const Color(0xffcccccc),
        pagerFocusedBackgroundColor: const Color(0xff5078F0),
      ),
      bodyCellOnTap: (childCell, left, top, width, height, scrollLeft, scrollTop, totalScrollWidth, totalScrollHeight) {
        print(
            "左键点击的值为 ${childCell.data}，在表中的位置 : left $left, top $top, width $width, height $height, bodyScrollLeft $scrollLeft, bodyScrollTop $scrollTop totalScrollWidth $totalScrollWidth totalScrollHeight $totalScrollHeight");
      },
      bodyCellOnSecondaryTap: (childCell, left, top, width, height, scrollLeft, scrollTop, totalScrollWidth, totalScrollHeight) {
        print(
            "右键点击的值为 ${childCell.data}，在表中的位置 : left $left, top $top, width $width, height $height, bodyScrollLeft $scrollLeft, bodyScrollTop $scrollTop totalScrollWidth $totalScrollWidth totalScrollHeight $totalScrollHeight");
      },
    );
  }

  List<FreedomTableHeaderCell> getHeaders() {
    List<FreedomTableHeaderCell> headers = [
      FreedomTableHeaderCell(
        // 当列被固定时，请确保列的子单元格没有colspan!!!
        isFixedColumn: true,
        fixedWidth: 200,
        child: headerCell('header-1'),
      ),
      FreedomTableHeaderCell(
        isFixedColumn: true,
        fixedWidth: 200,
        child: headerCell('header-2'),
      ),
      FreedomTableHeaderCell(
        // flex: 1,
        fixedWidth: 200,
        child: headerCell('header-3'),
      ),
      FreedomTableHeaderCell(
        flex: 1,
        // fixedWidth: 200,
        child: headerCell('header-4', Alignment.centerLeft),
      ),
    ];
    if (changedTimes % 2 == 1) {
      headers.add(FreedomTableHeaderCell(
        flex: 1,
        // fixedWidth: 200,
        child: headerCell('header-5 长中文测试：中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文'),
      ));
    }
    return headers;
  }

  // 获取分页数据
  List<List<FreedomTableBodyCell>> getPageData(totalPages, currentPageIndex) {
    List<List<FreedomTableBodyCell>> datas = currentPageIndex % 2 == 0
        ? [
            [
              FreedomTableBodyCell(
                data: "testdata",
                child: rowCell('row1-column1'),
              ),
              FreedomTableBodyCell(
                data: ["testdata"],
                child: rowCell('row1-column2'),
              ),
              FreedomTableBodyCell(
                data: {
                  ["testdata"]
                },
                rowspan: 2,
                colspan: 2,
                child: rowCell('row1-column3 long-english:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column5'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column6'),
              ),
            ],
            [
              FreedomTableBodyCell(
                rowspan: 2,
                child: rowCell('row2-column1'),
              ),
              FreedomTableBodyCell(
                data: 'row2-column2',
                child: rowCell('row2-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                // rowspan: 2,
                child: rowCell('row3-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row3-column2'),
              ),
              FreedomTableBodyCell(
                colspan: 2,
                child: rowCell('row3-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row3-column4  长中文测试：中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文 中文'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row3-column4'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row4-column1'),
                data: 'row4-column1',
              ),
              FreedomTableBodyCell(
                child: rowCell('row4-column2'),
              ),
              FreedomTableBodyCell(
                colspan: 2,
                rowspan: 2,
                child: rowCell('row4-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row4-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row4-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row5-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row5-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row5-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row5-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row5-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row6-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row6-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row6-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row6-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row6-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row7-column1'),
              ),
              FreedomTableBodyCell(
                rowspan: 2,
                child: rowCell('row7-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row7-column3'),
              ),
              FreedomTableBodyCell(
                rowspan: 3,
                child: rowCell('row7-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row7-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                rowspan: 3,
                child: rowCell('row8-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row8-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row8-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row8-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row8-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row9-column1'),
              ),
              FreedomTableBodyCell(
                rowspan: 2,
                child: rowCell('row9-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row9-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row9-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row9-column5'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row10-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row10-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row10-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row10-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row10-column5'),
              ),
            ]
          ]
        : [
            [
              FreedomTableBodyCell(
                child: rowCell('row1-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column4'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column5'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row1-column6'),
              ),
            ],
            [
              FreedomTableBodyCell(
                child: rowCell('row2-column1'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column2'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column3'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column4  long-english: long long long long long end'),
              ),
              FreedomTableBodyCell(
                child: rowCell('row2-column5'),
              ),
            ],
          ];
    return datas;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(children: [
          Row(
            children: [
              Container(
                margin: const EdgeInsets.only(bottom: 10, right: 10),
                child: ElevatedButton(
                  child: const Text('滚动到表格最右边'),
                  onPressed: () {
                    table.scrollToTheFarRight();
                  },
                ),
              ),
              Container(
                margin: const EdgeInsets.only(bottom: 10, right: 10),
                child: ElevatedButton(
                  child: const Text('替换表格'),
                  onPressed: () {
                    setState(() {
                      setTable();
                    });
                  },
                ),
              ),
            ],
          ),
          Expanded(
            child: table,
            // child: changedTimes % 2 == 1 ? table : ScheduleOrder(),
          ),
        ]),
      ),
    );
  }

  // header单元格，请设置fontFamily,否则中文高度显示不正确
  Widget headerCell(String name, [Alignment? align]) {
    return Container(
      padding: const EdgeInsets.all(10),
      alignment: align ?? Alignment.center,
      child: Text(
        name,
        style: const TextStyle(
          fontFamily: "Noto_Sans_SC",
        ),
      ),
    );
  }

  // body单元格，请设置fontFamily,否则中文高度显示不正确
  Widget rowCell(String name, [Alignment? align]) {
    return Container(
      padding: const EdgeInsets.all(10),
      alignment: align ?? Alignment.center,
      child: Text(
        name,
        style: const TextStyle(
          fontFamily: "Noto_Sans_SC",
        ),
      ),
    );
  }
}

更多关于Flutter表格展示插件freedom_table的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter表格展示插件freedom_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用freedom_table插件来展示表格的示例代码。freedom_table是一个用于在Flutter应用中展示复杂表格数据的插件。请确保你已经在pubspec.yaml文件中添加了freedom_table依赖，并运行了flutter pub get。

首先，确保你的pubspec.yaml包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  freedom_table: ^最新版本号  # 请替换为实际可用的最新版本号

然后，你可以在你的Flutter项目中使用FreedomTable来展示表格。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:freedom_table/freedom_table.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FreedomTable Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 表格数据
  final List<Map<String, dynamic>> tableData = [
    {
      'name': 'Alice',
      'age': 28,
      'city': 'New York',
    },
    {
      'name': 'Bob',
      'age': 24,
      'city': 'Los Angeles',
    },
    {
      'name': 'Charlie',
      'age': 30,
      'city': 'Chicago',
    },
  ];

  // 列配置
  final List<ColumnConfig> columns = [
    ColumnConfig(title: 'Name', key: 'name', width: 100),
    ColumnConfig(title: 'Age', key: 'age', width: 50),
    ColumnConfig(title: 'City', key: 'city', width: 150),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FreedomTable Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FreedomTable(
          columns: columns,
          data: tableData,
          // 可选的配置
          headerBackgroundColor: Colors.grey[800].withOpacity(0.7),
          headerTextColor: Colors.white,
          rowBackgroundColor: Colors.white,
          rowAlternatingBackgroundColor: Colors.grey[200].withOpacity(0.3),
          cellPadding: EdgeInsets.all(8.0),
        ),
      ),
    );
  }
}

在这个示例中：

我们创建了一个包含用户数据的tableData列表。
我们定义了表格的列配置columns，包括列标题、数据键和列宽。
在_MyHomePageState的build方法中，我们使用FreedomTable小部件来展示表格，并传递了列配置和数据。
我们还添加了一些可选的配置，如头部背景颜色、头部文本颜色、行背景颜色、交替行背景颜色以及单元格内边距。

运行这个示例代码，你将会看到一个包含三列（Name, Age, City）和三行数据的表格。

请注意，freedom_table插件的具体API和配置可能会随着版本的更新而变化，因此请务必参考插件的官方文档以获取最新和详细的信息。