首页 文章

颤动:在启动时初始化变量

提问于
浏览
1

我正在尝试使用SharedPreferences中保存的值来初始化我的应用程序中的几个变量 . 在Flutter中,SharedPreferences是异步的,因此它导致变量稍后在代码中初始化,这会导致我的应用程序出现问题,因为在调用构建方法时,某些变量为null .

这是我写的一个小测试Flutter应用程序,用于演示此问题:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

class TestingApp extends StatefulWidget {

  TestingApp() {}

  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return new _CupertinoNavigationState();
  }
}

class _CupertinoNavigationState extends State<TestingApp> {

  int itemNo;

  @override
  void initState() {
    super.initState();
//    SharedPreferences.getInstance().then((sp) {
//      sp.setInt("itemNo", 3);
//    });
    SharedPreferences.getInstance().then((sp)  {
      print("sp " + sp.getInt("itemNo").toString());
      setState(() {
        itemNo = sp.getInt("itemNo");
      });
    });
    print("This is the item number " + itemNo.toString());
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    print("item number on build " + itemNo.toString());
    return new Text("Hello");
  }
}

这是控制台中的结果:

Performing full restart...
flutter: This is the item number null
flutter: item number on build null // build method being called and variable is null
Restarted app in 1 993ms.
flutter: sp 3
flutter: item number on build 3

您可以看到,当我尝试在启动时从SharedPreferences获取变量时,由于SharedPreference是异步的,因此itemNo为null . 然后app运行构建方法并在itemNo = null上运行构建方法,这会导致应用程序崩溃 .

一旦从SharedPreferences获取值,我调用setState,然后再使用正确的值再次调用构建方法 . 但是,不应该发生使用itemNo = null进行构建的初始调用 .

我希望SharedPreferences有一个synch方法,但它似乎不存在 . 如何运行应用程序以便在启动时在Flutter中正确初始化变量?

我尝试通过使用同步方法来解决这个问题,通过写入json文件来初始化我的变量,然后使用以下简短的Flutter测试应用程序从中读取 - 对我来说,这似乎是过度的,因为保存变量以初始化但我仍然尝试了一下:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

class TestingApp extends StatefulWidget {

  TestingApp() {}

  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return new _CupertinoNavigationState();
  }
}

class _CupertinoNavigationState extends State<TestingApp> {

  int itemNo;
  File  jsonFile;
  String fileName = "items.json";
  Directory dir;
  bool fileExists = false;

void createFile(Map content, Directory dir, String fileName) {
//  print("Creating file for category " + dir.path);
  File file = new File(dir.path + "/" + fileName);
  file.createSync();
  fileExists = true;
  file.writeAsStringSync(json.encode(content));
}

void writeToFile(int itemNo) {
//  print("Writing to category file");
  Map itemMap = new Map();
  itemMap['item'] = itemNo;
  if (fileExists) {
    print("category file exists");
    Map jsonFileContent = json.decode(jsonFile.readAsStringSync());
    jsonFileContent.addAll(itemMap);
    jsonFile.writeAsStringSync(json.encode(itemMap));
  } else {
    print("category File does not exists");
    getApplicationDocumentsDirectory().then((Directory directory) {
      dir = directory;
      createFile(itemMap, dir, fileName);
    });

  }
}

fetchSavedItemNo() {
  //load the currency from the saved json file.
  getApplicationDocumentsDirectory().then((Directory directory) {
    dir = directory;
    jsonFile = new File(dir.path+ "/" + fileName);
    fileExists = jsonFile.existsSync();
    setState(() {
      if (fileExists)
        itemNo = json.decode(jsonFile.readAsStringSync())['item'];
      print("fetching saved itemNo " +itemNo.toString());
      if (itemNo == null) {
        itemNo = 0;
      }
    });


    return itemNo;
    //else the itemNo will just be 0
  });
}

  @override
  void initState() {
    super.initState();
    writeToFile(3);
    setState(() {
      itemNo = fetchSavedItemNo();
    });

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    print("item number on build " + itemNo.toString());
    return new Text("Hello");
  }
}

我仍然有结果,在变量完全初始化之前调用构建方法,导致应用程序崩溃 .

Performing full restart...
flutter: category File does not exists
flutter: item number on build null   // the build method is called here
Restarted app in 1 894ms.
flutter: fetching saved itemNo 3
flutter: item number on build 3

如何在应用启动时初始化Flutter中的变量?

1 回答

  • 2

    正如Günter Zöchbacher正确指出的那样, FutureBuilder 是要走的路 . 在你的情况下,它看起来像这样:

    import 'dart:async'; // you will need to add this import in order to use Future's
    
    Future<int> fetchSavedItemNo() async { // you need to return a Future to the FutureBuilder
        dir = wait getApplicationDocumentsDirectory();
        jsonFile = new File(dir.path+ "/" + fileName);
        fileExists = jsonFile.existsSync();
    
        // you should also not set state because the FutureBuilder will take care of that
        if (fileExists)
            itemNo = json.decode(jsonFile.readAsStringSync())['item'];
    
        itemNo ??= 0; // this is a great null-aware operator, which assigns 0 if itemNo is null
    
        return itemNo;
    }
    
    @override
    Widget build(BuildContext context) {
        return FutureBuilder<int>(
            future: fetchSavedItemNo,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                 if (snapshot.connectionState == ConnectionState.done) {
                     print('itemNo in FutureBuilder: ${snapshot.data}';
                     return Text('Hello');
                 } else
                     return Text('Loading...');
            },
        );
    }
    

    我也相应地更改了 fetchSavedItemNo 函数以返回 Future .

    一种较短的写作方式:

    if (itemNo != null)
        itemNo = 0;
    

    以下是使用null-aware operator

    itemNo ??= 0;
    

    结论

    正如您在我的代码中看到的那样,我用 FutureBuilder 包围了您的 Text Widget . 在Flutter中,您使用 Widget 解决了大多数问题 . 我还介绍了一个"Loading..." Text ,它可以替代"Hello" TextitemNo 仍然被加载 .

    没有"hack"将删除加载时间并允许您在启动时访问 itemNo . 你可以这样做,惯用,方式或延迟你的启动时间 .

    每次加载东西时都需要使用占位符来加载,因为它不是即时可用的 .

    其他

    顺便说一句,您也可以删除"Loading..." Text 并始终返回"Hello"文本,因为在您的情况下,"Loading..." Text ,它只是发生得太快了 .

    另一种选择是避免 ConnectionState ,如果没有数据则只返回 Container

    FutureBuilder<int>(
        future: fetchSavedItemNo,
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) => snapshot.hasData 
            ? Text(
                'Hello, itemNo: ${snapshot.data}',
              )
            : Container(),
    )
    

    如果您的UI不受影响

    您可以使用我的 fetchSavedItemNo 函数在 initState 中执行您的API逻辑,方法是 initState async,如下所示:

    @override
    void initState() {
        super.initState();
        fetchSavedItemNo(); // continue your work in the `fetchSavedItemNo` function
    }
    

相关问题