在TabBarView内使PageView颤动:滚动到页面末尾的下一个选项卡 [英] flutter PageView inside TabBarView: scrolling to next tab at the end of page
问题描述
我有3个标签,每个标签内部都有一个PageView. 在PageView的末尾,我希望能够滚动到下一个标签.
I have 3 tabs and each tab has a PageView inside. At the end of the PageView, I want to be able to scroll to the next tab.
如果方向上没有更多页面,是否可以用TabBar滚动而不是PageView滚动? (仅向左或向右滚动)
Is there a way I can do TabBar scroll instead of PageView scroll if there's no more page to the direction? (only left or right scroll)
这是示例代码. 当我向右滚动至第一个标签的最后一页时,我想查看第二个标签的第一页.
Here's the sample code. When I scroll to right at the last page of the 1st tab, I want to see the first page of the 2nd tab.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: ScrollableTabsDemo());
}
}
class _Page {
const _Page({ this.icon, this.text });
final IconData icon;
final String text;
}
const List<_Page> _allPages = <_Page>[
_Page(icon: Icons.grade, text: 'TRIUMPH'),
_Page(icon: Icons.playlist_add, text: 'NOTE'),
_Page(icon: Icons.check_circle, text: 'SUCCESS'),
];
class ScrollableTabsDemo extends StatefulWidget {
static const String routeName = '/material/scrollable-tabs';
@override
ScrollableTabsDemoState createState() => ScrollableTabsDemoState();
}
class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin {
TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(vsync: this, length: _allPages.length);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final Color iconColor = Theme.of(context).accentColor;
return Scaffold(
appBar: AppBar(
title: const Text('Scrollable tabs'),
bottom: TabBar(
controller: _controller,
isScrollable: true,
tabs: _allPages.map<Tab>((_Page page) {
return Tab(text: page.text, icon: Icon(page.icon));
}).toList(),
),
),
body: TabBarView(
controller: _controller,
children: _allPages.map<Widget>((_Page page) {
return SafeArea(
top: false,
bottom: false,
child: PageView.builder(
itemBuilder: (context, position)
{
return Container(child: Center(child: Text(position.toString())));
},
itemCount: 5,
),
);
}).toList(),
),
);
}
}
推荐答案
将onPageChange参数添加到pageBuilder中.然后检查其是否为最后一页,如果是的话,则将tabController设置为nextPage的动画.
Add to the pageBuilder the onPageChange param. Then check if its the last page, if so, animate the tabController to the nextPage.
onPageChanged: (page) {
if (page == _allPages.length &&
(_controller.index + 1) < _controller.length) {
_controller.animateTo(_controller.index + 1);
}
},
itemCount: _allPages.length + 1,
这篇关于在TabBarView内使PageView颤动:滚动到页面末尾的下一个选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!