Flutter表格展示插件table_desk的使用

Flutter表格展示插件table_desk的使用

table_desk 是一个用于创建合并单元格表格的简单方法。

该插件仍在开发中（work-in-progress）。🚧
建议不要在您的产品中使用此插件。

特性

• ✅ 自动调整表格大小以适应内容变化

使用方法

TableDesk(
    child: TableDeskColumn(
        children: [
            TableDeskRow(
                gaps: [
                    TableGap.width(100),
                    TableGap.weight(),
                ],
                children: [
                    WidgetA(),
                    WidgetB(),
                ]
            ),
            TableDeskRow(
                gaps: [
                    TableGap.width(100),
                    TableGap.weight(),
                ],
                children: [
                    WidgetA(),
                    WidgetB(),
                ]
            ),
        ]
    ),
)

开发中功能

• ❌ 部分测试尚未完成。
• ❌ 尚未实现 TableDesk 中的装饰设置。

示例代码

以下是一个完整的示例代码，展示了如何使用 table_desk 插件来创建一个简单的表格。

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

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

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

  // 这个小部件是您的应用程序的根。它是一个状态小部件，意味着它有一个状态对象（定义在下面），其中包含影响其外观的字段。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您的应用程序的主题。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 这里我们从 MyHomePage 对象中获取值，并将其用于设置我们的应用栏标题。
        // title: Text(widget.title),
      ),
      body: ListView(
        padding: const EdgeInsets.all(12),
        children: [
          TableDesk(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(4),
              side: const BorderSide(color: Colors.black26, width: 1),
            ),
            child: TableDeskRow(
              border: const BorderSide(width: 1, color: Colors.black26),
              gaps: [
                TableGap.width(100),
                TableGap.weight(),
              ],
              children: [
                const Center(
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: Text(
                      'MALE \n Jake\n age 20',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                TableDeskColumn(
                  border: const BorderSide(width: 0.5, color: Colors.black26),
                  children: [
                    TableDeskRow(
                      border:
                          const BorderSide(width: 0.5, color: Colors.black26),
                      gaps: [
                        TableGap.width(80),
                        TableGap.weight(),
                      ],
                      children: const [
                        Center(
                          child: Text('morning'),
                        ),
                        Center(
                          child: Padding(
                            padding: EdgeInsets.all(8),
                            child: Text('phone, laptop, eggs, pen, sandwich'),
                          ),
                        ),
                      ],
                    ),
                    TableDeskRow(
                      border:
                          const BorderSide(width: 0.5, color: Colors.black26),
                      gaps: [
                        TableGap.width(80),
                        TableGap.weight(),
                      ],
                      children: [
                        const Center(
                          child: Text('dinner'),
                        ),
                        Center(
                          child: Padding(
                            padding: const EdgeInsets.all(8),
                            child:
                                Text('phone, laptop, eggs, pen, sandwich' * 3),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}