flutter - 如何处理不需要的小部件构建？

Question

由于各种原因，有时会再次调用我的小部件的build方法。

我知道这是因为 parent 更新了。但这会导致不良影响。它导致问题的典型情况是这样使用 FutureBuilder:

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

在此示例中，如果再次调用 build 方法，它将触发另一个 HTTP 请求。这是不希望的。

考虑到这一点，如何处理不需要的构建？有什么方法可以阻止构建调用吗？

Answer 1

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

• 路由弹出/推送
• 屏幕大小调整，通常是由于键盘外观或方向改变所致
• 父部件重新创建了它的子部件
• 一个 InheritedWidget 小部件取决于(Class.of(context) 模式)更改

这意味着 build 方法应该不触发 http 调用或修改任何状态。

---

这与问题有什么关系？

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

与其阻止构建调用，不如让构建方法更纯净，这样它就可以随时调用而不会产生影响。

在您的示例中，您会将小部件转换为 StatefulWidget，然后将该 HTTP 调用提取到 State 的 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
      },
    );
  }
}

---

I know this already. I came here because I really want to optimize rebuilds

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

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

最简单的方法是使用 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 重建，subtree 也不会重建。发生这种情况是因为，由于闭包，MyWidget 的实例没有改变。

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

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