底部组件bottomNavigationBar
import 'package:flutter/material.dart';
import 'tabs/HomePage.dart';
import 'tabs/SearchPage.dart';
import 'tabs/SettingPage.dart';
//想改变页面中的数据 StatefulWidget
class Tabs extends StatefulWidget {
final index;
Tabs({Key key,this.index=0}) : super(key:key);
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State<Tabs> {
int _currentIndex;
_TabsState(index){
}this._currentIndex = index;
List _pageList = [
HomePage(),
SearchPage(),
SettingPage(),
];
@override
Widget build(BuildContext context){
return Scaffold(
appBar: new AppBar(
title: new Text(this._currentIndex.toString()),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
//默认选择第几个
currentIndex: this._currentIndex,
//监听事件
onTap: (int index){
//状态改变函数
setState((){
this._currentIndex = index;
});
},
//导航元素
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon:Icon(Icons.settings),
title:Text('Setting')
)
],
),
);
}
}
侧边栏
Drawer 侧边栏
DrawerHeader
属性 | 描述 |
---|---|
decoration | 设置顶部背景颜色 |
child | 配置子元素 |
padding | 内边距 |
margin | 外边距 |
UserAccountsDrawerHeader
属性 | 描述 |
---|---|
decoration | 设置顶部背景颜色 |
accountName | 账户名称 |
accountEmail | 账户邮箱 |
currentAccountPicture | 用户头像 |
otherAccountsPictures | 用来设置当前账户其他账户头像 |
侧边栏路由跳转
onTap: (){
Navigator.of(context).pop();
Navigator.pushNamed(context, ‘/search’);
}
drawer: Drawer(
child: Column(
children: <Widget>[
//第一种方式
// Row(
// children: <Widget>[
// Expanded(
// child: DrawerHeader(
// child: Text('title'),
// decoration: BoxDecoration(
// color: Colors.blue
// ),
// ),
// )
// ],
// ),
//第二张方式
UserAccountsDrawerHeader(
accountName: Text('JSON'),
accountEmail: Text('[email protected]'),
currentAccountPicture: CircleAvatar(backgroundColor: Colors.blue),
),
ListTile(
title: Text('个人中心'),
),
Divider(),
ListTile(
title: Text('设置中心'),
),
Divider(),
ListTile(
title: Text('个人空间'),
)
],
)
),