在颤动中,实现标签布局既简单又直接.这是官方
documentation的一个简单示例：
import 'package:flutter/material.dart';
void main() {
runApp(new TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new DefaultTabController(
length: 3,child: new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),new Tab(icon: new Icon(Icons.directions_transit)),new Tab(icon: new Icon(Icons.directions_bike)),],),title: new Text('Tabs Demo'),body: new TabBarView(
children: [
new Icon(Icons.directions_car),new Icon(Icons.directions_transit),new Icon(Icons.directions_bike),);
}
}
但事情就是这样,我想获得活动的tab索引,以便我可以在某些选项卡上应用一些逻辑.我搜索文档,但我无法弄清楚.你们能帮帮忙吗？
解决方法
DefaultTabController的重点是让它自己管理标签.
如果您想要一些自定义选项卡管理,请改用TabController.
使用TabController,您可以访问更多信息,包括当前索引.
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key key}) : super(key: key);
@override
_MyTabbedPageState createState() => new _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage>
with SingleTickerProviderStateMixin {
final List<Tab> myTabs = <Tab>[
new Tab(text: 'LEFT'),new Tab(text: 'RIGHT'),];
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = new TabController(vsync: this,length: myTabs.length);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
controller: _tabController,tabs: myTabs,body: new TabBarView(
controller: _tabController,children: myTabs.map((Tab tab) {
return new Center(child: new Text(tab.text));
}).toList(),);
}
}
