快捷導(dǎo)航

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

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

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

局部刷新

我們在做項目的時候，都需要單獨的去刷新一個值，而不是把整個界面都重繪。大家都知道setState是進行重繪的一個方法，他會執(zhí)行生命周期的一個build，這將會使得整個界面來進行重繪。當然我們也會說把他進行狀態(tài)管理，因為我個人不是很喜歡用provider進行狀態(tài)管理，而是使用steam和event_bus進行傳值和管理，當然自然的代碼就會多了，所以我現(xiàn)在也在尋找provider更簡單的方法，當然這里就不說了，在跟其他人聊的時候，都說好久沒有更新了。那是因為有點忙，也變得懶了?，F(xiàn)在剛好趁著過年這一段時間，把一些對于在進行Flutter開發(fā)中的一些技巧就給大家舉個小例子。

Flutter狀態(tài)類

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

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

自然我們調(diào)用setState進行頁面刷新重新build的時候，那么setState方法自然ju會遍歷我們在build下面所寫的每個Widget的State.build，這樣我說起來，大家也就明白了，這樣會是一個很大的性能開銷，所以我們可以使用局部刷新的方式來進行優(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'),
      ),
     ],
    ),
   ),
  );
 }
}

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

使用GlobalKey局部刷新方式

我們還是用上面的方式去實現(xiàn)，但是我們事先封裝好一個widget，使用GlobalKey的方式來進行局部刷新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++; // 這里我們只給他值變動，狀態(tài)刷新交給下面的Key事件
        textKey.currentState.onPressed(count); //其實這個count值已經(jīng)改變了 但是沒有重繪所以我們看到的只是我們定義的初始值
       },       
      ),
     ],
    ),
   ),
  );
 }
}

//封裝的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值沒有發(fā)生變化，但是需要更新的組件已經(jīng)進行了局部刷新。