局部刷新

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

Flutter狀態類

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

StatelessWidget是指沒有狀態的類，他在頁面進行編寫的時候就已經固定了，不能更改，所以就是沒有相應的setState方法。

StatefulWidget是指有狀態的類，當狀態改變的時候，我們可以調用setState進行頁面的重新build來進行頁面狀態的更新。

自然我們調用setState進行頁面刷新重新build的時候，那么setState方法自然ju會遍歷我們在build下面所寫的每個Widget的State.build，這樣我說起來，大家也就明白了，這樣會是一個很大的性能開銷，所以我們可以使用局部刷新的方式來進行優化。

普通的刷新方式

class _MyHomePageState extends State {

int count = 0;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Demo'),

),

body: Container(

alignment: Alignment.center,

child: Column(

children: [

Text('$count'),

FlatButton(

color: Theme.of(context).accentColor,

onPressed: () {

count++;

setState(() {});

},

child: new Text('按鈕 $count'),

),

],

),

),

);

}

}

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

使用GlobalKey局部刷新方式

我們還是用上面的方式去實現，但是我們事先封裝好一個widget，使用GlobalKey的方式來進行局部刷新Text。

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

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: [

TextWidget(textKey), //需要更新的Text

FlatButton(

child: new Text('按鈕 $count'),

color: Theme.of(context).accentColor,

onPressed: () {

count++; // 這里我們只給他值變動，狀態刷新交給下面的Key事件

textKey.currentState.onPressed(count); //其實這個count值已經改變了 但是沒有重繪所以我們看到的只是我們定義的初始值

},

),

],

),

),

);

}

}

//封裝的widget

class TextWidget extends StatefulWidget {

final Key key;

const TextWidget(this.key);

@override

_TextWidgetState createState() => _TextWidgetState();

}

class _TextWidgetState extends State {

String text = "0";

void onPressed(int count) {

setState((){

text = count.toString();

});

}

@override

Widget build(BuildContext context) {

return new Text(text);

}

}

效果：

可以看出按鈕的count值沒有發生變化，但是需要更新的組件已經進行了局部刷新。

實現原理

textKey是通過一個GlobalKey使用currentState方法調用封裝的widget里面的onPressed方法，剛好onPressed方法里面有setState用來刷新局部的widget狀態。

到此這篇關于flutter局部刷新的實現示例的文章就介紹到這了,更多相關flutter 局部刷新內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的flutter怎么手动刷新_flutter局部刷新的实现示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。