Flutter的局部刷新-StatefulBuilder

最新推荐文章于 2024-05-22 23:37:14 发布

原创最新推荐文章于 2024-05-22 23:37:14 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

flutter 专栏收录该内容

62 篇文章

订阅专栏

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

文章目录

一、前言

在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('第一种计数方式'),
          )
        ],
      ),
    );
  },
);