滞后动画答案

【问题标题】：Laggy animation滞后动画
【发布时间】：2018-07-26 16:20:38
【问题描述】：

是否有人在使用 TabBar 时经历过屏幕之间的延迟过渡，或者我使用错了？基本上我通过在其他小部件中构建页面来使用它

home: DefaultTabController(
    initialIndex: 0,
    length: 5,
    child: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          isScrollable: true,
          labelStyle: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
          tabs: [
            Tab(text: 'HOME'),
            Tab(text: 'SCHEDULE'),
            Tab(text: 'ANALYTICS'),
            Tab(text: 'TEMP'),
            Tab(text: 'SETTINGS'),
          ],
        ),
        title: Text('${widget.title}'),
      ),
      body: TabBarView(
        children: [
          TheGridView().build(),
          SchedulePage(),
          ChartPage(),
          TempPage(),
          SettingsPage(),
        ],
      ),
    ),
  ),

【问题讨论】：

您检查的是发布模式还是调试模式？调试模式下的性能不具代表性。它也可能取决于设备。
我实际上是在调试模式下检查的。它实际上在 iPhone 8 上运行良好，但在 iPhone 6 上运行困难
检查发布模式以确保。由于 JiT（调试）与 AoT 编译（发布）以及其他原因，调试模式具有完全不同的性能特征。
@GünterZöchbauer 看起来性能更好，我明天在 iOS 上试试 :) 谢谢！
@Letitbe （抱歉关闭）如果答案完全错误，请投票否决并标记（如果它甚至不是答案）。不要改变 OP 的初衷。仅当答案相同且更好时才编辑答案。如果您有不同的答案，请将其发布为您的答案。

标签： dart flutter

【解决方案1】：

TabBarView 不会在其中保存小部件的状态。每次重新出现在屏幕上时，它们都会被重建。您可以通过在initState() 中为其中一个小部件添加print() 语句来检查这一点。要解决此问题，您可以使用AutomaticKeepAliveClientMixin

class SettingsPage extends StatefulWidget {
  SettingsPage({Key key}) : super(key: key);

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

class _SettingsPageState extends State<SettingsPage> with AutomaticKeepAliveClientMixin { //<-- AutomaticKeepAliveClientMixin

  @override
  bool get wantKeepAlive => true; //Set to true

  @override
  Widget build(BuildContext context) {
    super.build(context); //You must add this
    return Container(); //A screen here
  }
}

有了这个小改动，小部件不会在每次返回屏幕时都重新构建

【讨论】：

【解决方案2】：

你没用过 TabsController 也许它可以帮助你提高标签的性能。

TabController controller;

在 initState() 中

controller = new TabController(length: 5, vsync: this);

喜欢这里https://api.flutter.dev/flutter/material/TabController-class.html

【讨论】：

【解决方案3】：

在发布模式下试用您的应用程序：

flutter build apk

获取 apk 并将其安装在您的设备中（我是通过驱动器完成的）并检查是否工作得更好。

在调试模式下是正常的，体验更差。调试模式不仅仅是使用电缆进行调试的过程......是一种apk。

我希望这对你有用。

【讨论】：