Flutter网格查找插件grid_lookup的使用

Flutter网格查找插件grid_lookup的使用

简介

Grid Lookup 是一个为 Flutter 应用程序提供的网格查找小部件，用于在表单中高效地选择数据。

特性

• 可定制的网格显示
• 搜索和过滤功能
• 易于与现有的 Flutter 应用程序集成

安装

要在你的项目中使用 grid_lookup 插件，你需要将它添加到你的 pubspec.yaml 文件中：

dependencies:
  grid_lookup:

运行 flutter pub get 来安装该依赖。

使用示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 Grid Lookup 小部件。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    // 创建一些示例产品数据
    List<Product> products = [
      Product('笔记本电脑', 999.99, 20),
      Product('手机', 499.99, 50),
      Product('平板电脑', 299.99, 30),
    ];

    // 将产品数据转换为 Map<String, dynamic>
    List<Map<String, dynamic>> productData = products.map((p) => p.toMap()).toList();

    // 创建数据源
    final dataSource = GridLookupDataSorce<Map<String, dynamic>>(
      data: productData,
      columns: ['productName', 'price', 'stock'], // 定义要显示的列
    );

    return MaterialApp(
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: Text("颜色方案切换"),
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 使用 GridLookup 小部件
                  GridLookup<Map<String, dynamic>>(
                    dataSource: dataSource,
                    inputHeight: 50,
                    buttonSize: 50,
                    inputWidth: 300,
                    tableHeight: 200,
                    onSelectedMenu: (selectedValue) {
                      print('Selected: $selectedValue');
                    },
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

// 定义一个产品类
class Product extends GridLookupClass {
  final String productName;
  final double price;
  final int stock;

  Product(this.productName, this.price, this.stock);

  // 将 Product 对象转换为 Map<String, dynamic>
  Map<String, dynamic> toMap() {
    return {
      'productName': productName,
      'price': price,
      'stock': stock,
    };
  }
}

代码解释

1. 导入必要的库

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

2. 定义主应用类

   class MyApp extends StatefulWidget {
     @override
     _MyAppState createState() => _MyAppState();
   }
   

3. 创建状态类并初始化产品数据

   class _MyAppState extends State<MyApp> {
     bool _isDarkMode = false;
   
     @override
     Widget build(BuildContext context) {
       List<Product> products = [
         Product('笔记本电脑', 999.99, 20),
         Product('手机', 499.99, 50),
         Product('平板电脑', 299.99, 30),
       ];
   

4. 将产品数据转换为 Map<String, dynamic> 类型

       List<Map<String, dynamic>> productData = products.map((p) => p.toMap()).toList();
   

5. 创建数据源

       final dataSource = GridLookupDataSorce<Map<String, dynamic>>(
         data: productData,
         columns: ['productName', 'price', 'stock'],
       );
   

6. 构建应用界面

       return MaterialApp(
         themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
         home: Scaffold(
           appBar: AppBar(
             title: Text("颜色方案切换"),
           ),
           body: Builder(
             builder: (context) {
               return Center(
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     GridLookup<Map<String, dynamic>>(
                       dataSource: dataSource,
                       inputHeight: 50,
                       buttonSize: 50,
                       inputWidth: 300,
                       tableHeight: 200,
                       onSelectedMenu: (selectedValue) {
                         print('Selected: $selectedValue');
                       },
                     ),
                   ],
                 ),
               );
             },
           ),
         ),
       );
     }
   }
   

7. 定义产品类

   class Product extends GridLookupClass {
     final String productName;
     final double price;
     final int stock;
   
     Product(this.productName, this.price, this.stock);
   
     Map<String, dynamic> toMap() {
       return {
         'productName': productName,
         'price': price,
         'stock': stock,
       };
     }
   }