flutter - 打开抽屉菜单时重建脚手架主体

Question

我有一个有状态的小部件，它构建了一个脚手架。我在脚手架中使用一个抽屉作为侧面菜单。此外，Scaffold 的主体是一个 FutureBuilder，它从 firestore 数据库获取数据并将信息显示在主体的卡片中。打开抽屉时似乎出现问题，导致主体被重建，FutureBuilder 中的 future 再次查询数据。当抽屉被弹出时，这种情况会再次发生。我在应用程序栏和底部导航栏的脚手架中都有其他按钮来导航到不同的路线。在这些 route 航行时， body 不会被重建。谁能帮忙解释为什么抽屉会发生这种情况吗？

下面是代码片段。

谢谢

class CustomScaffoldState extends State<CustomScaffold> {

Widget build(BuildContext context) {

  return Scaffold(
    drawer: sideMenu(widget.username),

    body: FutureBuilder(
          future: getData(),
          builder: (context, snapshot) {
             if (snapshot.connectionState == ConnectionState.done) {
                 //return the Card with Info
               }
             if (snapshot.hasError) {
                print('Error');
                 }
             else{
                //return a CircularProgressIndicator
                 }
            }
           ));

//appbar and bottomNavigation bar also implemented
}
}

Answer 1

当抽屉或软键盘打开时屏幕状态发生变化，有时会自动重新加载构建方法，请检查this link了解更多信息。

构建方法的设计方式应该是纯粹的/没有副作用。这是因为许多外部因素可以触发新的小部件构建，例如:

路由弹出/推送屏幕大小调整，通常是由于键盘外观或方向变化父部件重新创建了其子部件小部件依赖的 InheritedWidget (Class.of(context) 模式) 更改这意味着 build 方法不应触发 http 调用或修改任何状态。

这与问题有什么关系？

您面临的问题是您的构建方法有副作用/不纯粹，使得无关的构建调用变得麻烦。

您不应该阻止构建调用，而应该使构建方法变得纯粹，以便可以随时调用它而不会产生影响。

在您的示例中，您需要将您的小部件转换为 StatefulWidget，然后将该 HTTP 调用提取到您的状态的 initState:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  Future<int> future;

  @override
  void initState() {
    future = Future.value(42);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        // create some layout here
      },
    );
  }
}

我已经知道了。我来这里是因为我真的想优化重建

也可以使一个小部件能够重建，而无需强制其子部件也进行构建。

当小部件的实例保持不变时； Flutter 不会故意重建 child 。这意味着您可以缓存小部件树的部分内容以防止不必要的重建。

最简单的方法是使用 dart const 构造函数:

@override
Widget build(BuildContext context) {
  return const DecoratedBox(
    decoration: BoxDecoration(),
    child: Text("Hello World"),
  );
}

多亏了 const 关键字，即使 build 被调用数百次，DecoratedBox 的实例也将保持不变。

但是您可以手动实现相同的结果:

@override
Widget build(BuildContext context) {
  final subtree = MyWidget(
    child: Text("Hello World")
  );

  return StreamBuilder<String>(
    stream: stream,
    initialData: "Foo",
    builder: (context, snapshot) {
      return Column(
        children: <Widget>[
          Text(snapshot.data),
          subtree,
        ],
      );
    },
  );
}

在此示例中，当 StreamBuilder 收到新值通知时，即使 StreamBuilder/Column 进行重建，子树也不会重建。发生这种情况是因为，由于关闭，MyWidget 的实例没有改变。

这种模式在动画中被大量使用。典型用途是 AnimatedBuilder 和所有过渡，例如 AlignTransition。

您还可以将子树存储到类的字段中，但不推荐这样做，因为它会破坏热重载功能。