Flutter表格展示插件app_table的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter表格展示插件app_table的使用

AppTable 是一个 Flutter 小部件，用于显示具有标题和数据行的可自定义表格。它支持各种样式和布局的定制选项。AppTable 提供了丰富的定制选项，包括可定制的表头和数据行、带有样式的标题、不同文本对齐方式和单元格对齐方式的支持、可定制的表格尺寸和内边距、滚动表格内容的能力，以及可定制的边框宽度和颜色。

Image 1

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  app_table: ^0.0.3

然后运行 flutter pub get 来安装包。

使用

基本用法

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<TableModel> _buildHeaderData() {
    return [
      TableModel(
        expanded: false,
        child: Checkbox(
          value: true,
          onChanged: (val) {},
        ),
      ),
      TableModel(
        data: 'Header 1',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
      TableModel(
        data: 'Header 2',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
      TableModel(
        data: 'Header 3',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
      TableModel(
        data: 'Header 4',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
    ];
  }

  List<List<TableModel>> _buildDataCustom() {
    return List.generate(
      4,
      (index) => [
        TableModel(
          expanded: false,
          child: Checkbox(
            value: false,
            onChanged: (val) {},
          ),
        ),
        TableModel(data: 'Data $index', color: Theme.of(context).colorScheme.errorContainer),
        TableModel(data: 'Data $index'),
        TableModel(data: 'Data $index', color: Theme.of(context).colorScheme.errorContainer),
        TableModel(data: 'Data $index'),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AppTable(
          title: 'This Is Custom Table',
          headerData: _buildHeaderData(),
          data: _buildDataCustom(),
          headerBackgroundColor: Theme.of(context).colorScheme.primaryContainer,
          backgroundColor: Theme.of(context).colorScheme.surfaceDim,
          dataBottomBorderWidth: 1,
          headerBottomBorderWidth: 1,
          dataBottomBorderColor: Theme.of(context).colorScheme.outline,
          headerBottomBorderColor: Theme.of(context).colorScheme.primary,
          borderRadius: 8,
          tableBorderWidth: 1,
          tableBorderColor: Theme.of(context).colorScheme.outline,
          minWidth: 400,
          minHeight: 400,
        ),
      ),
    );
  }
}

示例

查看 example 目录下的完整示例应用程序，以了解如何使用 app_table 包。

import 'package:app_table/app_table.dart';
import 'package:example/sample_wrapper.dart';
import 'package:flutter/material.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const AppTableSamplesView(),
    );
  }
}

class AppTableSamplesView extends StatefulWidget {
  const AppTableSamplesView({super.key});

  [@override](/user/override)
  State<AppTableSamplesView> createState() => _AppTableSamplesViewState();
}

