我正在尝试使用BLoC模式来管理API中的数据并将其显示在我的小部件中。我可以从API提取数据并对其进行处理并显示,但是我使用的是底部导航栏,当我更改选项卡并转到上一个选项卡时,它将返回此错误:
未处理的异常:错误状态:调用close后无法添加新事件。
我知道这是因为我正在关闭流,然后尝试对其进行添加,但是我不知道如何解决它,因为不处理发布主题将导致内存泄漏。
我知道也许这个问题与这个question差不多。
但是我已经实现了它,但是它不适用于我的情况,所以我用不同的代码提出了问题,并希望有人可以帮助我解决我的问题。希望您能理解,谢谢。
这是我的BLoC代码:
import '../resources/repository.dart';
import 'package:rxdart/rxdart.dart';
import '../models/meals_list.dart';
class MealsBloc {
final _repository = Repository();
final _mealsFetcher = PublishSubject<MealsList>();
Observable<MealsList> get allMeals => _mealsFetcher.stream;
fetchAllMeals(String mealsType) async {
MealsList mealsList = await _repository.fetchAllMeals(mealsType);
_mealsFetcher.sink.add(mealsList);
}
dispose() {
_mealsFetcher.close();
}
}
final bloc = MealsBloc();
这是我的UI代码:
import 'package:flutter/material.dart';
import '../models/meals_list.dart';
import '../blocs/meals_list_bloc.dart';
import '../hero/hero_animation.dart';
import 'package:dicoding_submission/src/app.dart';
import 'detail_screen.dart';
class DesertScreen extends StatefulWidget {
@override
DesertState createState() => new DesertState();
}
class DesertState extends State<DesertScreen> {
@override
void initState() {
super.initState();
bloc.fetchAllMeals('Dessert');
}
@override
void dispose() {
bloc.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: getListDesert()
);
}
getListDesert() {
return Container(
color: Color.fromRGBO(58, 66, 86, 1.0),
child: Center(
child: StreamBuilder(
stream: bloc.allMeals,
builder: (context, AsyncSnapshot<MealsList> snapshot) {
if (snapshot.hasData) {
return _showListDessert(snapshot);
} else if (snapshot.hasError) {
return Text(snapshot.error.toString());
}
return Center(child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white)
));
},
),
),
);
}
Widget _showListDessert(AsyncSnapshot<MealsList> snapshot) => GridView.builder(
itemCount: snapshot == null ? 0 : snapshot.data.meals.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Card(
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5))),
margin: EdgeInsets.all(10),
child: GridTile(
child: PhotoHero(
tag: snapshot.data.meals[index].strMeal,
onTap: () {
showSnackBar(context, snapshot.data.meals[index].strMeal);
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds: 777),
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) =>
DetailScreen(
idMeal: snapshot.data.meals[index].idMeal),
));
},
photo: snapshot.data.meals[index].strMealThumb,
),
footer: Container(
color: Colors.white70,
padding: EdgeInsets.all(5.0),
child: Text(
snapshot.data.meals[index].strMeal,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.deepOrange),
),
),
),
),
);
},
);
}
如果您需要完整的源代码,这是带有分支submission-3的存储库
答案 0 :(得分:0)
bloc.dispose();
是问题所在。
由于该块是在您的UI代码外部初始化的,因此无需处理它们。
答案 1 :(得分:0)
为什么要在bloc类上实例化bloc?
必须将bloc实例添加到小部件树中的某个位置,并使用带有某些Provider逻辑的InheritedWidget。然后,在树下的小部件中,您将获取该实例并访问其流。这就是为什么将整个过程称为“提升国家”的原因。
这样,您的集团将在您需要时始终处于活动状态,并且处置有时仍会被调用。
例如集团提供商:
import 'package:flutter/material.dart';
abstract class BlocBase {
void dispose();
}
class BlocProvider<T extends BlocBase> extends StatefulWidget {
BlocProvider({
Key key,
@required this.child,
@required this.bloc,
}) : super(key: key);
final T bloc;
final Widget child;
@override
State<StatefulWidget> createState() => _BlocProviderState<T>();
static T of<T extends BlocBase>(BuildContext context) {
final type = _typeOf<_BlocProviderInherited<T>>();
_BlocProviderInherited<T> provider = context
.ancestorInheritedElementForWidgetOfExactType(type)
?.widget;
return provider?.bloc;
}
static Type _typeOf<T>() => T;
}
class _BlocProviderState<T extends BlocBase> extends State<BlocProvider<T>> {
@override
Widget build(BuildContext context) {
return new _BlocProviderInherited(
child: widget.child,
bloc: widget.bloc
);
}
@override
void dispose() {
widget.bloc?.dispose();
super.dispose();
}
}
class _BlocProviderInherited<T> extends InheritedWidget {
_BlocProviderInherited({
Key key,
@required Widget child,
@required this.bloc
}) : super(key: key, child: child);
final T bloc;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => false;
}
它结合了InheritedWidget
(可在小部件树中轻松使用)和StatefulWidget
(因此可以一次性使用)的组合。
现在,您必须在您的小部件树中的某个位置添加一些块的提供者,这取决于您,我个人希望将其添加到屏幕的路径之间。
在我的MaterialApp
小部件的溃败中:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MyApp',
onGenerateRoute: _routes,
);
}
Route _routes(RouteSettings settings) {
if (settings.isInitialRoute)
return MaterialPageRoute(
builder: (context) {
final mealsbloc = MealsBloc();
mealsbloc.fetchAllMeals('Dessert');
final homePage = DesertScreen();
return BlocProvider<DesertScreen>(
bloc: mealsbloc,
child: homePage,
);
}
);
}
}
借助路线,在homePage
上方“创建”了该集团。在这里,我可以在我想要的块上的任何地方调用初始化方法,例如.fetchAllMeals('Dessert')
,而无需使用StatefulWidget
并在initState
上调用它。
现在很明显,要使其正常工作,您的集团必须实现BlocBase
类
class MealsBloc implements BlocBase {
final _repository = Repository();
final _mealsFetcher = PublishSubject<MealsList>();
Observable<MealsList> get allMeals => _mealsFetcher.stream;
fetchAllMeals(String mealsType) async {
MealsList mealsList = await _repository.fetchAllMeals(mealsType);
_mealsFetcher.sink.add(mealsList);
}
@override
dispose() {
_mealsFetcher.close();
}
}
注意dispose()
上的替代,从现在开始,您的集团将自行处置,只需确保关闭此方法上的所有内容即可。
在这里使用这种方法的简单项目。
要结束此过程,请在DesertScreen
小部件的构建方法上,获取可用的bloc实例,如下所示:
var bloc = BlocProvider.of<MealsBloc>(context);
使用此方法here的简单项目。
答案 2 :(得分:0)
有关解决我的问题的答案,您可以点击以下链接:This
我希望你喜欢它!