SliverAppBar：如何在滚动过程中保持原生视图处于活动状态？

Question

我想在 SliverAppBar 的 flexibleSpace 中显示一个原生视图 (HeaderContainer) 并阻止它重建。

return new Scaffold(
    body: CustomScrollView(
        slivers: <Widget>[
            SliverAppBar(
                backgroundColor: Colors.teal,
                pinned: true,
                expandedHeight: 180,
                flexibleSpace: FlexibleSpaceBar(
                    background: HeaderContainer(),
                    // HeaderContainer is a native View (AndroidView)
                ),
             ),
             SliverList(
                delegate: SliverChildListDelegate([content]),
            )
        ]
    )
);

不幸的是 HeaderContainer() 在滚动过程中变得不可见时被破坏了。
HeaderContainer() 的创建非常昂贵并且需要一些时间。

是否有可能将此小部件保存在内存中并防止它在滚动时被破坏？

更新：

回滚后重建 HeaderContaienr 的问题只是原生视图（例如 AndroidView）的问题。

---

一些调查：

FlexibleSpaceBar 使用此行添加子项：

@override
Widget build(BuildContext context) {
    ...
    if (opacity > 0.0) {    <-- !
        children.add( ... );
    }

因此，如果不透明度大于零，则仅将子级添加到树中，如果不透明度为零，则将其删除（并销毁）。这会导致回滚后重建。

我最终得到了一个自定义的 flexibleSpace 小部件，其中孩子总是被添加到视图树中。

Answer 1

只要您setState，您的小部件树就会重建以匹配任何更改。每次滚动时，都需要渲染一个新帧，因此您抱怨的性能。您想到了 3 个选项：

1.您可能希望在您的HeaderContainer 上使用const 构造函数

2.您可以尝试将您的HeaderContainer 分配为最终变量 你的 build 方法，所以它只会重建依赖关系 如果当前小部件实例保持不变，则更改，例如：

@override
Widget build(BuildContext context) {
  final header = HeaderContainer();

  return new Scaffold(
    body: CustomScrollView(
        slivers: <Widget>[
            SliverAppBar(
                backgroundColor: Colors.teal,
                pinned: true,
                expandedHeight: 180,
                flexibleSpace: FlexibleSpaceBar(
                    background: header,
                ),
             ),
                   SliverList(
                   delegate: SliverChildListDelegate([content]),
               )
           ]
       )
  );

3.或者您可以将此header 添加为有状态小部件的属性 但请记住，这会破坏该小部件的热重载 （标题）。