Flutter 已生成Bloc状态,但UI未更新
我在使用bloc时遇到问题。集团状态正在更新,但似乎对UI没有影响。我用一个示例应用程序再现了这个问题。问题是从列表页中删除项目时,颜色不会更改为“取消选择”状态。实际上,当您在主页上选择一个项目时,购物车按钮会出现,而在“未选择任何项目”状态下,它会消失。因此,当您在主页上选择一个项目时,会出现购物车按钮。当您单击按钮时,您将被导航到另一个页面,即ListPage,您可以在其中看到所有选定项目的列表以及与每个项目对应的删除按钮。当您删除一个项目时,它会从ListPage中删除,但它的颜色仍然是红色,即在主页上选择。我必须再次单击以更改颜色,尽管在从列表页中删除颜色时取消了选择,即(item.active=false)。只是颜色保持不变,没有更新。代码文件如下所示: 项目\整体省道Flutter 已生成Bloc状态,但UI未更新,flutter,user-interface,dart,bloc,flutter-bloc,Flutter,User Interface,Dart,Bloc,Flutter Bloc,我在使用bloc时遇到问题。集团状态正在更新,但似乎对UI没有影响。我用一个示例应用程序再现了这个问题。问题是从列表页中删除项目时,颜色不会更改为“取消选择”状态。实际上,当您在主页上选择一个项目时,购物车按钮会出现,而在“未选择任何项目”状态下,它会消失。因此,当您在主页上选择一个项目时,会出现购物车按钮。当您单击按钮时,您将被导航到另一个页面,即ListPage,您可以在其中看到所有选定项目的列表以及与每个项目对应的删除按钮。当您删除一个项目时,它会从ListPage中删除,但它的颜色仍然是
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/item_model.dart';
import 'package:demo/repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
part 'items_event.dart';
part 'items_state.dart';
class ItemsBloc extends Bloc<ItemsEvent, ItemsState> {
final ItemRepository itemRepository;
final CartBloc cartBloc;
ItemsBloc({
@required this.itemRepository,
@required this.cartBloc,
}) : super(ItemsLoading());
@override
Stream<ItemsState> mapEventToState(
ItemsEvent event,
) async* {
if (event is GetItems) {
yield* _mapGetItemsToState(event);
} else if (event is UpdateItem) {
yield* _mapUpdateItemToState(event);
}
}
Stream<ItemsState> _mapGetItemsToState(GetItems event) async* {
yield ItemsLoading();
try {
final _items = await itemRepository.loadItems();
yield ItemsLoaded(items: _items);
print('Yielded');
} catch (_) {
yield ItemsFailure();
}
}
Stream<ItemsState> _mapUpdateItemToState(UpdateItem event) async* {
try {
_updateRepositoryItems(event.item);
if (event.item.active) {
cartBloc.add(ShowItems());
} else {
cartBloc.add(RemoveItem(itemId: event.item.id));
}
yield* _mapGetItemsToState(GetItems());
} catch (_) {
yield ItemsFailure();
}
}
Item _updateRepositoryItems(Item item) => itemRepository.setItem = item;
}
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:demo/item_data_model.dart';
import 'package:demo/repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
part 'cart_event.dart';
part 'cart_state.dart';
class CartBloc extends Bloc<CartEvent, CartState> {
final ItemRepository itemRepository;
CartBloc({@required this.itemRepository}) : super(CartLoading());
@override
Stream<CartState> mapEventToState(
CartEvent event,
) async* {
if (event is ShowItems) {
yield* _mapShowItemsToState(event);
} else if (event is RemoveItem) {
yield* _mapRemoveItemToState(event);
}
}
Stream<CartState> _mapShowItemsToState(ShowItems event) async* {
try {
final _selectedItems = await itemRepository.getSelectedItems;
if (_selectedItems.isNotEmpty) {
final data = ItemData(items: _selectedItems);
yield CartLoaded(itemData: data);
} else {
yield CartLoading();
}
} catch (_) {
yield CartFailure();
}
}
Stream<CartState> _mapRemoveItemToState(RemoveItem event) async* {
try {
final _selectedSounds = await itemRepository.getSelectedItems;
if (_selectedSounds.isEmpty) {
yield CartLoading();
} else {
yield* _mapShowItemsToState(ShowItems());
}
} catch (_) {
yield CartFailure();
}
}
}
导入'dart:async';
导入“包:bloc/bloc.dart”;
导入“包:demo/bloc/cart/cart_bloc.dart”;
导入“package:demo/item_model.dart”;
导入“package:demo/repository.dart”;
导入“包:equalable/equalable.dart”;
进口“包装:颤振/基础.dart”;
“项目\事件.飞镖”部分;
第“物品”部分(州.省道);
类ItemsBloc扩展了Bloc{
最终项目库项目库;
最终CartBloc CartBloc;
ItemsBloc({
@需要此.itemRepository,
@需要这个.cartBloc,
}):super(itemsload());
@凌驾
流映射事件状态(
第七项事件,
)异步*{
if(事件为GetItems){
收益*\u mapGetItemsToState(事件);
}else if(事件为UpdateItem){
产量*\u地图更新项目状态(事件);
}
}
流\u mapGetItemsToState(GetItems事件)异步*{
屈服项加载();
试一试{
final_items=wait itemRepository.loadItems();
已添加的收益项目(项目:_项);
打印(‘已生成’);
}接住{
收益项目失败();
}
}
流\u mapUpdateItemToState(UpdateItem事件)异步*{
试一试{
_updateRepositoryItems(event.item);
if(event.item.active){
cartBloc.add(ShowItems());
}否则{
add(removietem(itemId:event.item.id));
}
收益*_映射getItemsToState(GetItems());
}接住{
收益项目失败();
}
}
Item _updateRepositoryItems(Item Item)=>itemRepository.setItem=Item;
}
车形飞镖
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/item_model.dart';
import 'package:demo/repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
part 'items_event.dart';
part 'items_state.dart';
class ItemsBloc extends Bloc<ItemsEvent, ItemsState> {
final ItemRepository itemRepository;
final CartBloc cartBloc;
ItemsBloc({
@required this.itemRepository,
@required this.cartBloc,
}) : super(ItemsLoading());
@override
Stream<ItemsState> mapEventToState(
ItemsEvent event,
) async* {
if (event is GetItems) {
yield* _mapGetItemsToState(event);
} else if (event is UpdateItem) {
yield* _mapUpdateItemToState(event);
}
}
Stream<ItemsState> _mapGetItemsToState(GetItems event) async* {
yield ItemsLoading();
try {
final _items = await itemRepository.loadItems();
yield ItemsLoaded(items: _items);
print('Yielded');
} catch (_) {
yield ItemsFailure();
}
}
Stream<ItemsState> _mapUpdateItemToState(UpdateItem event) async* {
try {
_updateRepositoryItems(event.item);
if (event.item.active) {
cartBloc.add(ShowItems());
} else {
cartBloc.add(RemoveItem(itemId: event.item.id));
}
yield* _mapGetItemsToState(GetItems());
} catch (_) {
yield ItemsFailure();
}
}
Item _updateRepositoryItems(Item item) => itemRepository.setItem = item;
}
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:demo/item_data_model.dart';
import 'package:demo/repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';
part 'cart_event.dart';
part 'cart_state.dart';
class CartBloc extends Bloc<CartEvent, CartState> {
final ItemRepository itemRepository;
CartBloc({@required this.itemRepository}) : super(CartLoading());
@override
Stream<CartState> mapEventToState(
CartEvent event,
) async* {
if (event is ShowItems) {
yield* _mapShowItemsToState(event);
} else if (event is RemoveItem) {
yield* _mapRemoveItemToState(event);
}
}
Stream<CartState> _mapShowItemsToState(ShowItems event) async* {
try {
final _selectedItems = await itemRepository.getSelectedItems;
if (_selectedItems.isNotEmpty) {
final data = ItemData(items: _selectedItems);
yield CartLoaded(itemData: data);
} else {
yield CartLoading();
}
} catch (_) {
yield CartFailure();
}
}
Stream<CartState> _mapRemoveItemToState(RemoveItem event) async* {
try {
final _selectedSounds = await itemRepository.getSelectedItems;
if (_selectedSounds.isEmpty) {
yield CartLoading();
} else {
yield* _mapShowItemsToState(ShowItems());
}
} catch (_) {
yield CartFailure();
}
}
}
导入'dart:async';
导入“包:bloc/bloc.dart”;
导入“package:demo/item_data_model.dart”;
导入“package:demo/repository.dart”;
导入“包:equalable/equalable.dart”;
进口“包装:颤振/基础.dart”;
第二部分“马车事件.飞镖”;
第二部分“卡图州.省道”;
类CartBloc扩展了Bloc{
最终项目库项目库;
CartBloc({@required this.itemRepository}):超级(CartLoading());
@凌驾
流映射事件状态(
卡特尔事件,
)异步*{
如果(事件为ShowItems){
产量*\u地图显示项目状态(事件);
}else if(事件为RemoveItem){
产量*_mapRemoveItemToState(事件);
}
}
Stream_mapShowItemsToState(ShowItems事件)异步*{
试一试{
final _selectedItems=wait itemRepository.getSelectedItems;
如果(\u selectedItems.isNotEmpty){
最终数据=项目数据(项目:_selectedItems);
装载的产量(itemData:data);
}否则{
屈服载荷();
}
}接住{
屈服失败();
}
}
流_mapRemoveItemToState(RemoveItem事件)异步*{
试一试{
final _selectedSounds=wait itemRepository.getSelectedItems;
如果(_selectedSounds.isEmpty){
屈服载荷();
}否则{
收益*_映射showItemsToState(ShowItems());
}
}接住{
屈服失败();
}
}
}
首页.dart
import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/item_tile.dart';
import 'package:demo/list_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Home Page"),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: BlocBuilder<ItemsBloc, ItemsState>(
// ignore: missing_return
builder: (context, state) {
if (state is ItemsLoading) {
return Center(
child: CircularProgressIndicator(),
);
} else if (state is ItemsLoaded) {
print('Items Loaded');
return GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
childAspectRatio: 0.6,
children: [
for (var item in state.items) ItemTile(item: item),
],
);
} else if (state is ItemsFailure) {
return Center(
child: Text(
'Unexpected Failure, Cannot Load Items',
style: Theme.of(context).textTheme.headline6,
),
);
}
},
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: CartButton(),
),
],
),
),
);
}
}
class CartButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<CartBloc, CartState>(
// ignore: missing_return
builder: (context, state) {
if (state is CartLoading) {
return SizedBox.shrink();
} else if (state is CartLoaded) {
print('Cart Loaded');
return TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return ListPage(
items: state.itemData.items,
);
}),
);
},
child: Text('Go To Cart'),
);
} else if (state is CartFailure) {
return Center(
child: Text(
'Unexpected Failure, Cannot Load Cart',
style: Theme.of(context).textTheme.headline6,
),
);
}
},
);
}
}
import'包:demo/bloc/cart/cart_bloc.dart';
导入“包:demo/bloc/items/items_bloc.dart”;
导入“包:演示/项目_tile.dart”;
导入“package:demo/list_page.dart”;
进口“包装:颤振/材料.省道”;
进口“包装:颤振团/颤振团.飞镖”;
类主页扩展了StatefulWidget{
@凌驾
_HomePageState createState()=>\u HomePageState();
}
类_HomePageState扩展状态{
@凌驾
小部件构建(构建上下文){
返回安全区(
孩子:脚手架(
appBar:appBar(
标题:文本(“主页”),
标题:对,
),
正文:专栏(
儿童:[
扩大(
孩子:填充(
填充:常数边集全部(8.0),
孩子:BlocBuilder(
//忽略:缺少返回
生成器:(上下文、状态){
如果(状态为ItemsLoading){
返回中心(
子对象:CircularProgressIndicator(),
);
}else if(状态为ItemsLoaded){
打印(“加载的项目”);
返回GridView.count(
交叉轴计数:3,
交叉轴间距:20.0,
主轴间距:20.0,
childAspectRatio:0.6,
儿童:[
对于(状态为.items的var项)ItemTile(项:项),
],
);
}else if(状态为ItemsFailure){
返回中心(
子:文本(
'意外失败,无法加载项',
风格:Theme.of(context).textTheme.headline6,
),
);
}
},
),
),
),
填充物(
填充:常数边集全部(8.0),
子项:CartButton(),
),
],
import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/repository.dart';
import 'package:get_it/get_it.dart';
final getIt = GetIt.instance;
Future<void> init() async {
// Bloc
getIt.registerLazySingleton<CartBloc>(() => CartBloc(itemRepository: getIt()));
getIt.registerFactory(() => ItemsBloc(
itemRepository: getIt(),
cartBloc: getIt(),
));
// Repository
getIt.registerSingleton<ItemRepository>(ItemRepository());
}
import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/get_it.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'get_it.dart' as di;
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
di.init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => getIt<ItemsBloc>()..add(GetItems()),
),
BlocProvider(
create: (context) => getIt<CartBloc>(),
),
],
child: MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
),
);
}
}