Flutter多滚动表格插件flutter_multi_scroll_table的使用

特性

• 按列排序： 您现在可以通过点击表头对列进行排序。此功能允许您以升序或降序组织数据。
• 每个单元格更多选项： EachCell小部件现在支持额外的自定义选项，包括背景颜色和其他样式属性。这使得表的设计更加灵活和美观。
• 可调整列宽： 表的列现在可以动态调整。您可以拖动来调整每一列的宽度，从而获得更符合需求的数据视图。
• 旋转功能： 表现在支持在纵向和横向模式下查看。布局会自动适应方向变化，确保所有设备上的最佳观看体验。

安装

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

dependencies:
  flutter_multi_scroll_table: ^0.0.1

使用

以下示例展示了如何通过传递dataList和相应的headers来使用FlutterMultiScrollTable小部件。

在这个示例中，定义了一个列头列表，指定了诸如"序号"、“成员”、"城市"等列名。dataList包含表格中每行的实际数据，其中每个内部列表代表一行，值与列头相对应。表可以通过headerTextStyle和dataTextStyle属性进行自定义，以便根据需要设置样式。

此外，还可以使用onGenerateRowConfiguration回调函数来定制特定行的配置。fixedCount参数确保前两列在水平滚动时保持固定。

示例代码

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

// 数据列表
static final List<List<dynamic>> dataList = [
  [1, 'John Doe', 'New York', 'Apple', 'Tesla', 'USA', '+1', 'X', 'Y', 'Z', 'W'],
  [2, 'Jane Smith', 'London', 'Banana', 'BMW', 'UK', '+44', 'M', 'N', 'O', 'P'],
  [3, 'Alice Johnson', 'Sydney', 'Orange', 'Mercedes', 'Australia', '+61', 'A1', 'B1', 'C1', 'D1'],
  [4, 'Michael Brown', 'Paris', 'Grapes', 'Audi', 'France', '+33', 'E', 'F', 'G', 'H'],
  [5, 'Emily Davis', 'Berlin', 'Strawberry', 'Porsche', 'Germany', '+49', 'I', 'J', 'K', 'L'],
  [6, 'Chris Wilson', 'Rome', 'Peach', 'Ferrari', 'Italy', '+39', 'M', 'N', 'O', 'P'],
  [7, 'Jessica Lee', 'Madrid', 'Blueberry', 'Seat', 'Spain', '+34', 'Q', 'R', 'S', 'T'],
  [8, 'David Martinez', 'Amsterdam', 'Pineapple', 'Volvo', 'Netherlands', '+31', 'U', 'V', 'W', 'X'],
  [9, 'Sophia Clark', 'Vienna', 'Cherry', 'Skoda', 'Austria', '+43', 'Y', 'Z', 'A2', 'B2'],
  [10, 'Daniel Lewis', 'Zurich', 'Mango', 'BMW', 'Switzerland', '+41', 'C2', 'D2', 'E2', 'F2'],
  [11, 'Olivia Walker', 'Brussels', 'Melon', 'Audi', 'Belgium', '+32', 'G2', 'H2', 'I2', 'J2'],
  [12, 'James Allen', 'Prague', 'Kiwi', 'Tesla', 'Czech Republic', '+420', 'K2', 'L2', 'M2', 'N2'],
];

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

  [@override](/user/override)
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  // 定义列头样式
  final TextStyle? headerTextStyle = const TextStyle(
    fontWeight: FontWeight.bold,
  );
  // 定义数据样式
  final TextStyle? dataTextStyle = const TextStyle(
    fontWeight: FontWeight.w200,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 列头列表
    final headers = [
      const EachCell(
        text: "序号",
        width: 60,
      ),
      const EachCell(
        text: "随机",
        width: 90,
        isExpandable: true,
      ),
      const EachCell(
        text: "成员",
        width: 100,
        isExpandable: true,
      ),
      const EachCell(
        text: "城市",
        width: 100,
      ),
      const EachCell(
        text: "水果",
        width: 100,
      ),
      const EachCell(
        text: "汽车",
        width: 100,
      ),
      const EachCell(
        text: "国家",
        width: 100,
        isExpandable: true,
      ),
      const EachCell(
        text: "代码",
        width: 100,
      ),
      const EachCell(
        text: "随机1",
        width: 100,
      ),
      const EachCell(
        text: "随机2",
        width: 100,
      ),
      const EachCell(
        text: "随机3",
        width: 100,
      ),
    ];

    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: FlutterMultiScrollTable(
        totalWidth: 900,
        height: 480,
        headers: headers,
        headerTextStyle: headerTextStyle,
        dataList: dataList,
        fixedCount: 2,
        onGenerateRowConfiguration: (rowIndex, rowChildren) {
          if (rowIndex == 3) {
            for (int i = 0; i < rowChildren.length; i++) {
              rowChildren[i] = (rowChildren[i]).copyWith(
                  dataBackgroundColor: Colors.blue,
                  dataTextStyle: const TextStyle(
                    color: Colors.white,
                  ));
            }
          }
        },
      ),
    );
  }
}

