Question

我有一个有状态的小部件，可以构建一个脚手架。我在脚手架中使用抽屉作为侧面菜单。同样，支架的主体是FutureBuilder，它从Firestore数据库获取数据并在主体的Card中显示信息。打开抽屉时似乎出现问题，这将导致车身重建，并且FutureBuilder中的future再次查询数据。弹出抽屉时再次发生这种情况。我在appbar和bottomNavigationBar的Scaffold中都有其他按钮，可以导航到不同的路线。在导航这些路线时不会重建车身。任何人都可以帮助我解释为什么抽屉会发生这种情况？

下面是代码片段。

谢谢

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以获取更多信息。

build方法的设计方式应使其纯净/无副作用。这是因为许多外部因素都可以触发新的小部件构建，例如：

路由弹出/推送屏幕尺寸调整，通常是由于键盘外观或方向改变父小部件重新创建了它的子级小部件依赖于（Class.of（context）模式）更改的InheritedWidget 这意味着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故意不会重建孩子。这意味着您可以缓存小部件树的一部分，以防止不必要的重建。

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

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

由于使用了const关键字，即使构建被调用了数百次，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。

您也可以将子树存储到类的字段中，尽管不建议这样做，因为它破坏了热重载功能。

打开“抽屉”菜单时，将重建脚手架的主体

1 个答案: