flutter_bloc的BlocBuilder是否可以避免重建未更改的Widget部分? [英] Can BlocBuilder of flutter_bloc avoid rebuild part of Widget which not changing?

问题描述

flutter_bloc 的

BlocBuilder是将页面的所有状态放在一起的一种.

在某种情况下pulling a list有2个数据(isPullingState，dataList)，当dataList不变时，如何避免构建dataList的窗口小部件部分，而从 true 到 false 吗?

BlocBuilderCondition看起来仅在孔状态不变时才避免重建.

解决方案

BlocBuilder具有类型为bool Function(State previous, State current)的最佳参数condition，如果要让小部件调用builder函数，如果您不愿意，请按false.此参数是可选的，默认情况下为true.

由于在condition参数中您具有previous状态和current状态，因此您可以比较此状态的属性，并在满足比较条件时返回true.

请记住，您需要覆盖状态的==运算符和hashCode以及状态类中使用的所有类.一种简单的方法是使用等同.

在您的情况下，您需要这样的State:

 class MyState extends Equatable {
  final bool isPullingState;
  final List<MyClass> dataList;

  MyState(this.isPullingState, this.dataList)
      : super([isPullingState, dataList]);
}

class MyClass extends Equatable {
  final int property1;
  final int property2;

  MyClass(this.property1, this.property2)
      : super([
          property1,
          property2,
        ]);
}

 

然后在小部件中可以设置所需的条件:

 @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        BlocBuilder(
          bloc: myBloc,
          condition: (MyState previous, MyState current) =>
              previous.isPullingState != current.isPullingState,
          builder: (BuildContext context, MyState state) {
            // this function is only called when isPullingState change
            return MyIsPullingWidget();
          },
        ),
        BlocBuilder(
          bloc: myBloc,
          condition: (MyState previous, MyState current) =>
              previous.dataList != current.dataList,
          builder: (BuildContext context, MyState state) {
            // this function is only called when the dataList change
            return MyListWidget(state.dataList);
          },
        ),
        BlocBuilder(
          bloc: myBloc,
          builder: (BuildContext context, MyState state) {
            // this function is called in each state change
            return MyListWidget(state.dataList);
          },
        ),
      ],
    );
  }
 

BlocBuilder of flutter_bloc is kind of put all state of page together.

There's a case for pulling a list there's 2 data (isPullingState, dataList), how can I avoid build widget part of dataList when dataList not change, but build widget part of isPullingState which changed from true to false ?

BlocBuilderCondition looks like only avoid rebuild when hole state not change.

解决方案

The BlocBuilder have a optinal parameter condition that have type bool Function(State previous, State current), you need to return true if you want the widget call the builder function, and false if you don't want. This parameter is optional, and by default is true.

Because the in the condition parameter you have the previous state and the current state you can compare the properties of this states and and return true if it satisfies your comparisons.

Remember that you need to override the == operator and hashCode of your state and all classes that use in your state class. And easy way to do this is using equatable.

In your case you need to have a State like this:

class MyState extends Equatable {
  final bool isPullingState;
  final List<MyClass> dataList;

  MyState(this.isPullingState, this.dataList)
      : super([isPullingState, dataList]);
}

class MyClass extends Equatable {
  final int property1;
  final int property2;

  MyClass(this.property1, this.property2)
      : super([
          property1,
          property2,
        ]);
}

And then in your widget you can set the condition that you want:

@override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        BlocBuilder(
          bloc: myBloc,
          condition: (MyState previous, MyState current) =>
              previous.isPullingState != current.isPullingState,
          builder: (BuildContext context, MyState state) {
            // this function is only called when isPullingState change
            return MyIsPullingWidget();
          },
        ),
        BlocBuilder(
          bloc: myBloc,
          condition: (MyState previous, MyState current) =>
              previous.dataList != current.dataList,
          builder: (BuildContext context, MyState state) {
            // this function is only called when the dataList change
            return MyListWidget(state.dataList);
          },
        ),
        BlocBuilder(
          bloc: myBloc,
          builder: (BuildContext context, MyState state) {
            // this function is called in each state change
            return MyListWidget(state.dataList);
          },
        ),
      ],
    );
  }

这篇关于flutter_bloc的BlocBuilder是否可以避免重建未更改的Widget部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！