JSON数据示例

在第二个示例中，FlutterMultiScrollTable被用来处理jsonDataList，其中的列头是基于JSON数据的键自动生成的。然而，如果需要，您仍然可以显式地传递列头。列头将直接映射到JSON键，使从JSON数据创建动态表格变得容易。

示例代码

static final List<Map<String, dynamic>> jsonDataList = [
  {"序号": 1, "随机": "A", "成员": "John Doe", "城市": "New York", "水果": "Apple", "汽车": "Tesla", "国家": "USA", "代码": "+1", "随机1": "X", "随机2": "Y", "随机3": "Z", "随机4": "W"},
  {"序号": 2, "随机": "B", "成员": "Jane Smith", "城市": "London", "水果": "Banana", "汽车": "BMW", "国家": "UK", "代码": "+44", "随机1": "M", "随机2": "N", "随机3": "O", "随机4": "P"},
  {"序号": 3, "随机": "C", "成员": "Alice Johnson", "城市": "Sydney", "水果": "Orange", "汽车": "Mercedes", "国家": "Australia", "代码": "+61", "随机1": "A1", "随机2": "B1", "随机3": "C1", "随机4": "D1"},
  {"序号": 4, "随机": "D", "成员": "Michael Brown", "城市": "Paris", "水果": "Grapes", "汽车": "Audi", "国家": "France", "代码": "+33", "随机1": "E", "随机2": "F", "随机3": "G", "随机4": "H"},
  {"序号": 5, "随机": "E", "成员": "Emily Davis", "城市": "Berlin", "水果": "Strawberry", "汽车": "Porsche", "国家": "Germany", "代码": "+49", "随机1": "I", "随机2": "J", "随机3": "K", "随机4": "L"},
  {"序号": 6, "随机": "F", "成员": "Chris Wilson", "城市": "Rome", "水果": "Peach", "汽车": "Ferrari", "国家": "Italy", "代码": "+39", "随机1": "M", "随机2": "N", "随机3": "O", "随机4": "P"},
  {"序号": 7, "随机": "G", "成员": "Jessica Lee", "城市": "Madrid", "水果": "Blueberry", "汽车": "Seat", "国家": "Spain", "代码": "+34", "随机1": "Q", "随机2": "R", "随机3": "S", "随机4": "T"},
  {"序号": 8, "随机": "H", "成员": "David Martinez", "城市": "Amsterdam", "水果": "Pineapple", "汽车": "Volvo", "国家": "Netherlands", "代码": "+31", "随机1": "U", "随机2": "V", "随机3": "W", "随机4": "X"},
  {"序号": 9, "随机": "I", "成员": "Sophia Clark", "城市": "Vienna", "水果": "Cherry", "汽车": "Skoda", "国家": "Austria", "代码": "+43", "随机1": "Y", "随机2": "Z", "随机3": "A2", "随机4": "B2"},
  {"序号": 10, "随机": "J", "成员": "Daniel Lewis", "城市": "Zurich", "水果": "Mango", "汽车": "BMW", "国家": "Switzerland", "代码": "+41", "随机1": "C2", "随机2": "D2", "随机3": "E2", "随机4": "F2"},
  {"序号": 11, "随机": "K", "成员": "Olivia Walker", "城市": "Brussels", "水果": "Melon", "汽车": "Audi", "国家": "Belgium", "代码": "+32", "随机1": "G2", "随机2": "H2", "随机3": "I2", "随机4": "J2"},
  {"序号": 12, "随机": "L", "成员": "James Allen", "城市": "Prague", "水果": "Kiwi", "汽车": "Tesla", "国家": "Czech Republic", "代码": "+420", "随机1": "K2", "随机2": "L2", "随机3": "M2", "随机4": "N2"},
];

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

  [@override](/user/override)
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  // 定义列头样式
  final TextStyle? headerTextStyle = const TextStyle(
    fontWeight: FontWeight.bold,
  );
  // 定义数据样式
  final TextStyle? dataTextStyle = const TextStyle(
    fontWeight: FontWeight.w200,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: FlutterMultiScrollTable(
        totalWidth: 900,
        height: 480,
        headerTextStyle: headerTextStyle,
        dataTextStyle: dataTextStyle,
        jsonDataList: jsonDataList,
        fixedCount: 2,
      ),
    );
  }
}