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的組件。將這些思想、工具整理好，裝到背包里，和我一起開始旅程吧。