Question

我有一个PageView和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

Answer 2

对不起，但根特的回答对我没有帮助！您必须设置物理：AlwaysScrollableScrollPhysics（）并且您的性能会提高。

为我工作

Answer 3

我是陌生人，请告诉我这是否错误。

有同样的问题，这是我的努力。对我来说更糟。

class HomePage extends StatefulWidget {
  @override
  State createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _currentIndex = 1;
  var _pageController = PageController(initialPage: 1);
  var _todoPage, _inProgressPage, _donePage, _userPage;

  @override
  void initState() {
    this._currentIndex = 1;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        controller: this._pageController,
        onPageChanged: (index) {
          setState(() {
            this._currentIndex = index.clamp(0, 3);
          });
        },
        itemCount: 4,
        itemBuilder: (context, index) {
          if (index == 0) return this.todoPage();
          if (index == 1) return this.inProgressPage();
          if (index == 2) return this.donePage();
          if (index == 3) return this.userPage();
          return null;
        },
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  Widget buildBottomNavigationBar() {
    return BottomNavigationBar(
      showUnselectedLabels: false,
      items: [
        BottomNavigationBarItem(title: Text("待办"), icon: Icon(Icons.assignment)),
        BottomNavigationBarItem(title: Text("进行"), icon: Icon(Icons.blur_on)),
        BottomNavigationBarItem(title: Text("完成"), icon: Icon(Icons.date_range)),
        BottomNavigationBarItem(title: Text("我的"), icon: Icon(Icons.account_circle)),
      ],
      currentIndex: this._currentIndex,
      onTap: (index) {
        setState(() {
          this._currentIndex = index.clamp(0, 3);
        });
        _pageController.jumpToPage(this._currentIndex);
      },
    );
  }

  Widget todoPage() {
    if (this._todoPage == null) this._todoPage = TodoPage();
    return this._todoPage;
  }

  Widget inProgressPage() {
    if (this._inProgressPage == null) this._inProgressPage = InProgressPage();
    return this._inProgressPage;
  }

  Widget donePage() {
    if (this._donePage == null) this._donePage = DonePage();
    return this._donePage;
  }

  Widget userPage() {
    if (this._userPage == null) this._userPage = UserPage();
    return this._userPage;
  }
}

我只是缓存综合浏览量所保存的页面。就像本地语言一样，这确实使我的综合浏览量非常平滑。但这会阻止hotreload（参考：How to deal with unwanted widget build?）。

Answer 4

尝试此技巧，将viewportFraction的值设置为0.99（可以命中0.999或0.9999并尝试直到获得所需的结果）

<audio ... ended="nextAudioNode.play();">

糟糕的PageView性能

4 个答案: