Flutter 颤振-带有SingleTickerProviderStateMixin的页面导致不必要的生成

我有一个问题，如果一个小部件使用TickerProviderStateMixin，那么当页面导航发生时，它就会被重建。我有一个非常复杂的页面，重建整个页面会导致页面导航出现UI问题。如果我不重建，那么一切都很好没有janks。有解决办法吗？在我看来，这似乎是某种内部颤振错误或意外行为

例如：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageA(title: 'Flutter Demo Home Page'),
    );
  }
}

class PageA extends StatefulWidget {
  PageA({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _PageAState createState() => _PageAState();
}

class _PageAState extends State<PageA>
    with SingleTickerProviderStateMixin {

  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this);
  }

  void toPageB() {
    //tabController.animateTo(1);
    Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
      return PageB();
    }));
  }

  @override
  Widget build(BuildContext context) {
    print("Page A");
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: TabBar(
          tabs: [
            Text(
              "Tab A",
              style: Theme.of(context).textTheme.bodyText1,
            ),
            Text(
              "Tab B",
              style: Theme.of(context).textTheme.bodyText1,
            )
          ],
          controller: tabController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: toPageB,
        child: Icon(Icons.add),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("Page B");
    return Scaffold(
        appBar: AppBar(
          title: Text("Page A"),
        ),
        body: Container(
          child: Center(
            child: Text("Page A"),
          ),
        ));
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：PageA（标题：“颤振演示主页”），
);
}
}
类PageA扩展了StatefulWidget{
PageA（{Key-Key，this.title}）：super（Key:Key）；
最后的字符串标题；
@凌驾
_PageAState createState（）=>\u PageAState（）；
}
类_PageAState扩展状态
使用SingleTickerProviderStateMixin{
TabController TabController；
@凌驾
void initState（）{
super.initState（）；
tabController=tabController（长度：2，vsync:this）；
}
void toPageB（）{
//tabController.animateTo（1）；
push（上下文，MaterialPage路由（生成器：（BuildContext）{
返回PageB（）；
}));
}
@凌驾
小部件构建（构建上下文）{
印刷品（“A页”）；
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
孩子：TabBar(
选项卡：[
正文(
“表A”，
样式：Theme.of（context）.textTheme.bodyText1，
),
正文(
“选项卡B”，
样式：Theme.of（context）.textTheme.bodyText1，
)
],
控制器：选项卡控制器，
),
),
浮动操作按钮：浮动操作按钮(
已按下：toPageB，
子：图标（Icons.add），
),
);
}
}
类PageB扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
印刷品（“B页”）；
返回脚手架(
appBar:appBar(
标题：正文（“A页”），
),
主体：容器(
儿童：中心(
子项：文本（“A页”），
),
));
}
}

这是我以前使用的解决方案

像这样改变你的页面

class PageA extends StatefulWidget {
  PageA({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _PageAState createState() => _PageAState();
}

class _PageAState extends State<PageA> {
  TabController tabController;

  // @override
  // void initState() {
  //   super.initState();
  //   tabController = TabController(length: 2, vsync: this);
  // }

  void toPageB() {
    tabController.animateTo(1);
    Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
      return PageB();
    }));
  }

  @override
  Widget build(BuildContext context) {
    print("Page A");
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: CustomTabBar(
          tabs: [
            Text(
              "Tab A",
              style: Theme.of(context).textTheme.bodyText1,
            ),
            Text(
              "Tab B",
              style: Theme.of(context).textTheme.bodyText1,
            )
          ],
          controller: (controller) {
            tabController = controller;
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: toPageB,
        child: Icon(Icons.add),
      ),
    );
  }
}

---

它应该可以解决页面重建的问题

，即使您不使用

TickerProviderStateMixin

，也可以进行重建，这只是一种简单的方式。我想我只是对弗利特没能抓住我的树结构感到失望。我有大约400个容器和一些动画对象。400个容器在列表、列或其他地方？在页面视图中？好的，那么你是在使用

PageView.builder

还是其他构造函数？非常感谢分享。我不明白，这对重建有什么帮助？您能提供更多的上下文吗？首先，它需要保留动画，因此您需要

SingleTickerProviderStateMixin

。我们知道，

SingleTickerProviderStateMixin

将调用UI进行更新。因此，在播放动画时，创建一个子

CustomTabBar

，并在

CustomTabBar

中更改所有UI。您只能看到

CustomTabBar

use

SingleTickerProviderStateMixin

，当它处于initState时，它会将tabController传递给页面A。当页面A调用tabController播放Aniamation时，它实际上让子

CustomTabBar

重新构建问题得到解决？这限制了在PageUnless中使用AnimationController的能力。如果在A页中有其他动画小部件，但解决方案是相同的。使动画小部件成为新的自定义StareWidget，并将控制器以初始状态传递回页面a

class CustomTabBar extends StatefulWidget {
  CustomTabBar({
    Key key,
    this.controller,
    this.tabs,
  }) : super(key: key);
  final Function(TabController) controller;
  final List<Widget> tabs;

  @override
  _CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar>
    with SingleTickerProviderStateMixin {
  TabController tabController;
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: widget?.tabs?.length ?? 0, vsync: this);
    if (widget.controller != null) {
      widget.controller(tabController);
    }
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(
      tabs: widget?.tabs ?? [],
      controller: tabController,
    );
  }
}