- StatefulWidget 擁有 State弟疆，對(duì)外的類
- State 是 StatefulWidget 的內(nèi)部邏輯购城，包括狀態(tài)管理和UI創(chuàng)建
State 狀態(tài)發(fā)生改變后套利，調(diào)用 setState 會(huì)將 StatefulWidget 標(biāo)記為 需要重建兜辞，在下個(gè)事件循環(huán)中蜻懦，會(huì)將所有白哦紀(jì)委需要重建的 widget 一起計(jì)算布局并生成渲染樹姨夹，然后對(duì)比新老渲染樹纤垂，更新需要更細(xì)的部分矾策。
setState后發(fā)生的事情
- 狀態(tài)更新
狀態(tài)更新后,調(diào)用 setState - 標(biāo)記為需要重建
setState后，F(xiàn)lutter框架會(huì)將與State關(guān)聯(lián)的Widget標(biāo)記為需要更新峭沦，并在下個(gè)事件循環(huán)重新繪制這個(gè)Widget的UI
3.事件循環(huán)
Flutter的事件循環(huán)用來處理各種事件贾虽，例如用戶輸入、定時(shí)器回調(diào)等吼鱼，當(dāng)進(jìn)入事件回調(diào)是蓬豁，F(xiàn)lutter會(huì)檢查是否有被標(biāo)記為需要重建的Widget - 繪制UI
重建過程中，F(xiàn)lutter會(huì)計(jì)算出Widget的布局菇肃、尺寸地粪、外觀，然后將這些更新合并到一個(gè)渲染樹 - 更新UI
Flutter對(duì)比新舊渲染樹琐谤，找到改變的部分驶忌，并把變化應(yīng)用到屏幕上
setState性能
- 需要保持StatefulWidget足夠小
控制刷新的Widget范圍，盡量減少Widget的刷新
總結(jié)：不要在頁(yè)面節(jié)點(diǎn)使用 setState
// setState會(huì)刷新整體笑跛，影響范圍大
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
var _value1 = false;
var _value2 = false;
@override
Widget build(BuildContext context) {
this.widget;
return ListView(
children: [
Switch(
value: _value1,
onChanged: (value) {
_value1 = !_value1;
setState(() {});
}),
Switch(
value: _value2,
onChanged: (value) {
_value2 = !_value2;
setState(() {});
}),
],
);
}
}
// setState刷新局部付魔，影響范圍小
import 'dart:ffi';
import 'package:best_flutter_ui_templates/fitness_app/bottom_navigation_view/bottom_bar_view.dart';
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
var _value1 = false;
var _value2 = false;
@override
Widget build(BuildContext context) {
this.widget;
return ListView(
children: [
MySwitch(_value1),
MySwitch(_value2),
],
);
}
}
class MySwitch extends StatefulWidget {
final value;
const MySwitch(this.value, {super.key});
@override
State<MySwitch> createState() => _MySwitchState(value);
}
class _MySwitchState extends State<MySwitch> {
_MySwitchState(this.value);
bool value;
@override
Widget build(BuildContext context) {
return Switch(
value: value,
onChanged: (value) {
value = !value;
setState(() {});
});
}
}
- 不要濫用setState
initState和build方法中不要調(diào)用setState，initState結(jié)束后會(huì)觸發(fā)build構(gòu)建飞蹂，無需調(diào)用setState
3.setState快速執(zhí)行
setState結(jié)束后會(huì)觸發(fā) build 構(gòu)建几苍，不能阻塞它的速度
4.setState() 和 setState(...) 作用相同
setState((){
name= "tom";
})
和下面的效果相同
name= "tom";
setState((){
})