class _AppTableSamplesViewState extends State<AppTableSamplesView> {
  List<TableModel> _buildHeaderData() {
    return [
      TableModel(
        expanded: false,
        child: Checkbox(
          value: true,
          onChanged: (val) {},
        ),
      ),
      TableModel(
        data: 'Header 1',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
      TableModel(
        data: 'Header 2',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
      TableModel(
        data: 'Header 3',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
      TableModel(
        data: 'Header 4',
        textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
      ),
    ];
  }

  List<List<TableModel>> _buildData() {
    return [
      ...List.generate(
        4,
        (index) => [
          TableModel(
            expanded: false,
            child: Checkbox(
              value: false,
              onChanged: (val) {},
            ),
          ),
          TableModel(data: 'Data $index'),
          TableModel(data: 'Data $index'),
          TableModel(data: 'Data $index'),
          TableModel(data: 'Data $index'),
        ],
      )
    ];
  }

  List<List<TableModel>> _buildDataCustom() {
    return List.generate(
      4,
      (index) => [
        TableModel(
          expanded: false,
          child: Checkbox(
            value: false,
            onChanged: (val) {},
          ),
        ),
        TableModel(
            data: 'Data $index',
            color: Theme.of(context).colorScheme.errorContainer),
        TableModel(data: 'Data $index'),
        TableModel(
            data: 'Data $index',
            color: Theme.of(context).colorScheme.errorContainer),
        TableModel(data: 'Data $index'),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Table Samples')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(18),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            defaultTable(),
            // defaultTableWithTitle(),
            defaultTableWithoutHeader(),
            customTable(),
          ],
        ),
      ),
    );
  }

  Widget defaultTable() {
    return SampleWrapper(
      title: 'Default Table',
      widget: AppTable(
        headerData: _buildHeaderData(),
        data: _buildData(),
        minWidth: 400,
      ),
    );
  }

  Widget defaultTableWithTitle() {
    return SampleWrapper(
      title: 'Default Table With Title',
      widget: AppTable(
        title: 'Title',
        headerData: _buildHeaderData(),
        data: _buildData(),
        minWidth: 400,
      ),
    );
  }

  Widget defaultTableWithoutHeader() {
    return SampleWrapper(
      title: 'Default Table Without Header',
      widget: AppTable(
        data: _buildData(),
        minWidth: 400,
      ),
    );
  }

  Widget customTable() {
    return SampleWrapper(
      title: 'Custom Table',
      widget: AppTable(
        title: 'This Is Custom Table',
        headerData: _buildHeaderData(),
        data: _buildDataCustom(),
        headerBackgroundColor: Theme.of(context).colorScheme.primaryContainer,
        backgroundColor: Theme.of(context).colorScheme.surfaceDim,
        dataBottomBorderWidth: 1,
        headerBottomBorderWidth: 1,
        dataBottomBorderColor: Theme.of(context).colorScheme.outline,
        headerBottomBorderColor: Theme.of(context).colorScheme.primary,
        borderRadius: 8,
        tableBorderWidth: 1,
        tableBorderColor: Theme.of(context).colorScheme.outline,
        minWidth: 400,
        minHeight: 400,
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter应用中使用app_table插件来展示表格的一个示例代码。首先，确保你已经在pubspec.yaml文件中添加了app_table依赖：

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

然后，运行flutter pub get来安装依赖。

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Table Demo',
      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': 30,
      'City': 'New York',
    },
    {
      'Name': 'Bob',
      'Age': 25,
      'City': 'San Francisco',
    },
    {
      'Name': 'Charlie',
      'Age': 35,
      'City': 'Chicago',
    },
  ];

  final List<String> columnNames = ['Name', 'Age', 'City'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Table Demo'),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 16),
            AppTable(
              columnNames: columnNames,
              tableData: tableData,
              columnWidths: {
                'Name': 100,
                'Age': 50,
                'City': 150,
              },
              headerDecoration: BoxDecoration(
                color: Colors.blueGrey[400],
                borderRadius: BorderRadius.circular(5),
              ),
              cellDecoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Colors.grey[300]!),
                ),
              ),
              headerTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              cellTextStyle: TextStyle(color: Colors.black),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：

    • 导入flutter/material.dart用于基本的Material组件。
    • 导入app_table/app_table.dart用于表格组件。

  2. 主应用：

    • MyApp类是一个无状态小部件，它定义了应用程序的基本结构和主题。

  3. 主页面：

    • MyHomePage是一个有状态小部件，它持有表格数据的状态。
    • 数据存储在tableData列表中，每个元素都是一个包含表格行数据的Map。
    • 列名存储在columnNames列表中。

  4. 表格构建：

    • 使用AppTable小部件来展示表格。
    • columnNames定义了列标题。
    • tableData包含了实际的数据。
    • columnWidths定义了每列的宽度。
    • headerDecoration和cellDecoration分别用于表头和单元格的装饰，比如颜色和边框。
    • headerTextStyle和cellTextStyle分别用于表头和单元格的文本样式。

  5. 布局：

    • 使用SingleChildScrollView包裹表格，以确保在内容过多时可以滚动查看。
    • 使用Column和SizedBox来组织布局和添加间距。

这样，你就可以在Flutter应用中展示一个带有自定义样式和功能的表格了。根据你的具体需求，你可以进一步调整和优化这个示例代码。

回到顶部