6 easy tips when working with setState

6 easy tips when working with setState

6 tips ?? ??????? ?? set state

???? ????? ??????? ?? state ?? flutter ?? set state ???? ???? ??? ??????? ???? ???? ??? ?????? ???? ??????

??????? set state ?? ???? ???? ????? ?? ?? user interface ???? ???? rebuild ? current widgets ?its descendants

???????? ???? ???? ???? :

  • Change a value ????? ??????
  • Call setState( ) (setState ??????? )
  • User interface is updated (????? ?? ui )


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

要查看或添加评论,请登录

Ismail Elmogy的更多文章

社区洞察

其他会员也浏览了