颤振blocbuilder未接收状态更新

Question

集团新手在这里。根据标题，我有一个BlocBuilder，它是BlocProvider的子元素。

这个BlocBuilder在第一个之后没有收到更新，我不明白为什么经过了很多小时。有人能给我解释一下吗?

目标是显示卡片的水平列表(ICards只是自定义的卡片)，下面是一个页面指示器列表，根据接收到的状态改变颜色。

@override
Widget build(BuildContext context) {
return Scaffold(
[...]
child: BlocProvider(
create: (context) => CarouselCubit(),
child: Column(
children: <Widget>[
const ICardCarousel(),
[...]

class ICardCarousel extends StatelessWidget {
const ICardCarousel({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocBuilder<CarouselCubit, CarouselState>(
builder: (ctx, state) {
print(
'received state $state, with page selected ${state.pageSelected}');
return Column(
children: <Widget>[
_cardList(ctx),
_pageIndicatorContainer(state.pageSelected),
],
);
},
);
}
Widget _cardList(BuildContext context) {
return SizedBox(
height: 170,
child: PageView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, i) {
return _viewHolder();
},
itemCount: 3,
onPageChanged: (pageNumber) {
print('onPageChanged $pageNumber');
BlocProvider.of<CarouselCubit>(context).onPageChanged(pageNumber);
},
),
);
}
Widget _pageIndicatorContainer(int pageSelected) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(pageSelected),
);
}
Widget _viewHolder() {
return Align(
alignment: Alignment.center,
child: Wrap(
children: const <Widget>[
ICard(
width: 200,
height: 100,
logo: 'assets/logo.png',
qrCode: 'assets/qr-code.png',
),
],
),
);
}
Widget _pageIndicator(bool isActive) {
return SizedBox(
height: 10,
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
margin: const EdgeInsets.symmetric(horizontal: 4.0),
height: isActive ? 10 : 8.0,
width: isActive ? 12 : 8.0,
decoration: BoxDecoration(
boxShadow: [
isActive
? BoxShadow(
color: Colors.lightBlue.withOpacity(0.72),
blurRadius: 4.0,
spreadRadius: 1.0,
offset: const Offset(
0.0,
0.0,
),
)
: const BoxShadow(
color: Colors.transparent,
)
],
shape: BoxShape.circle,
color: isActive ? Colors.lightBlue : Colors.black,
),
),
);
}
List<Widget> _buildPageIndicator(int selectedindex) {
print('buildPageIndicator: selectedindex $selectedindex');
List<Widget> list = [];
for (int i = 0; i < 3; i++) {
list.add(
i == selectedindex ? _pageIndicator(true) : _pageIndicator(false));
}
return list;
}
}

class CarouselState extends Equatable {
CarouselState({required this.pageSelected}) {
print('creating new CarouselState. pageSelected: $pageSelected');
}
@override
List<Object> get props => [];
final int pageSelected;
}
class CarouselCubit extends Cubit<CarouselState> {
CarouselCubit() : super(CarouselState(pageSelected: 0));
void onPageChanged(int page) {
emit(CarouselState(pageSelected: page));
}
}

打印:

Restarted application in 1.183ms.
I/flutter ( 6845): creating new CarouselState. pageSelected: 0
I/flutter ( 6845): received state CarouselState(), with page selected 0
I/flutter ( 6845): buildPageIndicator: selectedindex 0
I/flutter ( 6845): onPageChanged 1
I/flutter ( 6845): creating new CarouselState. pageSelected: 1
I/flutter ( 6845): received state CarouselState(), with page selected 1
I/flutter ( 6845): buildPageIndicator: selectedindex 1
I/flutter ( 6845): onPageChanged 2
I/flutter ( 6845): creating new CarouselState. pageSelected: 2

Answer 1

您必须编辑CarouselState以将pageSelected包含在props中，如下所示:

class CarouselState extends Equatable {
CarouselState({required this.pageSelected}) {
print('creating new CarouselState. pageSelected: $pageSelected');
}
@override
List<Object> get props => [pageSelected];
final int pageSelected;
}

原因是BLoC库防止在重新释放之前没有另一个状态的情况下重新释放相同的状态，并且如果不包含参数，则可等价的不能正确工作