局部刷新

我們在做項目的時候，都需要單獨的去刷新一個值，而不是把整個界面都重繪。大家都知道setState是進行重繪的一個方法，他會執(zhí)行生命周期的一個build，這將會使得整個界面來進行重繪。當(dāng)然我們也會說把他進行狀態(tài)管理，因為我個人不是很喜歡用provider進行狀態(tài)管理，而是使用steam和event_bus進行傳值和管理，當(dāng)然自然的代碼就會多了，所以我現(xiàn)在也在尋找provider更簡單的方法，當(dāng)然這里就不說了，在跟其他人聊的時候，都說好久沒有更新了。那是因為有點忙，也變得懶了。現(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)的類，當(dāng)狀態(tài)改變的時候，我們可以調(diào)用setState進行頁面的重新build來進行頁面狀態(tài)的更新。

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

普通的刷新方式

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值全部發(fā)生變化了。這樣我們需要上面的Text變化，下面的按鈕不進行頁面的重繪怎么辦呢？

使用GlobalKey局部刷新方式

我們還是用上面的方式去實現(xiàn)，但是我們事先封裝好一個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++; // 這里我們只給他值變動，狀態(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 {

String text = "0";

void onPressed(int count) {

setState((){

text = count.toString();

});

}

@override

Widget build(BuildContext context) {

return new Text(text);

}

}

效果：

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

實現(xiàn)原理

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。