Flutter基础（二)导航栏和抽屉

一、在AppBar上添加按钮

1.leading小组件，位于左上方

2.actions小组件，位于右上方

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          //左边的位置leading
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation',//说明按钮的作用
            /// 按钮的任务
            onPressed: () => debugPrint("Navigation button is pressed"),
          ),
          title: Text('顶部栏'),
          ///右边的小部件action
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.search),
              onPressed: () => debugPrint("Search button is pressed"),
            )
          ],
          elevation: 30.0, //添加阴影的效果
        ),
        //列表视图
        body: ListViewDemo(),
      ),

    );
  }
}

二、TabBar: 用标签形式展示内容

1、三样素：TabBar、TabView、TabController

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //使用界面组件与定制界面主题
    return MaterialApp(
      debugShowCheckedModeBanner: false,//右上角的debug标签会被隐藏
      home: Home(),
      //设置主题风格
      theme: ThemeData(
        primarySwatch: Colors.yellow,//设置主题颜色
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),//高亮颜色，点下去会变成白色
        splashColor: Colors.white70,//水波纹的效果
      ),
    );
  }
}

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TabController
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(
              //左边的位置leading
              leading: IconButton(
                icon: Icon(Icons.menu),
                tooltip: 'Navigation',//说明按钮的作用
                /// 按钮的任务
                onPressed: () => debugPrint("Navigation button is pressed"),
              ),
              title: Text('顶部栏'),
              ///右边的小部件action
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () => debugPrint("Search button is pressed"),
                )
              ],
              elevation: 0.0, //添加阴影的效果
              bottom: TabBar(
                unselectedLabelColor: Colors.black38,//未被选择的标签会浅色
                //indicator:标签下划线
                indicatorColor: Colors.black54,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 1.0,

                tabs: <Widget>[
                  Tab(icon: Icon(Icons.local_florist)),
                  Tab(icon: Icon(Icons.change_history)),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
            ),
            body: TabBarView(
              children: <Widget>[
                Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
                Icon(Icons.change_history, size: 128.0, color: Colors.black12),
                Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
              ],
            ),
          ),

        );
  }
}

三、Drawer：抽屉部件

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(......
              
            body: TabBarView(......
             
            //抽屉部件
            drawer: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  DrawerHeader(
                      //把文字变成大写
                      child: Text('header'.toUpperCase()),
                      decoration: BoxDecoration(
                        color: Colors.grey[100],//设置背景颜色
                      ),
                  ),
                  //列表项
                  ListTile(
                    title: Text("Messages",textAlign: TextAlign.right,),//右对齐
                    trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),//在右边添加图标
                    onTap: () => Navigator.pop(context),//按一下可以关掉打开的抽屉
                  ),
                  ListTile(
                    title: Text("Messages",textAlign: TextAlign.right,),//右对齐
                    trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),
                    onTap: () => Navigator.pop(context),
                  ),
                  ListTile(
                    title: Text("Messages",textAlign: TextAlign.right,),//右对齐
                    trailing: Icon(Icons.message, color: Colors.black12, size: 22.0),
                    onTap: () => Navigator.pop(context),
                  ),
                ],
              ),
            ),
          ),

        );
  }
}

Drawer 设置用户头像，用户名，邮件

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(......
            body: TabBarView(......
            //抽屉部件
            drawer: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  //用户的信息
                  UserAccountsDrawerHeader(
                      accountName: Text('wanghao', style: TextStyle(fontWeight: FontWeight.bold)),
                      accountEmail: Text('wanghao@163.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage('https://picsum.photos/id/142/600/400'),//设置头像
                    ),
                  ),
                  //列表项
                  ListTile(......
                  ListTile(......
                  ListTile(......
                  ),
                ],
              ),
            ),
          ),

        );
  }
}

Drawer 设置背景图，加滤镜

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(......
            body: TabBarView(......
            //抽屉部件
            drawer: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  //用户的信息
                  UserAccountsDrawerHeader(
                      accountName: Text('wanghao', style: TextStyle(fontWeight: FontWeight.bold)),
                      accountEmail: Text('wanghao@163.com'),
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage('https://picsum.photos/id/142/600/400'),//设置头像
                    ),
                    //设置设置背景图片
                    decoration: BoxDecoration(
                      color: Colors.yellow[480],
                      image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/id/142/600/400'),
                        fit: BoxFit.cover,//将图片填充完整
                        colorFilter: ColorFilter.mode(//设置滤镜
                            Colors.yellow[400].withOpacity(0.6),
                            BlendMode.hardLight//设置滤镜的效果
                        ),
                      ),
                    ),
                  ),
                  //列表项
                  ListTile(......
                  ListTile(......
                  ListTile(......
                  ),
                ],
              ),
            ),
          ),

        );
  }
}

四、bottomNavigationBar：底部导航栏部件

class Home extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(......
            body: TabBarView(......
            //抽屉部件
            drawer: DrawerDemo(),
            bottomNavigationBar: BottomNavigationBarDemo()
          ),

        );
  }
}

BottomNavigationBarDemo.dart

import 'package:flutter/material.dart';

class BottomNavigationBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _BottomNavigationBarDemoState();
  }
}

class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo> {
  int _currentIndex = 0;

  void _onTapHandler (int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: _onTapHandler,
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.black,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.explore),
          label: 'Explore',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.history),
          label: 'History',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.list),
          label: 'List',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'My',
        ),
      ],
    );
  }
}