时间戳

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

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

问题描述

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

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

我提出这个问题并在下面给出答案。我花了很多时间来发现这一点，因为使用 Hive box 和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?
                );
              },
            ),
          ),
        );
      }

标签： flutterindexingdatatableflutter-hive

解决方案

数据表构建方法

  _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() 以及这个应用程序呈现整个图表的重要事实。对于我的应用程序来说，这没问题，因为我没有使用太多数据进行构建。深思熟虑。

推荐阅读