Drawer 侧边栏、以及侧边栏内 容布局

一、Flutter Drawer 侧边栏

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

return Scaffold(

  appBar: AppBar(

    title: Text("Flutter App"),

  ),

  drawer: Drawer(

    child: Text('左侧边栏'),

  ),

  endDrawer: Drawer(

    child: Text('右侧侧边栏'),

  ),

);

 

二、DrawerHeader

常见属性：

decoration  设置顶部背景颜色

child  配置子元素

padding  内边距

margin  外边距 

 

三、Flutter UserAccountsDrawerHeader

decoration  设置顶部背景颜色

accountName  账户名称

accountEmail  账户邮箱

currentAccountPicture  用户头像

otherAccountsPictures  用来设置当前账户其他账户头像

margin 

 

四、Flutter 侧边栏路由跳转

onTap: (){

   Navigator.of(context).pop();

   Navigator.pushNamed(context, '/search');

}

 

案例代码

import 'package:flutter/material.dart';
import '../home.dart';

class My extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              decoration: BoxDecoration(
                  image:DecorationImage( image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover )
              ),
            ),
            ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
//              Navigator.of(context).pop();
//              Navigator.pushNamed(context, '/search');
              Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 1)), (route) => route == null);
            },),
            ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
//              Navigator.of(context).pop();
//              Navigator.pushNamed(context, '/search');
              Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 2)), (route) => route == null);
            }),

          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text('右侧'),
      ),
    );
  }
}