Flutter第4期 滑动抽屉

上一期我们写了hello world，总算迈出了第一步。接下来我们要开始逐步的建立起一个app。

首先就是我们app中最常用的滑动侧边栏。就像下面这样。

废话不多说开搞！！！！！

一、改造首页

由于我们的hello world是在官方的demo基础上设置的，所以我们这里要做自己的app了。把下面的代码替换 MyHomePage 

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child:  Text(
          'hello world',
        ),
      ),
    );
  }
}

现在，你的app应该张成这个样子～～～～

好，接下来我们要去添加一个抽屉。

二、添加抽屉

在这之前我们需要先了解下 Scaffold 控件。以下是官方文档对 Scaffold 的描述。

简单来说，这个类提供了 Material Design 布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

我们打开 Scaffold 看下参数。

我们找到了这个drawer，开撸代码。

我们在 Scaffold 下添加 drawer 属性

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child:  Text(
          'hello world',
        ),
      ),
      drawer: new Drawer(
        child: Text('我是侧边栏～～～～')),
    );
  }
}

你现在的抽屉应该是张这个样子了

文字跑到最上面去了，没关系我们来继续给他添加内容。

三、添加侧边栏item

如果是侧边栏可能有很多项，可能需要滑动，遇到这个问题，以往的经验，我们使用list view 或者 scroll view 等实现，这里我们用listview去实现。同样，我们先去看下lsitview的官方文档。有兴趣的可以去看看，我们直接上代码。我们来看结果。

 我们现在来美化以下，使用 ListTile 来代替text。ListTile 是一个固定高度的行，通常包含一些文本，以及一个行前或行尾图标。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child:  Text(
          'hello world',
        ),
      ),
      drawer: new Drawer(
        child: Center(
          child: new ListView(
          children: <Widget>[
            new ListTile(
              leading: Icon(Icons.child_friendly),
              title: new Text("item 1"),
            ),
            new ListTile(
              leading: Icon(Icons.child_friendly),
              title: new Text("item 2"),
            ),
            new ListTile(
              leading: Icon(Icons.child_friendly),
              title: new Text("item 3"),
            ),
            new ListTile(
              leading: Icon(Icons.child_friendly),
              title: new Text("item 4"),
            ),
          ],
      ),
        ),),
    );
  }

对比下最终效果，我们在去做一个头部的个人信息。好在google已经为我们想好了，并且提供了支持。最终代码。

大功告成～～

四、总结

实际上代码没有什么含量，我们这里总结以下这里面遇到的ui控件。

• Scaffold 带有导航的基本页面实现。
• Drawer 抽屉的具体实现。
• Center 居中显示。
• ListView 滑动列表。
• ListTile 一个固定高度的行，通常包含一些文本，以及一个行前或行尾图标。
• Text 文字
• UserAccountsDrawerHeader 侧边栏使用的用户组件。