简介
属于 Material 风格下的一个widget
- 如果同时给Tab传入icon和text,text将会被展现在icon的下面
基本用法
通常需要配合TabBar TabBarView使用
- TabBar中的children和TabBarView中的数组成一一对应关系
- TabController 可以协调TabBarView和Tab之间的选择和个数等
实例演示
import 'package:flutter/material.dart';
class TabDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 500.0,
child: MyTabbedPage(),
);
}
}
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({ Key key }) : super(key: key);
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
final List<Tab> myTabs = <Tab>[
Tab(text: 'LEFT'),
Tab(text: 'RIGHT'),
];
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) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
tabs: myTabs,
),
),
body: TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) {
return Center(child: Text(tab.text));
}).toList(),
),
);
}
}