如何在 Flutter/Dart 中使用 Hive 框和索引以简单的方式将数据动态加载到 DataTable？

Posted 2023-04-14

【中文标题】如何在 Flutter/Dart 中使用 Hive 框和索引以简单的方式将数据动态加载到 DataTable？

【英文标题】：How to dynamically load data to DataTable in a SIMPLE fashion with Hive box & indexing in Flutter/Dart?

【发布时间】：2021-06-04 17:20:14

【问题描述】：

我想要一种非常简单的方法来动态填充我的 DataTable，并能够在添加新数据时刷新它，以便它立即更新和重建。以最简单的方式使用 Hive 盒。

我正在使用 Hive 加密盒子，但这并不重要

我提出这个问题，并在下面给出答案。我花了很多时间来发现这一点，因为使用 Hive 盒和 SIMPLE 找不到其他类似的东西。我真的希望这对其他人有所帮助，作为一名绿色开发人员，我在 SO 上得到了很多帮助。我很自豪我可以回报恩惠。

我有一个带有适配器并已注册到 Hive 的类

import 'package:hive/hive.dart';
part 'person.g.dart';

@HiveType(typeId: 0)
class Person 
  @HiveField(0)
  final String firstName;
  @HiveField(1)
  final String lastName;
  @HiveField(2)
  final int age;
  @HiveField(3)
  final String Status;
  Person(
    this.firstName,
    this.lastName,
    this.age,
    this.status,
  );
  @override
  String toString() 
    return '$this.firstName, $this.lastName, $this.age, $this.status';
  

按下按钮时保存到蜂巢

onPressed: () 
                  final newPersonData = Person(
                    _firstName,
                    _lastName,
                    int.parse(_age),
                    _status,
                  );

                  addPerson(newPersonData);

                  var box = Hive.box(personTable);
                  for (var index in box.values) 
                    print(index);
                  
                ,

数据表构建方法

  _buildDataTable() 
        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: const <DataColumn>[
              DataColumn(
                label: Text('First'),
              ),
              DataColumn(
                label: Text('Last'),
              ),
              DataColumn(
                label: Text('Age'),
              ),
              DataColumn(
                label: Text('Status'),
              ),
            ],
            rows: List<DataRow>
                                    // How to dynamically load cells in a ***SIMPLE*** manner?
                );
              ,
            ),
          ),
        );
      

【参考方案1】：

数据表构建方法

  _buildDataTable() 
    final hiveBox = Hive.box(personTable);

    return ValueListenableBuilder(
      valueListenable: Hive.box(personTable).listenable(),
      builder: (context, personBox, _) 
        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: const <DataColumn>[
              DataColumn(
                label: Text('First'),
              ),
              DataColumn(
                label: Text('Last'),
              ),
              DataColumn(
                label: Text('Age'),
              ),
              DataColumn(
                label: Text('Status'),
              ),
            ],
            rows: List<DataRow>.generate(
              hiveBox.length,
              (index) 
                final person = hiveBox.getAt(index) as Person;
                return DataRow(
                  cells: [
                    DataCell(Text(person.firstName)),
                    DataCell(Text(person.lastName)),
                    DataCell(Text(person.age.toString())),
                    DataCell(Text(person.status))
                  ],
                );
              ,
            ),
          ),
        );
      ,
    );
  

说明

我会尽可能多地解释我在上面所做的事情。

ValueListenableBuilder - 此方法侦听 Hive.box 的添加，并在发生任何新更新时刷新。如果没有此方法，DataTable 将不会在添加数据时重建。 DataRow.generate() 方法允许您遍历想要遍历的任何内容，在我的例子中，它的字符串来自我的 Person 对象，而后者又来自我的加密 Hive。

差不多了！超级简单-希望这可以帮助其他人:)

编辑：我注意到应该使用 watch() 而不是 ValueListenableBuilder() 以及此应用程序呈现整个图表的重要事实。对于我的应用程序来说，这没问题，因为我没有使用太多数据进行构建。值得深思。

【讨论】：

顺便说一句，你也可以使用watch方法——在某些情况下Stream接口比ValueListenable更好

嘿，很高兴知道！我要试试看

似乎listenable() 在后台使用watch()：github.com/hivedb/hive/blob/master/hive_flutter/lib/src/…

此解决方案已损坏，与 ListView.builder 完全不同。在 ListView.builder 中打印，您会看到只构建了当前视图所需的行（加上一些超调）。在此处尝试相同的操作，您会看到整个表格都已构建完毕，甚至还有许多屏幕外的行。

你还不如说rows: hiveBox.map((person) => DataRow(...)).toList()简单得多。