Flutter表格布局插件is

Flutter表格布局插件is_table的使用

IsTable

一个用于渲染表格的Flutter包，易于使用且完全可定制。
我们仍在开发更多功能。

Flutter的表格组件

一个为Flutter设计的可定制且易于使用的表格组件，支持Android、iOS、桌面和Web平台。

特性

自定义化：可以根据您的应用设计自定义表格的外观。
跨平台：在Android、iOS和Web平台上无缝工作。
易于使用：简单的API用于将表格添加到您的Flutter应用中。
滚动等更多功能。

支持的平台

Android
iOS
Web
桌面

开始使用

安装

将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  is_table: latest

使用命令安装：

flutter pub add is_table

在您的文件中导入：

import 'package:is_table/is_table.dart';

使用方法

LayoutBuilder(
  builder: (context, constraints) {
    return IsTable(
      gapBetweenHeaderBody: 8,
      tableHeight: constraints.maxHeight,
      tableWidth: 200,
      isTableBody: [
        ...[
          {
            "name": "Sk Ismile",
            "city": "Kolkata",
            "designation": "Software Developer",
            "company": "Blue Horse Software",
            "department": "Backend",
            'experience': "2yrs",
            'age': "26"
          },
          {
            "name": "Sk Ismile",
            "city": "Banglore",
            "designation": "Software Developer",
            "company": "Google",
            "department": "AI",
            'experience': "5yrs",
            'age': "27"
          },
        ].map((item) {
          return IsTableRow(
            rowMargin: const EdgeInsets.only(bottom: 12),
            rowStyle: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  blurRadius: 3,
                  offset: const Offset(1, 3),
                  color: Colors.black.withOpacity(0.2)
                )
              ]
            ),
            rowPadding: const EdgeInsets.only(left: 50),
            tableRowWidth: constraints.maxWidth,
            tdContent: [
              IsTableCell(
                isTableDataType: IsTableDataType.bodyContent,
                width: constraints.maxWidth * 0.2,
                primaryContent: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text("${item['name']}",
                      textAlign: TextAlign.start,
                      overflow: TextOverflow.ellipsis,
                      style: GoogleFonts.inter(
                        fontSize: 16,
                        fontWeight: FontWeight.w500
                      )
                    ),
                    Text("$item['department']",
                      textAlign: TextAlign.start,
                      overflow: TextOverflow.ellipsis,
                      style: GoogleFonts.inter(
                        fontSize: 10,
                        fontWeight: FontWeight.w400
                      )
                    ),
                  ],
                ),
              ),
              IsTableCell(
                isTableDataType: IsTableDataType.bodyContent,
                width: constraints.maxWidth * 0.2,
                primaryContent: Text("${item['company']}",
                  textAlign: TextAlign.start,
                  overflow: TextOverflow.ellipsis,
                  style: GoogleFonts.inter(
                    fontSize: 16,
                    fontWeight: FontWeight.w500
                  )
                ),
              ),
              IsTableCell(
                isTableDataType: IsTableDataType.bodyContent,
                width: constraints.maxWidth * 0.2,
                primaryContent: Text("${item['designation']}",
                  textAlign: TextAlign.start,
                  overflow: TextOverflow.ellipsis,
                  style: GoogleFonts.inter(
                    fontSize: 16,
                    fontWeight: FontWeight.w500
                  )
                ),
              ),
              IsTableCell(
                isTableDataType: IsTableDataType.bodyContent,
                width: constraints.maxWidth * 0.2,
                primaryContent: Text("${item['city']}",
                  textAlign: TextAlign.start,
                  overflow: TextOverflow.ellipsis,
                  style: GoogleFonts.inter(
                    fontSize: 16,
                    fontWeight: FontWeight.w500
                  )
                ),
              ),
              IsTableCell(
                isTableDataType: IsTableDataType.bodyContent,
                width: constraints.maxWidth * 0.15,
                primaryContent: Text("${item['age']}",
                  textAlign: TextAlign.start,
                  overflow: TextOverflow.ellipsis,
                  style: GoogleFonts.inter(
                    fontSize: 16,
                    fontWeight: FontWeight.w500
                  )
                ),
              ),
            ],
          );
        }).toList()
      ],
      isTableHeader: IsTableHeader(
        headerPadding: const EdgeInsets.only(left: 50),
        headerStyle: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(4),
            topRight: Radius.circular(4),
          ),
        ),
        tableHeaderWidth: constraints.maxWidth,
        tdContent: [
          IsTableCell(
            isTableDataType: IsTableDataType.headerContent,
            primaryContent: const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Name",
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black54,
                  ),
                ),
                Icon(
                  Icons.swap_vert,
                  color: Color(0xfff28e2c),
                )
              ],
            ),
            width: constraints.maxWidth * 0.2,
          ),
          IsTableCell(
            isTableDataType: IsTableDataType.headerContent,
            primaryContent: const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Company",
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black54,
                  ),
                ),
                Icon(
                  Icons.swap_vert,
                  color: Color(0xfff28e2c),
                )
              ],
            ),
            width: constraints.maxWidth * 0.2,
          ),
          IsTableCell(
            isTableDataType: IsTableDataType.headerContent,
            primaryContent: const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Designation",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black54,
                  ),
                ),
                Icon(
                  Icons.swap_vert,
                  color: Color(0xfff28e2c),
                )
              ],
            ),
            width: constraints.maxWidth * 0.2,
          ),
          IsTableCell(
            isTableDataType: IsTableDataType.headerContent,
            primaryContent: const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "City",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black54,
                  ),
                ),
                Icon(
                  Icons.swap_vert,
                  color: Color(0xfff28e2c),
                )
              ],
            ),
            width: constraints.maxWidth * 0.2,
          ),
          IsTableCell(
            isTableDataType: IsTableDataType.headerContent,
            primaryContent: const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Age",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black54,
                  ),
                ),
                Icon(
                  Icons.swap_vert,
                  color: Color(0xfff28e2c),
                )
              ],
            ),
            width: constraints.maxWidth * 0.15,
          ),
        ],
      ),
    );
  },
)

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

