现在我们创建的是一个 Material 风格的应用 .. 用了一下 MaterialApp 这个小部件 ... 小部件里面都有一些属性还有方法..

应用的界面的右上角会显示一个 debug 条幅 .. 不想显示它的话，可以在 MaterialApp 里面，添加一个 debugShowCheckedModeBanner 属性，把它的值设置成 false ..

热重载以后 .. 之前在界面显示的 debug 条幅就不见了 ..

下面用了一个 home 属性，指定了默认显示的小部件 .. 还有一个 theme 属性，设置了一下应用的主题相关的东西 ..

这个 home 属性的值是个自定义的小部件 .. 在下面我们定义了这个小部件 ..

在这个小部件里面，用了一个 Scaffold .. 它可以为界面提供一个基本的结构 .. 比如在它里面我们可以设置一下顶部的工具栏，可以设置标签 .. 或者界面底部的导航栏等等 ... 后面我们会介绍使用这些东西 ..

暂时我们只用了它里面的 appBar 属性，设置了一下界面顶部的工具栏 .. 还有一个 body ... 它里面的东西是界面的主体内容 ...

现在这个主体内容是个列表视图 .. 构建这个列表视图的项目的显示，用到了一个叫 _listItemBuilder 的方法 ..

最终的效果就是你看到的这个图像还有文字的列表 ..

分离 ListView

下面我们可以把这个 ListView 单独放在一个小部件里面 .. 先添加一个类 ... 名字是 ListViewDemo ... 暂时让它继承一下 StatelessWidget ..

在类里面添加一个 build 方法 ... 方法有个 context 参数 ..

然后剪切一下 AppBar 的 body 属性的值 ... 把它换成 ListViewDemo ..

再把剪切的东西作为 ListViewDemo 的 build 方法返回的东西 ..

还需要这个 _listItemBuilder 方法 ... 剪切一下 ... 粘贴到我们自己定义的 ListViewDemo 这个类里面 ...

保存一下 ...

现在界面上仍然会显示之前的列表内容 ..

下面我们可以再把定义的这个 ListViewDemo 单独放在一个文件里面 ... 先剪切一下这块代码 ..

打开资源管理器 shfit + command + E ..

在 lib 下面，新建一个目录 .. 名字是 demo ... 在里面添加一个文件 .. 名字是 listview-demo.dart ..

把剪切的代码粘贴到这个文件里面 ..

这时候编辑器会给我们一些警告 ... 鼠标放上去 ... 会显示具体的信息 ...

原因是类里面需要的一些东西，都是 material 提供的 ... 在这个文件里面，还没有导入这个 material ..

到 main.dart 里面 .. 复制一下导入的 material ... 下面这个 post 也是 ListViewDemo 里面需要的东西 ..

把它们粘贴到 listview-demo 这个文件 ... 你会发现，有些错误警告就不见了 ..

导入的这个 post 有点问题 .. 是因为这个文件相对于当前文件的位置应该是在当前文件的上一级目录下面的 model 这个目录里面 .. ../ 表示上一级目录 ..

回到 main.dart ... 如果想在这里面使用 listview-demo 里定义的小部件 .. 可以先导入它 ...

按一下 F5，运行一下调试 ...

应用的界面上会显示一组列表内容 ..

再剪切一下这个 Hello ...

然后在 demo 下面，新建一个 hello-demo.dart ..

把剪切的代码粘贴到这个文件里面 .. 它也需要 material ... 在文件的顶部先导入这个 material ..

我们刚才创建的这两个文件的名字里面用了小横线 .. 可以把它们换成下划线 .. 这个不是必须的 ... 不过 flutter 应该更推荐在文件或者目录的名字里面使用下划线 ...

导入这个文件的时候，也需要再把这个小横线，换成下划线 ..

下面我们暂时先在界面的主体里把这个 ListViewDemo 去掉 ... 把 body 的值，换成 null ...

这样主体就会变成一片空白 ... 这样我们就可以更专注的去做课程里介绍的其它的界面 ..