flutter:tabbar嵌套时滑动
一,代码:
import 'package:flutter/material.dart';
class MyviewDemo extends StatefulWidget {
@override
State<MyviewDemo> createState() => _MyviewDemoState();
}
class _MyviewDemoState extends State<MyviewDemo> with TickerProviderStateMixin {
final List<Tab> myTabs = <Tab>[
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
];
final List<Tab> myNestedTabs = <Tab>[
Tab(text: 'Nested Tab 1'),
Tab(text: 'Nested Tab 2'),
Tab(text: 'Nested Tab 3'),
];
late TabController _controllerTop;
late TabController _controllerNested;
@override
void initState() {
super.initState();
_controllerTop = TabController(
length: 3,
vsync: this,
);
_controllerNested = TabController(
length: 3,
vsync: this,
);
}
@override
void dispose() {
_controllerTop.dispose();
_controllerNested.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBarView Example'),
bottom: TabBar(
controller: _controllerTop,
tabs: myTabs,
),
),
body: TabBarView(
controller: _controllerTop,
children: <Widget>[
Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
toolbarHeight: 0, // 将内嵌的 AppBar 的高度设置为 0,以隐藏它
bottom: TabBar(
controller: _controllerNested,
tabs: myNestedTabs,
),
),
body: NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is OverscrollNotification) {
if (_controllerNested.index == 2) {
_controllerTop.animateTo(1,duration: Duration(milliseconds: 500));
}
}
return true;
},
child: TabBarView(
controller: _controllerNested,
children: [
Center(
child: Text('嵌套 Tab 1'),
),
Center(
child: Text('嵌套 Tab 2'),
),
Center(
child: Text('嵌套 Tab 3'),
),
]
),
),
),
Center(
child: Text('Tab 2'),
),
Center(
child: Text('Tab 3'),
),
],
),
);
//);
}
}
跳转功能的实现:
body: NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification is OverscrollNotification) {
if (_controllerNested.index == 2) {
_controllerTop.animateTo(1,duration: Duration(milliseconds: 500));
}
}
return true;
},
二,测试效果:
在滑动到第三个嵌套view后,再滑动时跳到第二个tabbarview:

浙公网安备 33010602011771号