Flutter Widget 之StatefulBuilder構建方法詳解

Posted on by

正文

你曾否意識到你需要拆分一個大型的構建方法，但又覺得這聽起來很費勁？

試試StatefulBuilder 以最小的代價獲得一個個單獨的小部件的所有性能

想象一下，這樣的一個小部件，有一個可以切換單一標志的便宜的子部件，然後是一個昂貴的小部件。

除非絕對必要，否則你不會想要重建它

bool isExpanded = false;
Widget build(context) {
    return Column(
        children: [
            InexpendsiveStateful(
                isExpanded: isExpanded,
                onTap: (bool newValue) => setState(() => isExpanded = val),
            ),
            ExpensiveStateless(),
        ]
    );
}

性能問題解決

為瞭解決性能問題，用一個StatefulBuilder來包裝Stateful部分,StatefulBuilder與builder類似，除瞭傳遞給builder的那個額外的setState參數

bool isExpanded = falise;
Widger build(context) {
    return Column(
        children: [
            StatefulBuilder(
                builder: (ctx, setState) => 
                    InexpensiveStateful(
                        isExpanded: isExpanded,
                        onTap: (bool newValue) => setState(() => isExpanded = val),
                    )
            ),
            ExpensiveStateless(),
        ]
    );
}

為瞭善加利用這個嶄新的小部件，調用其特殊的setState函數來重建你的應用程序的那一部分，當那個onTap方法被調用setState時，它就是你的StatefulBuilder的setState范圍

這意味著你的ExpensiveStateless小部件仍然沒有被觸動

StatefulBuilder是一個很好的方法，可以從一個單獨的小部件中獲得所有的性能提升，而不需要做大部分的工作。

如果想瞭解有關# StatefulBuilder的內容，或者關於Flutter的其他功能，請訪問pub.dev

以上就是Flutter Widget 之StatefulBuilder構建方法詳解的詳細內容，更多關於Flutter Widget StatefulBuilder的資料請關註WalkonNet其它相關文章！

推薦閱讀：