flutter学习四 底部组件与侧边栏

底部组件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 {
  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: [
              //第一种方式
              // Row(
              //   children: [
              //     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('个人空间'),
              )
            ],
          )
        ),