flutter 分割线_Flutter之踩坑的日子（8）

今天要进行笔记本内容列表相关的页面制作。当用户选择了一个笔记本之后，我们应当将对应笔记本中的笔记依次列出来。

那么这里就涉及了一件事情：

我们目前还没有设计具体的笔记文件格式，因此也无法在测试时提供具体的笔记文件内容。

那么这部分的工作应当怎么进行下去呢？

答案是：

预先占位。

在实际的开发工作中，我们一定不要让尚未实现的工作阻碍整体的进度。我们应当使用对接的方式，来分离正在处理的部分，和尚未实现的内容。

具体说来，就是设计一个接口，人为地将代码分为当前部分和预留部分。比如设计一个占位函数 int getNoteCatlogs(); 用这个占位函数来返回笔记中的内容数量。当然了，你也可以直接定义一个 NoteCatlog类，来返回具体的笔记内容的目录。

那么在这种思路的指导下，我们先来看设计草图。

最上方是顶部标题栏，包括笔记本图标、笔记本名称、通过日期搜索笔记内容的图标和通过内容来搜索笔记的图标。

下面是显示笔记内容的区域，毫无疑问这一部分应当使用有状态组件来处理。

最后是添加内容的浮动按钮图标，和底部的导航栏图标。

顶部的导航栏选用AppBar来处理，但是AppBar似乎并不支持我们的这种样式，这里应当需要进行修改。

显示笔记内容的区域明显是一个多行的区域，可以用ListView来处理。由于ListView本身支持ListTile形式的组件，所以我们暂时先用这个ListTitle来看一下效果。

从图上可以看出，使用默认组件的时候，这个界面并没有完全达到我们想要的效果。

1. 顶部没有放置我们需要的两个搜索按钮。

2. 没有按照月份显示分割线。

3. 内容列表没有放置我们需要显示的日期，而是用图标代替。

4. 没有显示添加新内容的浮动按钮。

下面我们一个一个地解决这些问题。

最简单的是问题4，我们只需增加一个浮动按钮即可。

floatingActionButton:
 

然后是问题1，顶部标题栏的问题。我们首先看一下AppBar的源代码，这是为了看看flutter提供的组件本身，能不能解决我们的问题。

 AppBar({
 Key key,
 this.leading,
 this.automaticallyImplyLeading = true,
 this.title,
 this.actions,

在AppBar的构造方法中，leading和actions这两个参数引起了我的注意。

对于leading参数，官方的介绍是这样的：一个显示在title之前的组件，类型可以是图标或者图标按钮。

A widget to display before the [title].
Typically the [leading] widget is an [Icon] or an [IconButton].

对于actions参数，官方的介绍是这样的：一行显示在title之后的组件。这些组件的类型是IconButton表达常见操作。

Widgets to display in a row after the [title] widget.
Typically these widgets are [IconButton]s representing common operations. 

这不就妥了么？

我在图标资源里增加了两个图标，分别是日期选择图标和搜索图标。然后我更新了代码，增加了leading和2个action按钮。

      appBar: AppBar(
        leading: Icon(IconData(0xe632, fontFamily: 'NoteIcons')),
        title: Text("我的笔记本"),
        actions: <Widget>[
 IconButton(
            icon: Icon(IconData(0xe7b6, fontFamily: 'NoteIcons')),
            onPressed: () {},
          ),
 IconButton(
            icon: Icon(IconData(0xe723, fontFamily: 'NoteIcons')),
            onPressed: () {},
          )
        ],
      ),
 

一件奇怪的事情出现了，0xe632对应的图标可以正常显示，但是0xe7b6,0xe723对应的图标都没有显示出来。

而我用0xe632图标的时候，这两个位置的图标又可以显示？

我将模拟器上已安装的包卸载，又重新启动了vscode。

这次成功显示了正确的图标。看来问题是更新的资源没有被读取到项目中，或者模拟器没有接受到新的资源。

那么只有问题2和问题3了。

Listview显示分割线很简单，但是怎么才能按照我们的要求显示分割线，这就是需要考虑的问题了。

当和实际内容进行对接的时候，如果用户使用软件的频率比较高，每天都有笔记被记录，使用软件的日期又比较久，超过了1年，那么如何在这个笔记本上体现出所有的内容列表呢？

以年、月区分，大体上是合适的。

年份是第一级。

月是在年份之下的第二级。

月份之内的笔记，就可以按照时间顺序依次排列了。

以上是初步的考虑，而且不在这个版本中实现。

另一种合理的思路，是提供笔记内容列表给ListView的时候，先按照时间顺序进行排序，然后软件遍历内容列表的时候，按照时间顺序自动生成分割线。

今天很晚了，就先到这里。我们在下一篇文章，再讨论问题2和3的解决方案吧。

千里笔记测试版的GIT地址​github.com