Flutter表格样式插件stylish_table的使用

创建一个非常简单的表格，并且可以轻松地自定义其样式。该插件提供了简洁美观的用户界面，使您可以轻松地在Flutter应用中集成表格。

表格示例

🚀 特性

• 🎨 美观的UI：使用现代设计轻松创建惊艳的表格。
• 🛠 清洁的代码：StylishTable鼓励编写可维护和易读的代码。
• 🚀 快速集成：只需少量设置即可快速将漂亮的表格集成到您的Flutter应用中。
• 🌐 响应式设计：确保不同屏幕尺寸下的无缝用户体验。
• 🎨 自定义：使用多种样式选项（如颜色、字体和边框）来定制表格的外观。

📦 安装

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

dependencies:
  stylish_table: ^1.0.1

或者，您也可以通过终端运行以下命令：

$ flutter pub add stylish_table

然后，运行：

$ flutter pub get

使用

首先，在您的代码中导入stylish_table包：

import 'package:stylish_table/stylish_table.dart';

之后，您可以轻松地使用它。以下是StylishTable的基本实现示例：

StylishTable(
  tableData: tableData,
  titleData: titleData,
  titleBackgroundColor: Colors.deepPurple,
),

完整的修改后的代码如下：

StylishTable(
  tableData: tableData,
  titleData: titleData,
  titleBackgroundColor: Colors.deepPurple,
  rowTextColor: Colors.white,
  tableBodyHeight: double.infinity,
  tableBodyWidth: double.infinity,
  tableRowHeight: 45,
  titleRowHeight: 45,
  titleTextColor: Colors.white,
  firstRowColor: Colors.green,
  secondRowColor: Colors.black38,
),

您需要以列表或集合的形式准备数据。以下是一个示例，展示了如何设置表格的标题栏变量：

List<String> titleData = [
  "ID",
  "BetAmount",
  "Win/Loss",
  "Result",
];

接下来，以下是表格数据变量和集合的示例：

final Map<String, Map<String, String>> tableData = {
  'row1' : { 'id' : 'ID1', 'betAmount' : '500', 'winLoss' : '+1500', 'result' : 'Win' },
  'row2' : { 'id' : 'ID2', 'betAmount' : '100', 'winLoss' : '-100', 'result' : 'Loss' },
  'row3' : { 'id' : 'ID3', 'betAmount' : '300', 'winLoss' : '-100', 'result' : 'Loss' },
  'row4' : { 'id' : 'ID4', 'betAmount' : '50', 'winLoss' : '+500', 'result' : 'Win' },
  'row5' : { 'id' : 'ID5', 'betAmount' : '700', 'winLoss' : '-700', 'result' : 'Loss' },
  'row6' : { 'id' : 'ID6', 'betAmount' : '500', 'winLoss' : '+1500', 'result' : 'Win' },
};

只有以这种形式使用数据，才能避免错误。否则，可能会遇到一些错误或问题。

示例代码

以下是从GitHub中获取的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stylish_table/stylish_table.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> titleData = [
    "ID",
    "BetAmount",
    "Win/Loss",
    "Result",
  ];

  final Map<String, Map<String, String>> tableData = {
    'row1' : { 'id' : 'ID1', 'betAmount' : '500', 'winLoss' : '+1500', 'result' : 'Win' },
    'row2' : { 'id' : 'ID2', 'betAmount' : '100', 'winLoss' : '-100', 'result' : 'Loss' },
    'row3' : { 'id' : 'ID3', 'betAmount' : '300', 'winLoss' : '-100', 'result' : 'Loss' },
    'row4' : { 'id' : 'ID4', 'betAmount' : '50', 'winLoss' : '+500', 'result' : 'Win' },
    'row5' : { 'id' : 'ID5', 'betAmount' : '700', 'winLoss' : '-700', 'result' : 'Loss' },
    'row6' : { 'id' : 'ID6', 'betAmount' : '500', 'winLoss' : '+1500', 'result' : 'Win' },
    'row7' : { 'id' : 'ID7', 'betAmount' : '100', 'winLoss' : '-100', 'result' : 'Loss' },
    'row8' : { 'id' : 'ID8', 'betAmount' : '300', 'winLoss' : '-100', 'result' : 'Loss' },
    'row9' : { 'id' : 'ID9', 'betAmount' : '50', 'winLoss' : '+500', 'result' : 'Win' },
    'row10' : { 'id' : 'ID10', 'betAmount' : '700', 'winLoss' : '-700', 'result' : 'Loss' },
    'row11' : { 'id' : 'ID11', 'betAmount' : '500', 'winLoss' : '+1500', 'result' : 'Win' },
    'row12' : { 'id' : 'ID12', 'betAmount' : '100', 'winLoss' : '-100', 'result' : 'Loss' },
    'row13' : { 'id' : 'ID13', 'betAmount' : '300', 'winLoss' : '-100', 'result' : 'Loss' },
    'row14' : { 'id' : 'ID14', 'betAmount' : '50', 'winLoss' : '+500', 'result' : 'Win' },
    'row15' : { 'id' : 'ID15', 'betAmount' : '700', 'winLoss' : '-700', 'result' : 'Loss' },
    'row16' : { 'id' : 'ID16', 'betAmount' : '700', 'winLoss' : '-700', 'result' : 'Loss' },
    'row17' : { 'id' : 'ID17', 'betAmount' : '700', 'winLoss' : '-700', 'result' : 'Loss' },
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: StylishTable(
        tableData: tableData,
        titleData: titleData,
        titleBackgroundColor: Colors.black,
        titleTextColor: Colors.white,
        rowTextColor: Colors.white70,
        // tableBodyHeight: double.infinity,
        // tableBodyWidth: double.infinity,
        // tableRowHeight: 45,
        // titleRowHeight: 45,
        // firstRowColor: Colors.green,
        // secondRowColor: Colors.black38,
      ),
    );
  }
}