![](/img/trans.png)
[英]Flutter Bloc - BlocListener not reacting to state change
[英]Flutter Bloc Builder is not getting called and not updating UI after state change
我對 Flutter Bloc package 有疑問。 主要思想是從 API 獲取用戶列表,我關閉了互聯網,看看我的錯誤 state 是如何工作的,但是當 try/catch 塊捕獲錯誤時,我的 Bloc Builder 沒有重建,我的 UI 沒有改變,我有做熱重啟看看結果。
用戶塊 class:
import 'dart:io';
import 'package:chopper/chopper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:listviewblocflutter/bloc/user/user_event.dart';
import 'package:listviewblocflutter/bloc/user/user_state.dart';
import 'package:listviewblocflutter/data/error/network_error.dart';
import 'package:listviewblocflutter/data/service/user_service.dart';
import 'package:listviewblocflutter/model/built/built_user.dart';
import 'package:built_collection/built_collection.dart';
class UserBloc extends Bloc<UserEvent, UserState> {
UserService _userService;
UserBloc() {
this._userService = UserService.create();
}
@override
UserState get initialState => UserInitial();
@override
Stream<UserState> mapEventToState(UserEvent event) async* {
yield UserLoading();
if (event is GetAllUsers) {
print("getallusers");
try {
final listOfUsers = await _userService.getAllUsers();
yield UsersLoaded(listOfUsers.body);
print("users loaded (userBloc)");
} catch (_) {
print("got an error (userBloc)");
yield UserLoadingError("Can't get all users!");
}
} else if (event is GetUserById) {
// single user event
}
}
}
用戶事件 class:
import 'package:equatable/equatable.dart';
abstract class UserEvent extends Equatable {
const UserEvent();
}
class GetAllUsers extends UserEvent {
const GetAllUsers();
@override
List<Object> get props => [];
}
class GetUserById extends UserEvent {
final int id;
const GetUserById(this.id);
@override
List<Object> get props => [id];
}
用戶狀態 class:
import 'package:equatable/equatable.dart';
import 'package:flutter/cupertino.dart';
import 'package:listviewblocflutter/model/built/built_user.dart';
import 'package:built_collection/built_collection.dart';
@immutable
abstract class UserState extends Equatable {
const UserState();
}
class UserInitial extends UserState {
const UserInitial();
@override
List<Object> get props => [];
}
class UserLoading extends UserState {
const UserLoading();
@override
List<Object> get props => [];
}
class UserLoaded extends UserState {
final BuiltUser user;
const UserLoaded(this.user);
@override
List<Object> get props => [user];
}
class UsersLoaded extends UserState {
final BuiltList<BuiltUser> listOfUsers;
const UsersLoaded(this.listOfUsers);
@override
List<Object> get props => [listOfUsers];
}
class UserLoadingError extends UserState {
final String message;
const UserLoadingError(this.message);
@override
List<Object> get props => [message];
}
class UserEmpty extends UserState {
const UserEmpty();
@override
List<Object> get props => [];
}
我在 main.dart 文件中用 BlocProvider 包裝了我的 HomePage,以在 HomePage 中訪問我的 UserBloc:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ListView with BLoC pattern',
home: SafeArea(
child: Scaffold(
body: BlocProvider(
create: (context) => UserBloc(), child: HomePage()))),
);
}
}
試圖將我的主頁 class 設置為 StateLessWidget,但問題仍然存在,現在我的 class 是 StateFulWidget 有同樣的問題。 我在 initState 方法中得到 AllUsers :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:listviewblocflutter/bloc/bloc.dart';
import 'package:listviewblocflutter/model/built/built_user.dart';
import 'package:built_collection/built_collection.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
void initState() {
BlocProvider.of<UserBloc>(context).add(GetAllUsers());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Users"),
),
body: Container(
child: BlocListener<UserBloc, UserState>(
listener: (context, state) {
if (state is UserLoadingError) {
print("showing snackbar (listener)");
_showNetworkErrorSnackbar(context, state.message);
}
},
child: BlocBuilder<UserBloc, UserState>(
builder: (context, state) {
print("bloc builder");
if (state is UserLoading || state is UserInitial)
return _showLoadingStatus();
else if (state is UsersLoaded)
return _buildList(state.listOfUsers);
else if (state is UserEmpty || state is UserLoadingError) {
print("state is empty/error (builder)");
return _emptyListLayout();
}
return Center();
},
),
),
),
);
}
ListView _buildList(BuiltList<BuiltUser> listOfUsers) {
return ListView.builder(
itemCount: listOfUsers.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.redAccent,
),
title: Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
listOfUsers[index].username,
overflow: TextOverflow.ellipsis,
),
),
),
);
});
}
Widget _showLoadingStatus() {
return Center(
child: CircularProgressIndicator(),
);
}
Widget _emptyListLayout() {
return Center(
child: Text(
"List is empty ;(",
textAlign: TextAlign.center,
),
);
}
void _showNetworkErrorSnackbar(BuildContext context, String message) {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(message),
));
}
}
我的目標是告訴用戶列表為空並在出現 UserLoadingError state 時顯示一個小吃欄,但我只看到一個卡住的 LoadingIndicator 我的“打印”調試器在日志中說:
I/flutter (14034): 塊生成器
我/顫振(14034):getallusers
I/flutter (14034): 塊生成器
I/flutter (14034): 出現錯誤 (userBloc)
I/flutter (14034):顯示snackbar(監聽器)
預期成績:
I/flutter (14034): 塊生成器
我/顫振(14034):getallusers
I/flutter (14034): 塊生成器
I/flutter (14034): 出現錯誤 (userBloc)
I/flutter (14034): 顯示snackbar (listener) /// 在這條消息之后應該出現一個snackbar
I/flutter (14034): 塊生成器
I/flutter (14034): state is empty/error (builder) /// 應在此消息之后創建一個空列表布局
pubspecs.yaml 片段:
依賴項:
flutter:
sdk:flutter
庫比蒂諾圖標:^0.1.3
斬波器:^3.0.2
等價的:^1.1.1
顫振塊:^4.0.0
提供者:^4.1.1
內置值:^7.1.0
dev_dependencies:
斬波器生成器:^3.0.4
build_runner:^1.10.0
內置值生成器:^7.1.0
顫振測試:
sdk:flutter
我可以上傳我的 UserService class,在那里我使用 Chopper 從 API 獲取用戶,如果需要,請告訴我。
最后我發現了一個問題。 問題出在我的 BlockBuilder if/else 樹中,更准確地說:
if (state is UserLoading || state is UserInitial)
return _showLoadingStatus();
我變成了:
if (state is UserLoading)
return _showLoadingStatus();
現在問題消失了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.