dart - 糟糕的 PageView 性能

Question

我有一个 PageView 与 BottomNavigationBar 一起使用，这样我就可以拥有带有底栏而不是普通导航栏的可滑动和可点击的选项卡。然后我有两个选项卡/页面，您可以在它们之间滑动。一个具有包含 4 个 UI 元素的表单，另一个还没有 UI 元素。一切正常，但 PageView 的性能非常糟糕。

当我在页面之间滑动时，一开始它非常缓慢且跳跃，绝对不是 Flutter promise 的每秒 60 帧。可能连 30 都不到。尽管滑动了几次，但性能越来越好，直到它几乎像一个普通的 native 应用程序。

下面是我的页面类，包括 PageView、BottomNavigationBar 以及连接它们的逻辑。有谁知道如何提高 PageView 的性能？

class _TabbarPageState extends State<TabbarPage> {

  int _index = 0;
  final controller = PageController(
    initialPage: 0,
    keepPage: true,
  );

  final _tabPages = <Widget>[
    StartPage(),
    OtherPage(),
  ];

  final _tabs = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.play_arrow),
      title: Text('Start'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.accessibility_new),
      title: Text('Other'),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        controller: controller,
        children: _tabPages,
        onPageChanged: _onPageChanged,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _tabs,
        onTap: _onTabTapped,
        currentIndex: _index,
      ),
      floatingActionButton: _index != 1
          ? null
          : FloatingActionButton(
              onPressed: () {},
              tooltip: 'Test',
              child: Icon(Icons.add),
            ),
    );
  }

  void _onTabTapped(int index) {
    controller.animateToPage(
      index,
      duration: Duration(milliseconds: 300),
      curve: Curves.ease,
    );
    setState(() {
      _index = index;
    });
  }

  void _onPageChanged(int index) {
    setState(() {
      _index = index;
    });
  }
}

Answer 1

确保您仅使用配置文件或发布版本进行性能测试。使用调试版本评估性能完全没有意义。

• https://flutter.io/docs/testing/ui-performance
• https://flutter.io/docs/cookbook/testing/integration/profiling