BottomNavigationBar
属性 | 释义 |
---|
items | Lisst底部导航按钮集合 |
iconSize | icon |
currentIndex | 默认选中的tab |
onTap | 选中变化函数 |
fixedColor | 选中的颜色 |
type | BottomNavigationBarType.fixed, BottomNavigationBarType.shifting |
eg: 创建tab
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs()
);
}
}
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int current_index = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title : Text("TabBarDemo"),
),
body: Text("TabBar"),
bottomNavigationBar: BottomNavigationBar(
currentIndex: current_index,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
current_index = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("体系")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
),
BottomNavigationBarItem(
icon: Icon(Icons.supervised_user_circle),
title: Text("我的")
),
],
),
);
}
}
BottomNavigationBar跳转页面示例
- 首先在lib下创建pages目录,并创建tab对应的页面
eg:首页
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Text("首页");
}
}
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/home.dart';
import 'package:flutter_app/pages/mine.dart';
import 'package:flutter_app/pages/setting.dart';
import 'package:flutter_app/pages/system.dart';
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex=0;
List _pageList=[
HomePage(),
SystemPage(),
SettingPage(),
MinePage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index){
setState(() { //改变状态
this._currentIndex=index;
});
},
fixedColor:Colors.blue, //选中的颜色
type:BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("体系")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("我的")
)
],
),
);
}
}
import 'package:flutter/material.dart';
import 'pages/tabs.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs()
);
}
}