美文网首页Flutter
Flutter局部刷新组件

Flutter局部刷新组件

作者: mtko | 来源:发表于2020-03-07 22:32 被阅读0次

当界面复杂,嵌套多个子widget时,经常有刷新单个或者局部widget的需求,每次写业务时创建GlobalKey太繁琐不够优雅,使用provider状态控制类刷新可能功能又过重。习惯命令式刷新的同学,可以参考此文

RefreshableStatefulWidget

abstract class RefreshableStatefulWidget extends StatefulWidget {
  RefreshableStatefulWidget({Key key})
      : super(key: key is GlobalKey ? key : GlobalKey());

  void reload() {
    if (key is! GlobalKey) {
      return;
    }
    final aKey = key as GlobalKey;
    aKey.currentState.setState(() {});
  }
}

RefreshableView

class RefreshableView extends RefreshableStatefulWidget {
  final Widget Function(BuildContext cntext) builder;

  RefreshableView({Key key, @required this.builder})
      : assert(builder != null),
        super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _RefreshableViewState(builder);
  }
}

class _RefreshableViewState extends State<RefreshableView> {
  final Widget Function(BuildContext cntext) builder;
  _RefreshableViewState(this.builder);

  @override
  Widget build(BuildContext context) {
    return builder(context);
  }
}

使用

  • 构建
 _aRefreshableView = RefreshableView(builder: (BuildContext context) {
  return ListView.builder(
           itemCount: 10,
           itemBuilder: (BuildContext context, int index) {
           return Text("data$index");
         });
 });
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: _navigationBar,
        child: Column(
          children: <Widget>[
            Text("data"),
            Image.asset("image"),
            _aRefreshableView
          ],
        ));
  }
  • 刷新ListView
await request(); 
_aRefreshableView.reload(); // 网络请求回调后reload

相关文章

  • Flutter局部刷新组件

    当界面复杂,嵌套多个子widget时,经常有刷新单个或者局部widget的需求,每次写业务时创建GlobalKey...

  • Flutter之局部刷新(2021)

    Flutter 框架内部提供了一个非常小巧精致的组件,专门用于局部组件的刷新,它就是 ValueListenabl...

  • Flutter局部刷新

    setState会刷新整个页面,在只需要刷新部分组件的时候可以用StatefulBuilder 先给需要局部刷新的...

  • flutter局部刷新

    一、为什么要使用局部刷新 Flutter中有两个常用的状态Widget分为StatefulWidget和State...

  • Flutter组件(Widget)的局部刷新方式

    Flutter中有两个常用的状态Widget分为StatefulWidget和StatelessWidget,分别...

  • Flutter局部刷新技巧

    1、为什么需要局部刷新 如下图场景:在一个Navigator的某Router上有个Scffold页面,页面上并列三...

  • Flutter局部刷新原理

    概述在Flutter中,我们知道,刷新界面要调用setState方法,在一个界面中,通常只需要刷新某个组件或者某一...

  • vue组件局部刷新

  • Flutter 组件刷新

    介绍一下数据与Widget之间传递,数据改变-->触发Widget刷新 1.0 所需工具 Provider 2.0...

  • Flutter下拉刷新、上拉加载

    1、Flutter下拉刷新、上拉加载 注意: 滚动组件添加: physics: ClampingScrollPh...

网友评论

    本文标题:Flutter局部刷新组件

    本文链接:https://www.haomeiwen.com/subject/atjkdhtx.html