如何加快Tabbarview物理滑动

时间:2019-10-27 09:47:46

标签: flutter

基本上,当我使用滑动切换到下一页时,似乎比预期的页面过渡时间更长。 如果用户在滑动到下一页后快速向上或向下滑动,则物理滚动似乎从一页切换到另一页的方式将导致不舒适的用户体验。 它会被记录为左右滑动的延续,而不是上下滑动。

是否有一种方法可以在和时禁止减速,或者加快速度或其他速度?

如果用户使用了按下TabBar并选择了其他页面,但没有进行滑动过渡,我设法修改了屏幕过渡持续时间

使用修改后的标签栏视图并更改

void _scrollToCurrentIndex() {
    final double offset = _tabCenteredScrollOffset(_currentIndex);
    _scrollController.animateTo(offset, duration: Duration(milliseconds: 5000), curve: Curves.ease);
  }
Future<void> _warpToCurrentIndex() async {
    if (!mounted) return Future<void>.value();

    if (_pageController.page == _currentIndex.toDouble()) return Future<void>.value();

    final int previousIndex = _controller.previousIndex;
    if ((_currentIndex - previousIndex).abs() == 1)
      return _pageController.animateToPage(_currentIndex, duration: Duration(milliseconds: 5000), curve: Curves.ease);

    assert((_currentIndex - previousIndex).abs() > 1);
    final int initialPage = _currentIndex > previousIndex ? _currentIndex - 1 : _currentIndex + 1;
    final List<Widget> originalChildren = _childrenWithKey;
    setState(() {
      _warpUnderwayCount += 1;

      _childrenWithKey = List<Widget>.from(_childrenWithKey, growable: false);
      final Widget temp = _childrenWithKey[initialPage];
      _childrenWithKey[initialPage] = _childrenWithKey[previousIndex];
      _childrenWithKey[previousIndex] = temp;
    });
    _pageController.jumpToPage(initialPage);

    await _pageController.animateToPage(_currentIndex, duration: Duration(milliseconds: 5000), curve: Curves.ease);
    if (!mounted) return Future<void>.value();
    setState(() {
      _warpUnderwayCount -= 1;
      if (widget.children != _children) {
        _updateChildren();
      } else {
        _childrenWithKey = originalChildren;
      }
    });
  }

这使我可以通过仅按标签栏来更改滚动持续时间

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: DefaultTabController(
        initialIndex: 0,
        length: 3,
        child: Column(
          children: <Widget>[
            Container(
              child: TabBar(
                indicatorPadding: EdgeInsets.symmetric(horizontal: 10),
                indicatorColor: Colors.black,
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorWeight: 2,
                labelPadding: EdgeInsets.all(10),
                tabs: [
                  Text(
                    '0',
                    style: TextStyle(color: Colors.black),
                  ),
                  Text('1', style: TextStyle(color: Colors.black)),
                  Text('2', style: TextStyle(color: Colors.black))
                ],
              ),
            ),
            Expanded(
              child: Container(
                child: TabBarView(
                  children: <Widget>[
                    ListView.builder(
                      itemCount: 100,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text('Item no $index'),
                        );
                      },
                    ),
                    ListView.builder(
                      itemCount: 100,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text('Item no $index'),
                        );
                      },
                    ),
                    ListView.builder(
                      itemCount: 100,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text('Item no $index'),
                        );
                      },
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

0 个答案:

没有答案