糟糕的PageView性能

Question

我有一个与PageView一起使用的BottomNavigationBar，这样我就可以使用带有底部条而不是普通导航条的可滑动和可触变选项卡。然后我有两个标签/页，你可以在两者之间滑动。一个有一个包含4个UI元素的表单，另一个还没有UI元素。一切都很好，但是PageView的性能很差。

当我在页面之间滑动的时候，它的速度非常慢，而且一开始很不稳定，绝对不是颤振保证的每秒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

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?)。