6 easy tips when working with setState
6 tips ?? ??????? ?? set state
???? ????? ??????? ?? state ?? flutter ?? set state ???? ???? ??? ??????? ???? ???? ??? ?????? ???? ??????
??????? set state ?? ???? ???? ????? ?? ?? user interface ???? ???? rebuild ? current widgets ?its descendants
???????? ???? ???? ???? :
Tip 1: Keep your widgets small!
???? ???? ?? widgets ????? ??? ???????? ? set state ????? rebuild widgets ???? ??? ????????? ?????? ???? ?? ????? ?????? ??? widget ???? ??? ???????? rebuild ? whole widget ???????? ?? ????? ??? ??????? ??? ?????? ???
.. ????? ???? ???? :
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _State();
}
class _State extends State<Home> {
bool _tile1 = false;
bool _tile2 = false;
bool _tile3 = false;
bool _tile4 = false;
bool _tile5 = false;
@override
Widget build(BuildContext context) {
print("built method Home"); // <-- setState triggers build here!
return Scaffold(
appBar: AppBar(title: const Text("Demo")),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SwitchListTile(
activeColor: Colors.green,
inactiveThumbColor: Colors.red,
title: Text("Switch is ${_tile1 ? "on" : "off"}"),
value: _tile1,
onChanged: (_) {
setState(() {
_tile1 = !_tile1;
});
}),
SwitchListTile(
activeColor: Colors.green,
inactiveThumbColor: Colors.red,
title: Text("Switch is ${_tile2 ? "on" : "off"}"),
value: _tile2,
onChanged: (_) {
setState(() {
_tile2 = !_tile2;
});
}),
SwitchListTile(
activeColor: Colors.green,
inactiveThumbColor: Colors.red,
title: Text("Switch is ${_tile3 ? "on" : "off"}"),
value: _tile3,
onChanged: (_) {
setState(() {
_tile3 = !_tile3;
});
}),
SwitchListTile(
activeColor: Colors.green,
inactiveThumbColor: Colors.red,
title: Text("Switch is ${_tile4 ? "on" : "off"}"),
value: _tile4,
onChanged: (_) {
setState(() {
_tile4 = !_tile4;
});
}),
SwitchListTile(
activeColor: Colors.green,
inactiveThumbColor: Colors.red,
title: Text("Switch is ${_tile5 ? "on" : "off"}"),
value: _tile5,
onChanged: (_) {
setState(() {
_tile5 = !_tile5;
});
})
])));
领英推荐
}
}
??? ????? 5 SwitchListTile Widgets ?????? ?? Column ???? ???? ??? ?? ??? ?? widget ??? ???? ????? ?? ?? SwitchListTile ????? rebuild ????? ???? ???? ??? ???? ???? rebuild ? widget ???? ??? ??? ????? ?? ????? ????? ???? ???? ??????? :
import 'package:flutter/material.dart';
class Home2 extends StatefulWidget {
const Home2({Key? key}) : super(key: key);
@override
State<Home2> createState() => _State();
}
class _State extends State<Home2> {
@override
Widget build(BuildContext context) {
print("built method Home2");
return Scaffold(
appBar: AppBar(title: const Text("Demo")),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Switch(),
Switch(),
Switch(),
Switch(),
Switch()
])));
}
}
class Switch extends StatefulWidget {
const Switch({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _SwitchState();
}
class _SwitchState extends State<Switch> {
bool _value = false;
@override
Widget build(BuildContext context) {
print("build method Switch"); // <-- setState triggers build here!
return SwitchListTile(
activeColor: Colors.green,
inactiveThumbColor: Colors.red,
title: Text("Switch is ${_value ? "on" : "off"}"),
value: _value,
onChanged: (_) {
setState(() {
_value = !_value;
});
});
}
}
???? ????? ?? SwitchListTile ?? stateful widget ???? ??? ???? ??? ?? switch ???? rebuild ?? ??? ?? ??? ??????? ???? ?? performance ?? ????? ??? ??scale ?????? ?? ??? ???? ?? ??? scale ????.
Tip 2: Don’t call setState in build methods
?????? ???????? setState ???? build method
Tip 3: Don’t call setState in initState methods
?????? ???????? setState ???? initState methods
Tip 4: setState() and setState(…) are equal
?? ????? ????????? ???
setState((){
_text = “Hello”;
});
?? ???
_text = “Hello”;
setState((){});
Tip 5: setState(…) code must be small
?? ???? ?? ?????? ?????? ????? ???? setState ????? ????? block ???????
setState(() {
for (var i = 0; i < 10000; i++) print(i);
_value = true;
});
??? ??? ????? ??????? ????? rebuild ? widget ????? ????? ?? ?? ?????? ??????? ??? interaction ?? ???????? ???????? ?? ??? ???????? ??? ???? ?? ????? ??? ?? ???? ???? ?? ????? ??????? ???? ????? ????? ?? ???? ???????? ?? ????? ?? rebuild ????? ????? ????? ????? ????? ?????
?? ????? ???? ?????? ???? ???? ???????? ?? ????? ?? ???? ?????? ??? ?????? ??????? .
Tip 6: setState(…) code must not be async
setState(() async {
await Future.delayed(const Duration(seconds: 5));
});
????? ??? ?? ?? ?????? ? exception
????? async operations ???? ???? ??method ?? ???? ??? ??? ?????????
#programming
#developer
#flutter