快捷導(dǎo)航

flutter局部刷新的實(shí)現(xiàn)示例

更新時(shí)間：2020年09月29日 09:37:58 作者：依然ゝ心碎

這篇文章主要介紹了flutter局部刷新的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

局部刷新

我們?cè)谧鲰?xiàng)目的時(shí)候，都需要單獨(dú)的去刷新一個(gè)值，而不是把整個(gè)界面都重繪。大家都知道setState是進(jìn)行重繪的一個(gè)方法，他會(huì)執(zhí)行生命周期的一個(gè)build，這將會(huì)使得整個(gè)界面來(lái)進(jìn)行重繪。當(dāng)然我們也會(huì)說(shuō)把他進(jìn)行狀態(tài)管理，因?yàn)槲覀€(gè)人不是很喜歡用provider進(jìn)行狀態(tài)管理，而是使用steam和event_bus進(jìn)行傳值和管理，當(dāng)然自然的代碼就會(huì)多了，所以我現(xiàn)在也在尋找provider更簡(jiǎn)單的方法，當(dāng)然這里就不說(shuō)了，在跟其他人聊的時(shí)候，都說(shuō)好久沒(méi)有更新了。那是因?yàn)橛悬c(diǎn)忙，也變得懶了?，F(xiàn)在剛好趁著過(guò)年這一段時(shí)間，把一些對(duì)于在進(jìn)行Flutter開(kāi)發(fā)中的一些技巧就給大家舉個(gè)小例子。

Flutter狀態(tài)類

相信進(jìn)行過(guò)flutter開(kāi)發(fā)甚至了解過(guò)flutter進(jìn)行過(guò)小demo編寫的人，都知道最基本的有兩種狀態(tài)。一種是StatelessWidget；另一種是StatefulWidget。

StatelessWidget是指沒(méi)有狀態(tài)的類，他在頁(yè)面進(jìn)行編寫的時(shí)候就已經(jīng)固定了，不能更改，所以就是沒(méi)有相應(yīng)的setState方法。
StatefulWidget是指有狀態(tài)的類，當(dāng)狀態(tài)改變的時(shí)候，我們可以調(diào)用setState進(jìn)行頁(yè)面的重新build來(lái)進(jìn)行頁(yè)面狀態(tài)的更新。

自然我們調(diào)用setState進(jìn)行頁(yè)面刷新重新build的時(shí)候，那么setState方法自然ju會(huì)遍歷我們?cè)?strong>build下面所寫的每個(gè)Widget的State.build，這樣我說(shuō)起來(lái)，大家也就明白了，這樣會(huì)是一個(gè)很大的性能開(kāi)銷，所以我們可以使用局部刷新的方式來(lái)進(jìn)行優(yōu)化。

普通的刷新方式

class _MyHomePageState extends State<MyHomePage> {
 int count = 0;
 
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('Demo'),
   ),
   body: Container(
    alignment: Alignment.center,
    child: Column(
     children: <Widget>[
      Text('$count'),
      FlatButton(
       color: Theme.of(context).accentColor,
       onPressed: () {
        count++; 
        setState(() {});
       },
       child: new Text('按鈕 $count'),
      ),
     ],
    ),
   ),
  );
 }
}

可以看出我們進(jìn)行刷新的時(shí)候，這count值全部發(fā)生變化了。這樣我們需要上面的Text變化，下面的按鈕不進(jìn)行頁(yè)面的重繪怎么辦呢？

使用GlobalKey局部刷新方式

我們還是用上面的方式去實(shí)現(xiàn)，但是我們事先封裝好一個(gè)widget，使用GlobalKey的方式來(lái)進(jìn)行局部刷新Text。

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int count = 0;

 GlobalKey<_TextWidgetState> textKey = GlobalKey();

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('Demo'),
   ),
   body: Container(
    alignment: Alignment.center,
    child: Column(
     children: <Widget>[
      TextWidget(textKey), //需要更新的Text
      FlatButton(
       child: new Text('按鈕 $count'),
       color: Theme.of(context).accentColor,
       onPressed: () {
        count++; // 這里我們只給他值變動(dòng)，狀態(tài)刷新交給下面的Key事件
        textKey.currentState.onPressed(count); //其實(shí)這個(gè)count值已經(jīng)改變了 但是沒(méi)有重繪所以我們看到的只是我們定義的初始值
       },       
      ),
     ],
    ),
   ),
  );
 }
}

//封裝的widget
class TextWidget extends StatefulWidget {
 final Key key;

 const TextWidget(this.key);

 @override
 _TextWidgetState createState() => _TextWidgetState();
}

class _TextWidgetState extends State<TextWidget> {
 String text = "0";

 void onPressed(int count) {
  setState((){
   text = count.toString();
  });
 }

 @override
 Widget build(BuildContext context) {
  return new Text(text);
 }
}

效果：
可以看出按鈕的count值沒(méi)有發(fā)生變化，但是需要更新的組件已經(jīng)進(jìn)行了局部刷新。