[英]Is it possible to swipe from an TabBarView content area to an adjacent PageView page?
I'd like to place a tabs inside a horizontal PageView and be able to swipe out of the tabs. 我想在水平PageView中放置标签,并能够从标签中滑动。 Within the content area, I can swipe into the tabs from a page, but not out of the tabs to another page. 在内容区域内,我可以从页面滑入选项卡,但不能滑出选项卡到另一个页面。 If I swipe on the TabBar, then I can get out of the tabs and go to the adjacent page. 如果我在TabBar上滑动,则可以离开这些标签并转到相邻的页面。
Is there a way to allow me to swipe from a TabView content area and have it move to the adjacent PageView page? 有没有一种方法可以让我从TabView内容区域滑动,然后将其移至相邻的PageView页面?
Here is my test code: 这是我的测试代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return PageView(
children: <Widget>[
Scaffold(
appBar: AppBar(title: Text('Page 1'),),
body: Center(child: Text('hi'),),
),
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
Scaffold(
appBar: AppBar(title: Text('Page 3'),),
body: Center(child: Text('bye'),),
),
],
);
}
}
Tabbar has a property called onTap. Tabbar具有一个名为onTap的属性。 In onTap(), you can get the index and handle your pageview's content. 在onTap()中,您可以获取索引并处理综合浏览量的内容。 Example: 例:
TabBar(
onTap: (int tabIndex) {
// you can perform any action here using index
})
Ok, I believe I got the idea of what you're looking for. 好的,我相信我已经知道您要寻找什么。 For this, I suggest using something like a NotificationListener
in your widget tree that will catch the OverscrollNotification
and you can either scroll to left or right, depending of the overscroll side (less than 0 for left, over 0 for right). 为此,我建议在小部件树中使用类似于NotificationListener
东西,它将捕获OverscrollNotification
并且您可以向左或向右滚动,具体取决于过度滚动的一侧(左小于0,右大于0)。
I made it animate linearly (250 ms) for each side, but you can tweak it to your needs. 我对它的每一侧进行了线性动画处理(250毫秒),但是您可以根据需要进行调整。
class Example extends StatefulWidget {
Example({Key key}) : super(key: key);
@override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
TabController _tabController;
final PageController _pageController = PageController();
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 3);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: PageView(
controller: _pageController,
children: <Widget>[
Center(child: Text('Page 1')),
Column(
children: <Widget>[
TabPageSelector(controller: _tabController),
Text('Page 2'),
NotificationListener(
onNotification: (overscroll) {
if (overscroll is OverscrollNotification && overscroll.overscroll != 0 && overscroll.dragDetails != null) {
_pageController.animateToPage(overscroll.overscroll < 0 ? 0 : 2,
curve: Curves.ease, duration: Duration(milliseconds: 250));
}
return true;
},
child: Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Center(child: Text('Tab 1')),
Center(child: Text('Tab 2')),
Center(child: Text('Tab 3')),
],
),
),
),
],
),
Center(child: Text('Page 3')),
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.