Flutter：编码以便逻辑等到 class 成员被填充后再在屏幕上呈现应用程序

Question

一个 flutter 新手，我试图让我的应用程序从本地 json 文件中获取值并将它们呈现在屏幕上。

在屏幕上呈现应用程序之前，逻辑不会等待 class 构造函数填充相关的字符串变量。

这是说明我的问题的代码。

首先，我的 main.dart 文件：

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'sampleDataClass.dart';
import 'package:provider/provider.dart';

String assetFilePath = 'assets/basicData.json';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterError.onError = (details) {
    FlutterError.presentError(details);
    if (kReleaseMode) exit(1);
  };

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {

  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: const MaterialApp(
        title: "Sample screen",
        home: MyHomePage(),
      )
    );
  }
}

class MyAppState extends ChangeNotifier {
  SampleDataClass current = SampleDataClass(assetFilePath);
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});


  @override
  Widget build(BuildContext context) {
    var myAppState = context.watch<MyAppState>();

    var myAppBasicData = myAppState.current;

    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.indigo,
          foregroundColor: Colors.amberAccent,
          title: const Text("This is the App Bar"),
          elevation: 10,
        ),
        body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(children: [
                Expanded(
                    child: Container(
                        color: Colors.blueGrey,
                        padding: const EdgeInsets.all(10),
                        child: (
                            Text(myAppBasicData.language,
                                style: const TextStyle(
                                  color: Colors.white,
                                ))))),
              ]),
            ]
        ),
    );
  }
}

这是我的 SampleDataClass.dart 文件：

import 'dart:core';
import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;

class SampleDataClass {
  String classFilePath = "";

  String language = "not populated";
  String batteryName = "not populated";

  SampleDataClass(filePath) {
    rootBundle.loadString(filePath).then((jsonDataString) {
      Map classDataMap = jsonDecode(jsonDataString);
      language = classDataMap['language'];
      print(language);
      batteryName = classDataMap['batteryName'];
      print(batteryName);
    });
  }

  Map<String, dynamic> toJson() => {
    'language': language,
    'batteryName': batteryName,
  };
}

这是我的 pubspec.yaml 文件：

name: samples
description: A new Flutter project.

environment:
  sdk: '>=2.18.6 <3.0.0'

  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  provider: ^4.1.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/basicData.json

最后，我的 basicData.json 文件如下所示：

{
  "language": "English",
  "batteryName": "Exercise 32"
}

sampleDataClass class 中的打印语句工作正常，但如您所见，如果您运行代码（从命令行使用“flutter run --no-sound-null-safety”），应用程序会在之前呈现变量的初始值class 构造函数将 json 值分配给它们。

我期望的是 class 构造函数完成将相关的 json 值写入 class 成员，然后将 class 实例返回给 main.dart 中的构建小部件以在屏幕上呈现应用程序。

我意识到这是一个非常初级的问题，但对我来说却是一个关键的悬而未决的学习任务！

非常感谢大家！

Answer 1

看起来 rootBundle 是一个异步 function，你必须等到它完成，然后你通知 UI 来渲染新数据，

如何处理：

• 你应该有 3 个状态loading state ， error state ， loaded state ，

• 在返回 SampleDataClass 实例的 SampleDataClass class 中创建一个init(path) function。

• 此外，在init() function 一开始你必须将 state 更改为loading state然后当你获取数据时将 state 设置为loaded state ，然后通知听众这将帮助屏幕知道页面中的 882714148374 .

• 在屏幕中，调用 didChangeDependencies() 并在其中调用您的 Provider => init function ( current = contecxt.read<YPUR_PROVIDER>().init(path); )

• 因此current object 正在初始化，页面显示加载器，一旦初始化完成，提供者将通知页面并将加载视图更改为加载视图（您的当前视图）。

另一个提示：：只要出现错误，您的应用程序就会关闭，这不是一个好的做法，因为 flutter 将通过非致命异常

 FlutterError.onError = (details) {
FlutterError.presentError(details);
if (kReleaseMode) exit(1);

Answer 2

可以选择两种出色的解决方案来解决我的问题，只需很少的努力，并且不需要任何变更管理（目前）。

事实上，所描述的问题是如此相似，我可能应该在我在这里发布此查询之前找到它。 作为这个学科的新手，我显然没有用合适的关键词进行搜索； 为此我深表歉意！

非常感谢大家的耐心等待。

可以在此处找到两个解决方案选项（我什至能够遵循）：

从 Dart 中的构造函数调用异步方法