时间戳

首页 > 解决方案 > 如何在构建之前将 sqflite 数据预加载到变量中？

android - 如何在构建之前将 sqflite 数据预加载到变量中？

问题描述

我在 sqflite 中有我的数据，我希望我的小部件树使用存储在数据库中的数据构建，但是，颤振在从数据库中检索数据之前构建小部件。

我试过：使用future builder，但在应用程序的完整版本（此处未显示）中，我有一个线性进度条动画，当动画播放时将触发整个小部件树的重建。这会导致未来的构建器显示一个“正在加载”的圆形进度条来代替已经构建的小部件。

我认为我不需要未来的构建器，因为我只需要从数据库中检索数据以将它们存储为变量。

下面的代码是我试图解决的问题的最小表示，下面的代码会引发异常NoSuchMethodError (NoSuchMethodError: The method '[]' was called on null.，因为数据库尚未完全加载。我希望 sqflite 中的数据可用于构建小部件树，我该如何实现？

import 'package:flutter/material.dart';
import 'package:phonica/sql/service.dart';

class Testing extends StatefulWidget {
  const Testing({Key? key}) : super(key: key);

  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> with TickerProviderStateMixin {
  final _databaseService = DatabaseService();
  var data;

  @override
  void initState() {
    super.initState();
    loadData();
  }

  loadData() async {
    var cramModel = await _databaseService.readDatabaseTable();
    data = cramModel[1];
    return data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo[50],
      body: Container(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Center(
                  child: Text(
                    data["WORD_EN"], <--- EXCEPTION ERROR
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

标签： androidflutterdart

解决方案

在您的 loadData 函数中，您可以设置状态数据，以便在加载数据时重建小部件。

void loadData() async {

    var cramModel = await _databaseService.readDatabaseTable();
    
    setState(() {
       data = cramModel[1];
    });

    // return data; -> unecessary
}

在您想要访问数据的构建函数中，您应该检查数据是否为空或为空，如果这样您可以显示替代方案（ProgressIndicator）。

@override
Widget build(BuildContext context) {
    return Scaffold(
    backgroundColor: Colors.indigo[50],
    body: Container(
        child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
                return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                         Center(
                              child: data == null || data.isEmpty ? 
                                     CircularProgressIndicator() : 
                                     Text(data["WORD_EN"],),
                         ),
                    ],
                );
            },
        ),
    ),
);

如果您更喜欢使用类型化变量而不是 var，您还可以检查数据是否包含键值对。

这是我的意思的一个例子。

Map<String, dynamic> data;
...
data == null || data.isEmpty ? CircularProgressIndicator() : Text(data.containsKey("WORD_EN") ? data["WORD_EN"] : "No data")

推荐阅读