1.1.3　MyHomePage與_MyHomePageState分析

下面是關于MyHomePage的代碼，這段代碼是應用程序的主頁面。MyHomePage繼承自StatefulWidget，是可變狀態組件。它持有父組件（MyApp）提供的值（如本例的title）。可變狀態組件可以借助State類完成狀態的更改，比如這里的_MyHomePageState。

---

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

---

如果你對于可變狀態有點不理解，現在完全不用擔心，之后你會一點點認識它。這里_MyHomePageState繼承自State類，并且以MyHomePage為泛型。這樣在_MyHomePageState里就可以使用MyHomePage中的屬性（如widget.title）。

State抽象類有一個build抽象方法，返回Widget對象，就說明Scaffold也是Widget類型。如果仔細去看Scaffold下的每個屬性對應的類型，可以驚奇地發現AppBar、Center、Column、Text、FloatingActionButton、Icon全是Widget。

_MyHomePageState中有一個狀態量_counter，在點擊“+”按鈕時，會觸發自增的方法。此時_counter就會加1，我們想要的就是將新的狀態展現在屏幕上。setState方法就起到這個作用：通知Flutter框架重新執行build方法，渲染出最新的狀態。

---

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() { _counter++;  });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: Text(widget.title),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text( 'You have pushed the button this many times:' ),
            Text('$_counter',
              style: Theme.of (context).textTheme.display1),] 
　　　　　),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),  
　　　), 
　　 );
　}
}

---

總結一下：可變狀態組件擁有一個狀態類，可以用來決定自身的表現。狀態類可以獲取組件中的屬性進行顯示。每次狀態類中調用setState方法，都會更新界面信息。

可見，仿佛Widget構建了整個界面，這也難怪初學者會認為Flutter世界一切皆Widget。也許新手會對這種布局結構有些抵觸，先保留你的態度。隨著你的深入了解，你會被Flutter視圖強大的復用性和表現力折服。