Flutter的局部刷新-StatefulBuilder

本文介绍了在Flutter中如何使用StatefulBuilder来实现局部刷新,以提高性能。传统的setState()方法会刷新整个UI,而StatefulBuilder则允许开发者只更新特定部分。通过示例代码展示了如何在按下按钮时更新计数器,以此说明StatefulBuilder的用法。
摘要由CSDN通过智能技术生成

一、前言

在Flutter中用到setState(() {});来进行刷新,不过这种方式常常会导致整个UI进行刷新在性能上不是很好,因此官方提供了StatefulBuilder来进行局部刷新

二、演示代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

///StatefulBuilder测试
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('YM------父控件刷新');
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: Column(
              children: [
                _buildChild(),
                RaisedButton(
                  onPressed: (){
                    _setter(() {
                      _count++;
                    });
                  },
                  child: Text('第二种计数方式'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

int _count = 0;
StateSetter _setter;

_buildChild() => StatefulBuilder(
  builder: (BuildContext context, StateSetter setState){
    _setter = setState;
    print('YM------子控件刷新');
    return Container(
      child: Column(
        children: [
          Text('计数:$_count'),
          RaisedButton(
            onPressed: (){
              setState(() {
                _count++;
              });
            },
            child: Text('第一种计数方式'),
          )
        ],
      ),
    );
  },
);

三、参考链接

  1. Flutter 小技巧实现通用的局部刷新:

    https://juejin.cn/post/6877460444651454478

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值