Question

我来自HomeBloc类的HomeView。 UI的基本架构如下：

HomeView extends StatelessWidget {
    BlocProvider( child: HomeBody(), bloc: new HomeBloc() )
}

HomeBody extends StatefulWidget {
    createState => HomeBodyState()
}

HomeBodyState extends State {
    BlocBuilder(
        bloc: BlocProvider.of<HomeBloc>()
        child: Container(
            child: Column(
                children: [
                    BlocProvider( child: CashFlowView, bloc: new HomeBloc() )
                ]
            )
        )
    )
}

CashFlowView extends StatefulWidget {
    createState => CashFlowState()
}

CashFlowState extends State {
    BlocBuilder(
        bloc: BlocProvider.of<HomeBloc>()
        child: Container(
            child: Column(
                children: [
                    ChipGroupWidget(
                      onClick => BlocProvider.of().add(event) //  <----- Problem is here
                    )
                ]
            )
        )
    )
}

可以在this repository中找到整个代码。问题是，当点击Chip中的任何ChipGroup时，将在CashFlowState中调用回调函数。在其中，将bloc事件与一些数据一起添加到bloc中。但这只是第一次触发。我的代码有什么问题？

Answer 1

在Flutter Bloc模式系统中，仅在状态更改时才重建UI。在任何情况下，如果触发事件触发了当前所在组的相同状态，则不会再次调用build函数，即不会重建UI。

在您的情况下，第一次产生CashFlowState时，整个代码就可以正常工作。但是然后再次产生相同的状态，事件被触发，但是构建状态不再被调用，因为状态从未改变。

您要做的是，创建两个不同的状态以及两个不同的事件。可以说，chipTappedEvent将产生chipTappedState，而chipResetEvent将产生chipResetState。

在开始时，您可以使用chipResetState或任何其他状态作为初始状态。然后，当用户点击芯片时，只需触发chipTappedEvent，它就会产生chipTappedState。

在您的监听器中，监听状态chipTappedState，然后执行您必须做的事情。然后立即触发chipResetEvent，它应产生chipResetState。这样，当用户再次点击芯片时，屈服状态将为chipTappedState，它与chipResetState不同，因此将再次调用构建函数。

Answer 2

来自bloc library documentation
使用 equatable 扩展您的状态类，并在每个事件后使用新属性（数据）发出一个新状态（相同类型）

相同的BLoC事件不会触发一次以上

2 个答案: