您现在的位置是:首页 >技术交流 >Flutter-Drawer使用网站首页技术交流

Flutter-Drawer使用

shelutai 2024-06-17 10:47:08
简介Flutter-Drawer使用

drawer
Drawer是Android开发中Material风格常用的设计,就是我们常说的“抽屉”效果,一个从侧边栏拉出来的导航面板。

在Flutter使用Material风格,最为常用的组件之一就是Scaffold了;Scaffold的drawer属性是一个Widget类型的组件,从左侧边栏拉出,通常就是用一个Drawer对象实现(Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板);

如果没有设置AppBar的leading属性,则当使用Drawer的时候会自动显示一个IconButton来告诉用户有侧边栏(在 Android 上通常是显示为三个横的图标)。

Drawer的child属性定义了其展示的内容,通常是用一个 ListView来实现,而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息,最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader 。

DrawerHeader
通常用于在抽屉中在顶部展示一些基本信息;其包含如下属性:

decoration:header区域的decoration,通常用来设置背景颜色或者背景图片
duration 和 curve:如果decoration发生了变化,则会使用 curve设置的变化曲线和duration设置的动画时间来做一个切换动画
child: Header里面所显示的内容控件
padding: Header里面内容控件的padding值,如果child为null,则这个值无效
margin:Header四周的间隙
如果想在DrawerHeader中显示用户账户信息,比如类似于 Gmail 的 联系人头像、用户名、Email 等信息,则可以使用 UserAccountsDrawerHeader这个特殊的DrawerHeader。

UserAccountsDrawerHeader
UserAccountsDrawerHeader可以设置用户头像、用户名、Email 等信息,显示一个符合MD规范的 drawer header。其常用属性如下:

margin:Header四周的间隙
decoration:header区域的decoration,通常用来设置背景颜色或者背景图片
currentAccountPicture:用来设置当前用户的头像
otherAccountsPictures:用来设置当前用户的其他账号的头像(做多显示三个)
accountName:当前用户的名字
accountEmail:当前用户的 Email
onDetailsPressed: 当 accountName 或者 accountEmail 被点击的时候所触发的回调函数,可以用来显示其他额外的信息
DrawerItem
DrawerItem封装了常用的Drawer菜单Item样式,其主要属性如下:

icon:配置菜单项的图标和图标尺寸、颜色
child:具体的菜单项内容
onPressed:当点击菜单项的时候所触发的回调函数
selected: 当前菜单项是否选中了
我将DrawerItem添加了删除线,因为在最新的Flutter中已经找不到DrawerItem这个类了,可以使用ListTiles 和 AboutListTiles作为替代

Sample

class HomeBuilder {
  static Widget homeDrawer() {
    return new ListView(padding: const EdgeInsets.only(), children: <Widget>[
      _drawerHeader(),
      new ClipRect(
        child: new ListTile(
          leading: new CircleAvatar(child: new Text("A")),
          title: new Text('Drawer item A'),
          onTap: () => {},
        ),
      ),
      new ListTile(
        leading: new CircleAvatar(child: new Text("B")),
        title: new Text('Drawer item B'),
        subtitle: new Text("Drawer item B subtitle"),
        onTap: () => {},
      ),
      new AboutListTile(
        icon: new CircleAvatar(child: new Text("Ab")),
        child: new Text("About"),
        applicationName: "Test",
        applicationVersion: "1.0",
        applicationIcon: new Image.asset(
          "images/ymj_jiayou.gif",
          width: 64.0,
          height: 64.0,
        ),
        applicationLegalese: "applicationLegalese",
        aboutBoxChildren: <Widget>[
          new Text("BoxChildren"),
          new Text("box child 2")
        ],
      ),
    ]);
  }

  static Widget _drawerHeader() {
    return new UserAccountsDrawerHeader(
//      margin: EdgeInsets.zero,
      accountName: new Text(
        "SuperLuo",
        style: HStyle.titleNav(),
      ),
      accountEmail: new Text(
        "xxx",
        style: HStyle.bodyWhite(),
      ),
      currentAccountPicture: new CircleAvatar(
        backgroundImage: new AssetImage("images/ymj_jiayou.gif"),
      ),
      onDetailsPressed: () {},
      otherAccountsPictures: <Widget>[
        new CircleAvatar(
          backgroundImage: new AssetImage("images/ymj_shuijiao.gif"),
        ),
      ],
    );
  }
}

class HomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBase.appBar("Home"),
      drawer: new Drawer(
        child: HomeBuilder.homeDrawer(),
      ),
    );
  }
}

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

运行效果截图:

在这里插入图片描述

可以看到Flutter提供的组件封装的已经非常耐用了。

作者:SupLuo
链接:https://www.jianshu.com/p/70e0324c0204

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。