糟糕的页面浏览性能

Question

我有一个PageView与a 一起使用，BottomNavigationBar以便我可以使用底部栏而不是普通导航栏的可滑动和可点击的选项卡。然后我有两个标签/页面，您可以在它们之间滑动。一个有一个包含 4 个 UI 元素的表单，另一个还没有 UI 元素。一切正常，但性能PageView很差。

当我在页面之间滑动时，起初非常缓慢和跳跃，绝对不是 Flutter 承诺的每秒 60 帧。甚至可能不到 30 次。虽然性能越来越好，但在刷了几次之后，它几乎像一个普通的原生应用程序。

以下是一个包含了我的网页类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