Flutter 中用于快速实现顶部导航栏的组件库。
TabBar
Tab 页的 Title 控件,切换 Tab 页的入口,一般放到 AppBar 控件下使用,内部有**Title*属性。其子元素按水平横向排列布局,如果需要纵向排列,请使用 Column 或 ListView 控件包装一下。子元素为 Tab 类型的数组。
TabBarView
Tab 页的内容容器,其内放置 Tab 页的主体内容。子元素可以是多个各种类型的控件。
TabController
这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
body: Center(
child: AppBarStatefulWidget(),
)
)
);
}
}
class AppBarStatefulWidget extends StatefulWidget {
const AppBarStatefulWidget({Key? key}) : super(key: key);
@override
_AppBarStatefulWidget createState() => _AppBarStatefulWidget();
}
class _AppBarStatefulWidget extends State with SingleTickerProviderStateMixin {
final List<Tab> _tabs = <Tab>[
new Tab(text: '关注'),
new Tab(text: '推荐'),
new Tab(text: '视频'),
new Tab(text: '游戏'),
new Tab(text: '音乐'),
new Tab(text: '体育'),
new Tab(text: '生活'),
new Tab(text: '图片'),
];
var _tabController;
@override
void initState() {
_tabController = TabController(vsync: this, length: _tabs.length);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: TabBarView(
controller: _tabController,
children: _tabs.map((Tab tab) {
return new Center(child: Text(tab.text.toString()));
}).toList(),
),
appBar: AppBar(
title: Text("TabBarView 的基本使用"),
centerTitle: true,
bottom: TabBar(
isScrollable: true,
labelColor: Colors.redAccent, // 选中的Widget颜色
indicatorColor:Colors.redAccent, // 选中的指示器颜色
labelStyle: new TextStyle(fontSize: 15.0),// 必须设置,设置 color 没用的,因为 labelColor 已经设置了
unselectedLabelColor: Colors.white,
unselectedLabelStyle: new TextStyle(
fontSize: 15.0), // 设置 color 没用的,因为unselectedLabelColor已经设置了
controller: _tabController,
// tabbar 必须设置 controller 否则报错
indicatorSize: TabBarIndicatorSize.label,
// 有 tab 和 label 两种
tabs: _tabs,
),
),
);
}
}
BottomNavigationBar 即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签、图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航。
//底部数据
final Map bottomMap ={
"首页":Icon(Icons.home),
"朋友圈":Icon(Icons.camera),
"信息":Icon(Icons.message),
"其他":Icon(Icons.devices_other),
};
因为点击导航栏需要对应的字体显示,所以MyHomePage需要继承StatefulWidget,增加State,
//用无状态控件显示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//主题色
theme: ThemeData(
//设置为红色
primarySwatch: Colors.red),
//这是一个Widget对象,用来定义当前应用打开的时候,所显示的界面
home: MyHomePageWidget(),
);
}
}
class MyHomePageWidget extends StatefulWidget{
@override
State<StatefulWidget> createState(){
return new MyHomePage();
}
}
class MyHomePage extends State<MyHomePageWidget> {
//底部数据
final Map bottomMap ={
"首页":Icon(Icons.home),
"朋友圈":Icon(Icons.camera),
"信息":Icon(Icons.message),
"其他":Icon(Icons.devices_other),
};
int _index = 0;
bottomNavigationBar: BottomNavigationBar(
items: (){
var items = <BottomNavigationBarItem>[];
bottomMap.forEach((k,v){
items.add(BottomNavigationBarItem(
title:Text(k),//取map的值
icon : v,//取map的图标
backgroundColor:Colors.red,//背景红色
));
});
return items;
}(),
currentIndex: _index,//选中第几个
onTap:(position){
Fluttertoast.showToast(
msg: 'text inputted: $position',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 1,
);
setState(() {
_index = position;//状态更新
});
}
),
}