亲宝软件园·资讯

展开

flutter 局部刷新 flutter局部刷新的实现示例

依然ゝ心碎 人气:0
想了解flutter局部刷新的实现示例的相关内容吗,依然ゝ心碎在本文为您仔细讲解flutter 局部刷新的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:flutter,局部刷新,下面大家一起来学习吧。

局部刷新

我们在做项目的时候,都需要单独的去刷新一个值,而不是把整个界面都重绘。大家都知道setState是进行重绘的一个方法,他会执行生命周期的一个build,这将会使得整个界面来进行重绘。当然我们也会说把他进行状态管理,因为我个人不是很喜欢用provider进行状态管理,而是使用steamevent_bus进行传值和管理,当然自然的代码就会多了,所以我现在也在寻找provider更简单的方法,当然这里就不说了,在跟其他人聊的时候,都说好久没有更新了。那是因为有点忙,也变得懒了。现在刚好趁着过年这一段时间,把一些对于在进行Flutter开发中的一些技巧就给大家举个小例子。

Flutter状态类

相信进行过flutter开发甚至了解过flutter进行过小demo编写的人,都知道最基本的有两种状态。一种是StatelessWidget;另一种是StatefulWidget

自然我们调用setState进行页面刷新重新build的时候,那么setState方法自然ju会遍历我们在build下面所写的每个WidgetState.build,这样我说起来,大家也就明白了,这样会是一个很大的性能开销,所以我们可以使用局部刷新的方式来进行优化。

普通的刷新方式

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值全部发生变化了。这样我们需要上面的Text变化,下面的按钮不进行页面的重绘怎么办呢?

使用GlobalKey局部刷新方式

我们还是用上面的方式去实现,但是我们事先封装好一个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++; // 这里我们只给他值变动,状态刷新交给下面的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<TextWidget> {
 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状态。

加载全部内容

相关教程
猜你喜欢
用户评论