Flutter學習- statefulbuilder組件

 StatefulBuilder可以根據狀態的改變，動態的重建其子組件，並在每次重建時提供一個可用的構建器功能。它可以讓開發者更加輕鬆地構建一個可以根據內部狀態改變的UI，並且可以更輕鬆地對該UI進行更新，最重要的好處在於不需要重新構建整個應用程序。另外，有些組件如diaolog沒有更新狀態的功能，包上這個組件後，就可以在跳窗中更新狀態。

教學影片:https://www.bilibili.com/video/BV1hM411U7KA/?spm_id_from=333.337.search-card.all.click&vd_source=fa9081c24751e12d42048a4d68c83d90

它的用法很簡單，就是在需要更新的部份外，包上一個StatefulBuilder，並在裡面用builder的屬性，return你要更新的組件。其builder的第一個參數是 「上下文關係」，第二個則是「setState」，加上這個「setState」，可讓原本沒有狀態的組件，能setState它的狀態。

基本格式如下:

StatefulBuilder(builder:(context,setState){

return 組件;

})

範例:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var testString = '原本顯示在跳窗上的內容';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('測試Hero'),
      ),
      body: SizedBox(
        height: 600,
        width: 400,
        child: StatefulBuilder(
          builder: (BuildContext context, setState) {
            return AlertDialog(
              title: Text('statefulState測試'),
              content: Text(
                testString.toString(),
                style: TextStyle(fontSize: 28, color: Colors.cyan),
              ),
              actions: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    testString = '點了OK，會改變成這個';
                    setState(() {
                      // 要運作的程式，可以放在此處
                    });
                  },
                  child: Text('OK'),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}