1.4.4　组件的提取抽离

也许是为了好看，Flutter初始项目将所有东西都放在一个main文件夹下，但对于项目的维护来说，分包分库是必然的。有人会觉得Flutter的Widget树深长得可怕，那很可能是因为没用好。其实稍微提取和抽离一下Widget，就可以做到既不改变结构，又能让结构清晰和优雅。不要把所有东西都塞在一块儿，这样修改时找起来比较麻烦，出现错误时定位也非常困难。下面我们将初始项目进行简单的分离，分离和命名会按照笔者的习惯进行，仅供参考。

首先创建一个pages包，专门盛放项目中需要使用的界面。将主页面提取到一个文件中，命名尽可能采用小写字母并加下划线分隔，如home_page.dart。对于提取和抽离要注意预判和适度，比如一些不打算改动的部分就不需要抽离。例如，如果你觉得以后会有更改悬浮按钮的需求，就可以抽离出home_button.dart，当需要修改时直接改home_button.dart，不需要在home_page中去找这个按钮在哪里。

也就是让各功能由集中管理变成分散管理，架空home_page的职能，让home_page只关心页面结构的搭建，成为骨骼，对于界面具体元素的填充实现则放到专门的文件中进行，这是最基本的设计思想——单一职责。需要修改内容页或按钮时就在特定文件中修改。

---->[day01/02/pages/home_page.dart#_HomePageState#build]----
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text(widget.title)),
    body: HomeContent(count: _counter),
    floatingActionButton:HomeButton()
  );
}
---->[day01/02/pages/home/home_button.dart]----
//抽离成方法单独管理
Widget _buildHomeButton() {
  return FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  );
}
---->[day01/02/pages/home/home_content.dart]----
// 抽离成组件单独管理
class HomeContent extends StatelessWidget {
  final int count;
  HomeContent({this.count});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column( mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pushed the button this many times:',),
          Text('$count',   style: Theme.of(context) .textTheme.display1, ) ], ), ); 
　}
}

注意，并不一定要将组件抽取到单独文件，你也可以酌情处理。一切都是为了使组件的职责更加明确，结构更加清晰，让修改和拓展更加方便。你可以根据粒度的不同，将组件抽取成变量、方法或新组件。个人建议：对于需要频繁修改或高度可复用的组件，抽取成单独的组件进行管理；抽取成方法或变量的优势是它们在组件内部，不用担心深层次的组件间传参的问题，其中抽取成方法看起来更直观而且可传参，抽取成变量更方便。

凡事最难莫过一个度，没有什么是完美无缺的，谨记分离是为了更好地管理而非硬性要求。此处我们主要讲述了初始项目、Debug的使用以及工具使用，最后简单认识了一下Flutter的组件。将这些思想、工具整理好，装到背包里，和我一起开始旅程吧。