我试图用下一个和上一个按钮创建选项卡的可滚动列表,以便当我单击这些按钮时,我应该看到视图中未显示的下一个隐藏选项卡。反之亦然。
注意按钮。
到目前为止,我已经掌握了这个,但是我无法捕捉视图中的选项卡并采取相应的措施,有人可以帮忙吗。
class NewEntryPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => NewEntryPageState();
}
class NewEntryPageState extends State<NewEntryPage>
with SingleTickerProviderStateMixin {
final List<Tab> myTabs = <Tab>[
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
Tab(text: 'bro'),
];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: myTabs.length);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
padding: const EdgeInsets.all(10.0),
color: Colors.white,
child: Column(
children: <Widget>[
Container(
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
if (_tabController.index > 0) {
_tabController.animateTo(_tabController.index - 1);
} else {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Can't go back"),
));
}
},
),
Expanded(
child: TabBar(
isScrollable: true,
controller: _tabController,
labelStyle: TextStyle(color: Colors.black),
unselectedLabelColor: Colors.black,
labelColor: Colors.blue,
tabs: List.generate(
20,
(index) {
return Tab(
text: "Tab $index",
);
},
),
),
),
IconButton(
icon: Icon(Icons.arrow_forward_ios),
onPressed: () {
if (_tabController.index + 1 < 20) {
_tabController.animateTo(_tabController.index + 1);
} else {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Can't move forward"),
));
}
},
),
],
),
),
],
),
),
],
);
}
}
此代码的作用