eggper 1楼

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

is_table 是一个用于在 Flutter 中创建表格布局的插件。它提供了简单且灵活的方式来构建表格，支持自定义单元格样式、表格行和列的动态调整等功能。以下是如何使用 is_table 插件的基本指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 is_table 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  is_table: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本用法

以下是一个简单的例子，展示如何使用 is_table 创建一个基本的表格：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('is_table Example'),
        ),
        body: TableExample(),
      ),
    );
  }
}

class TableExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ISTable(
      columns: [
        ISTableColumn(
          label: 'Name',
          width: 100,
        ),
        ISTableColumn(
          label: 'Age',
          width: 50,
        ),
        ISTableColumn(
          label: 'City',
          width: 150,
        ),
      ],
      rows: [
        ISTableRow(
          cells: [
            ISTableCell(child: Text('Alice')),
            ISTableCell(child: Text('23')),
            ISTableCell(child: Text('New York')),
          ],
        ),
        ISTableRow(
          cells: [
            ISTableCell(child: Text('Bob')),
            ISTableCell(child: Text('30')),
            ISTableCell(child: Text('San Francisco')),
          ],
        ),
        ISTableRow(
          cells: [
            ISTableCell(child: Text('Charlie')),
            ISTableCell(child: Text('25')),
            ISTableCell(child: Text('Los Angeles')),
          ],
        ),
      ],
    );
  }
}

3. 自定义样式

你可以通过 ISTable, ISTableColumn, ISTableRow, 和 ISTableCell 的属性来自定义表格的样式。例如，你可以设置单元格的背景颜色、文本样式、边框等。

ISTable(
  columns: [
    ISTableColumn(
      label: 'Name',
      width: 100,
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    ISTableColumn(
      label: 'Age',
      width: 50,
      style: TextStyle(color: Colors.blue),
    ),
    ISTableColumn(
      label: 'City',
      width: 150,
      style: TextStyle(fontStyle: FontStyle.italic),
    ),
  ],
  rows: [
    ISTableRow(
      cells: [
        ISTableCell(
          child: Text('Alice'),
          decoration: BoxDecoration(
            color: Colors.grey[200],
            border: Border.all(color: Colors.black),
          ),
        ),
        ISTableCell(
          child: Text('23'),
          decoration: BoxDecoration(
            color: Colors.grey[300],
            border: Border.all(color: Colors.black),
          ),
        ),
        ISTableCell(
          child: Text('New York'),
          decoration: BoxDecoration(
            color: Colors.grey[400],
            border: Border.all(color: Colors.black),
          ),
        ),
      ],
    ),
    // 添加更多行...
  ],
)

4. 动态调整

is_table 支持动态调整行和列。你可以通过 ISTableController 来控制表格的动态行为。

class TableExample extends StatefulWidget {
  [@override](/user/override)
  _TableExampleState createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  final ISTableController _controller = ISTableController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        ISTable(
          controller: _controller,
          columns: [
            ISTableColumn(
              label: 'Name',
              width: 100,
            ),
            ISTableColumn(
              label: 'Age',
              width: 50,
            ),
            ISTableColumn(
              label: 'City',
              width: 150,
            ),
          ],
          rows: [
            ISTableRow(
              cells: [
                ISTableCell(child: Text('Alice')),
                ISTableCell(child: Text('23')),
                ISTableCell(child: Text('New York')),
              ],
            ),
            // 添加更多行...
          ],
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _controller.addRow(
                ISTableRow(
                  cells: [
                    ISTableCell(child: Text('New User')),
                    ISTableCell(child: Text('18')),
                    ISTableCell(child: Text('Chicago')),
                  ],
                ),
              );
            });
          },
          child: Text('Add Row'),
        ),
      ],
    );
  }
}