PageView 和 BottomNavigationBar 滞后

Question

我实现了一个非常简单的系统：

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => MainState();
}
class MainState extends State<MyApp> {

  @override
  void initState() {
    futureData = getModelsList();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(          
     home:Scaffold(
      bottomNavigationBar: BottomNavigationBar(
      type:BottomNavigationBarType.shifting,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home,
            color: Colors.white,
          ),label: "",
          backgroundColor: Colors.grey,
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.description,
            color: Colors.white,
          ),label: "",
          backgroundColor: Colors.grey,
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.calculate,
            color: Colors.white,
          ),label: "",
          backgroundColor: Colors.grey,
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.question_answer,
            color: Colors.white,
          ),label: "",
          backgroundColor: Colors.grey,
        ),

      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: (newIndex) {
        setState(() {
          _selectedIndex = newIndex;
          pageController.animateToPage(_selectedIndex, duration: Duration(milliseconds: 300), curve: Curves.ease);
        });
      },
    ),
        body: PageView(
          controller: pageController,
          onPageChanged: (newIndex){
            setState(() {
              _selectedIndex = newIndex;
            });
          },
        children: [
          buildPage1(),
          buildPage1(),
          buildPage1(),
          buildPage1(),
        ]
      ),

      )

发生的情况是，如果 buildPage1 是一个简单的页面，比如只有一个 Text('Page1') ，那么一切都运行良好。但是，如果我使该页面变得更复杂，从实际页面到所选页面的导航或动画就会很奇怪。我不知道用英语怎么说，但运行不顺利，就像一个滞后......

我正在使用 setState 使用新选定的索引重建屏幕。和我在网上看到的方法是一样的。所以我确信我在这里失去了一些东西。

Answer 1

您在 BottomNavigationBar 和 PageView 设置中的页面之间转换时似乎遇到了性能问题。您共享的代码看起来不错，但是您可以考虑一些优化和建议，以潜在地提高导航和动画的流畅度：

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => MainState();
}

class MainState extends State<MyApp> {
  late Future<List<Model>> futureData;

  @override
  void initState() {
    futureData = getModelsList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.shifting,
          // ... BottomNavigationBarItem items ...
          onTap: (newIndex) {
            setState(() {
              _selectedIndex = newIndex;
              pageController.animateToPage(
                _selectedIndex,
                duration: Duration(milliseconds: 200),
                curve: Curves.easeInOut,
              );
            });
          },
        ),
        body: PageView(
          controller: pageController,
          onPageChanged: (newIndex) {
            setState(() {
              _selectedIndex = newIndex;
            });
          },
          children: [
            KeepAlivePage(buildPage1()),
            KeepAlivePage(buildPage1()),
            KeepAlivePage(buildPage1()),
            KeepAlivePage(buildPage1()),
          ],
        ),
      ),
    );
  }
}

class KeepAlivePage extends StatefulWidget {
  const KeepAlivePage(this.child);
  final Widget child;

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

class _KeepAlivePageState extends State<KeepAlivePage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // To keep the state alive
    return widget.child;
  }
}

1. 最小化重建小部件：复杂的小部件可以提高性能 如果重建过于频繁就会出现问题。确保您的 buildPage1() 函数不执行昂贵的操作或创建 每次调用时都会出现不必要的小部件。
2. 延迟加载内容：如果您的页面很复杂，您可以考虑 延迟加载他们的内容。而不是构建所有页面 一次，您只能在相应页面打开时构建内容 已选择。这可以帮助减少初始加载时间和内存 消费。
3. 使用AutomaticKeepAliveClientMixin：如果您正在处理的页面 有昂贵的 UI 或数据获取，请考虑使用 AutomaticKeepAliveClientMixin 保持非活动页面的状态 活。这样，以前访问过的页面的状态就不会改变 丢弃，这可以帮助改善页面之间的过渡。
4. 性能分析：使用Flutter的性能分析工具 （如性能叠加和时间线）来识别哪个部分 您的代码导致了性能滞后。这会帮助你 找出需要优化的地方。
5. 避免在 initState 中进行大量操作：虽然您当前的 initState 是 获取数据，避免执行可能阻塞的繁重操作 用户界面线程。考虑使用 FutureBuilder 或其他方法 异步获取数据而不阻塞 UI。
6. 减少动画持续时间：在 onTap 方法中 BottomNavigationBar，您使用的持续时间为 300 毫秒 动画。你可以尝试缩短这个时间看看是否可以 提高过渡的平滑度。
7. 将 PageController 与 KeepAlive Mixin 一起使用：使用 PageView 时， 当前不可见的页面可能会被保存 记忆。您可以使用 KeepAlive mixin 来确保页面 即使它们当前不可见，也保持活动状态。
8. 更新依赖项：确保您使用的是最新版本 Flutter 及相关包。有时，性能改进 新版本中引入了错误修复。