当Flutter Drawer提取到自定义小部件时会延迟加载

Question

我的主页上有一个抽屉，里面充斥着内容和逻辑。 例如，我需要获取图像，从Internet获取一些数据等等。 在扩展StatefulWidget新MyCustomDrawerWidget提取Drawer之后，其状态具有如下build功能：

@override
Widget build(BuildContext context) {
  return Drawer(
    child: ...
  );
}

我的HomePageState具有如下build功能：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Home page'),
    ),
    drawer: MyCustomDrawerWidget(),
    body: ...
  );
}

像这样重构代码后，我注意到页面加载时抽屉没有初始化。 它会在我打开抽屉后立即初始化，这很糟糕，因为用户需要等待数据加载。

有没有办法设置抽屉上的急切加载与页面一起初始化？

Answer 1

我有同样的问题。 Scaffold仅在必要时才安装抽屉。

解决方案：将数据加载逻辑移到父窗口小部件中。 您仍然可以将其封装在单独的模型类中（例如DrawerModel ），但是在初始化父窗口小部件时必须实例化该类。 保持在父母的State 。 将DrawerModel传递到您的抽屉小部件。

使用流和期货时，您必须要小心一点，因为通常无法重新订阅。 我建议您在与StreamBuilder中的BehaviorSubject连接的抽屉小部件中使用DrawerModel 。

这就是BLoC模式。 您需要一个代码示例吗？

Answer 2

在MainPage中具有抽屉的问题：

• 内容，更多的逻辑，获取图像，从Internet获取一些数据等等。

在MyCustomDrawerWidget中具有抽屉的问题：

• 加载时间，不良的用户体验

我建议使用hybrid方法来解决问题。

• 在MainPage中触发网络呼叫
• 将future发送到MyCustomDrawerWidget （如果用户在网络调用完成之前打开抽屉，我们可以根据未来值显示加载程序）

• 将与抽屉有关的逻辑和内容移动到MyCustomDrawerWidget中。

   class MyCustomDrawerWidget extends StatelessWidget { var _future; MyCustomDrawerWidget(this._future); @override Widget build(BuildContext context) { return new Drawer( child: FutureBuilder( builder: (context, snapshot) { if (snapshot.hasData) { var data = snapshot.data; return new Text(data); } else { return new Text("loading"); } }, future: _future, ), ); } } 

而在MainPage中

@override
Widget build(BuildContext context) {
  val future = Future.delayed(Duration(seconds: 10), () => "new value") //network call
  return Scaffold(
      appBar: AppBar(
        title: Text('Home page'),
      ),
      drawer: MyCustomDrawerWidget(future),
      body: ...
  );
}

希望这可以帮助。