如何在 Flutter Provider 中正确初始化 Future

Question

所以我正在尝试通过 Future Call 在我的提供者中建立一个列表。

到目前为止，我在下面有以下 ChangeNotifier 类：

class MainProvider extends ChangeNotifier {
  List<dynamic> _list = <dynamic>[];
  List<dynamic> get list => _list;
  int count = 0;

  MainProvider() {
    initList();
  }

  initList() async {
    var db = new DatabaseHelper();

    addToList(Consumer<MainProvider>(
        builder: (_, provider, __) => Text(provider.count.toString())));

    await db.readFromDatabase(1).then((result) {
      result.forEach((item) {
        ModeItem _modelItem= ModeItem.map(item);

        addToList(_modelItem);
      });
    });
  }

  addToList(Object object) {
    _list.add(object);
    notifyListeners();
  }

  addCount() {
    count += 1;
    notifyListeners();
  }
}

但是，每当我使用 list 值时，都会发生这种情况：

1. 我可以确认我的 initList 函数正在正确执行
2. list 值中可用的初始内容是 我首先通过addToList函数插入的Text()小部件，这意味着此时列表中似乎只有一项
3. 当我执行热重载时，列表的其余内容现在似乎出现了

注意事项：

1. 我在 AnimatedList 小部件中使用 list 的值，所以我是 应该显示 list 的内容
2. 最初出现的是我的list值的内容只有一项
3. 我的 list 值似乎不会在 执行我的 Future 调用
4. 但是，当我尝试调用 addCount 函数时，它正常 更新 count 的值而不需要执行 Hot Reload - 这个似乎运行正常
5. Future 调用似乎没有正确更新 我的列表值的内容

我真正担心的是，在初始加载时，我的列表值不会 按预期正确初始化它的所有值

希望你们能帮助我解决这个问题。谢谢。

更新：下面显示了我如何使用上面的 ChangeNotifierClass

class ParentProvider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<MainProvider>(
          create: (context) => MainProvider(),
        ),
      ],
      child: ParentWidget(),
    );
  }
}

class ParentWidget extends StatelessWidget {
  final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    var mainProvider = Provider.of<MainProvider>(context);

    buildItem(BuildContext context, int index, Animation animation) {
      print('buildItem');

      var _object = mainProvider.list[index];
      var _widget;

      if (_object is Widget) {
        _widget = _object;
      } else if (_object is ModelItem) {
        _widget = Text(_object.unitNumber.toString());
      }

      return SizeTransition(
        key: ValueKey<int>(index),
        axis: Axis.vertical,
        sizeFactor: animation,
        child: InkWell(
          onTap: () {
            listKey.currentState.removeItem(index,
                (context, animation) => buildItem(context, index, animation),
                duration: const Duration(milliseconds: 300));
            mainProvider.list.removeAt(index);
            mainProvider.addCount();
          },
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(32.0),
              child: _widget,
            ),
          ),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: mainProvider.list == null
              ? Container()
              : AnimatedList(
                  key: listKey,
                  initialItemCount: mainProvider.list.length,
                  itemBuilder:
                      (BuildContext context, int index, Animation animation) =>
                          buildItem(context, index, animation),
                ),
        ),
      ),
    );
  }
}

Answer 1

您正在从StatelessWidget 检索您的提供程序。因此，ChangeNotifier 无法触发您的小部件重建，因为没有要重建的状态。您必须将ParentWidget 转换为StatefulWidget，或者您需要使用Consumer 而不是Provider.of 让您的提供者：

class ParentWidget extends StatelessWidget {
  final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return Consumer<MainProvider>(
      builder: (BuildContext context, MainProvider mainProvider, _) {
        ...
      }
    );
  }

---

顺便说一句，您使用提供程序的方式是将MainProvider 添加到其提供程序，然后从其直接子项中检索它。如果这是您检索MainProvider 的唯一位置，这会使提供者模式变得多余，因为您可以轻松地在ParentWidget 中声明它，或者甚至只是使用FutureBuilder 获取图像列表。使用提供程序是实现正确状态管理的良好一步，但也要小心过度设计您的应用程序。