我用的是flutter_bloc包.如果我有一个状态为widget列表的bloc,这是一种不好的做法吗?
每次我按下或弹出,我都会发出一种新的状态.这个bloc很有用,因为这样我可以在弹出窗口中显示的小部件/小屏幕中的任何位置调用push或pop.请让我知道我的用例是否清楚,或者您是否需要进一步的详细信息.谢谢
以下是相关代码:
自定义堆栈:
class PopoverStack<E> {
PopoverStack() : _storage = <E>[];
final List<E> _storage;
void push(E element) {
_storage.add(element);
}
void pop() {
_storage.removeLast();
}
E get last => _storage.last;
bool get isEmpty => _storage.isEmpty;
bool get isNotEmpty => !isEmpty;
PopoverStack.of(PopoverStack<E> stack) : _storage = List<E>.of(stack._storage);
}
堆栈块:
class PopoverCardStackBloc extends Cubit<PopoverStack<PopoverPage>> {
PopoverCardStackBloc(PopoverStack<PopoverPage> popoverStack) : super(popoverStack);
void push(PopoverPage element) {
emit(PopoverStack.of(state..push(element)));
}
void pop() {
emit(PopoverStack.of(state..pop()));
}
}
Popover小部件(您将看到我使用"state.last"的地方):
class PopoverCardBody extends StatelessWidget {
const PopoverCardBody({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocBuilder<PopoverCardStackBloc, PopoverStack<PopoverPage>>(
builder: (context, state) {
state;
return Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(16),
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: AnimatedContainer(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16)),
height: state.last.height,
width: 429,
duration: const Duration(milliseconds: 200),
curve: Curves.decelerate,
child: Column(
children: [
Container(
height: 72,
padding: const EdgeInsets.all(16),
color: AppColors.backgroundLight.withOpacity(.5),
child: CenteredTitleBar(
title: state.last.title,
leadingChild: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: state.last.showBackButton
? () {
context.read<PopoverCardStackBloc>().pop();
}
: () {
BookingCard.tooltip.close();
},
child: state.last.showBackButton
? const Icon(
Icons.chevron_left,
color: Colors.white,
size: 24,
)
: const Text(
'Close',
style: TextStyle(
color: AppColors.textWhite,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
trailingChild: _buildActionButton(context),
),
),
Expanded(
flex: 80,
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
child: state.last as Widget,
),
)
],
),
),
),
);
},
);
}
Widget _buildActionButton(BuildContext context) {
switch (context.read<PopoverCardStackBloc>().state.last.editButtonType) {
case StackActionButtonType.NONE:
return const SizedBox.shrink();
case StackActionButtonType.EDIT:
return MockActionButton(
labelPadding: const EdgeInsets.only(right: 16, left: 16, top: 7, bottom: 9),
backgroundColor: AppColors.accentButton,
borderRadius: BorderRadius.circular(8),
splashColor: AppColors.transparent,
label: 'Edit',
textStyle: const TextStyle(
color: AppColors.textWhite,
fontSize: 16,
fontWeight: FontWeight.w600,
),
onTap: () {
context.read<PopoverCardStackBloc>().push(const EditReservationPage());
},
);
case StackActionButtonType.SAVE:
return MockActionButton(
labelPadding: const EdgeInsets.only(right: 16, left: 16, top: 7, bottom: 9),
backgroundColor: AppColors.accentButton,
borderRadius: BorderRadius.circular(8),
splashColor: AppColors.transparent,
label: 'Save',
textStyle: const TextStyle(
color: AppColors.textWhite,
fontSize: 16,
fontWeight: FontWeight.w600,
),
onTap: () {
//TODO: make request with PopoverEditCardStackBloc state to update booking when api is ready.
BookingCard.tooltip.close();
},
);
}
}
}
这些类只是为那些想了解更多实现的人准备的,但是它们不应该有任何问题.问题更多的是关于处理这个用例的正确方法是什么.