集團新手在這里。根據標題,我有一個 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
uj5u.com熱心網友回復:
你必須編輯您的輪播包括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 庫會阻止在重新發射之前沒有其他狀態的情況下重新發射相同的狀態,并且如果您不包含引數,則等式將無法正常運行
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/334991.html
