【问题标题】:Flutter Bloc Builder is not getting called and not updating UI after state changeFlutter Bloc Builder 没有被调用,也没有在状态更改后更新 UI
【发布时间】:2020-09-04 11:49:26
【问题描述】:

我对 Flutter Bloc 包有疑问。主要思想是从 API 获取用户列表,我关闭了互联网以查看我的错误状态如何工作,但是当 try/catch 块捕获错误时,我的 Bloc Builder 没有重建,我的 UI 没有改变,我有做热重启看看结果。

UserBloc 类:

    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
    }
  }
}

UserEvent 类:

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];
}

用户状态类:

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()))),
    );
  }
}

试图将我的 HomePage 类设置为 StateLessWidget,但问题仍然存在,现在我的类是 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 状态时显示一个快餐栏,但我只看到一个卡住的 LoadingIndicator 我在日志中的“打印”调试器说:
I/flutter (14034):集团建设者
我/颤振(14034):getallusers
I/flutter (14034):集团建设者
I/flutter (14034):出现错误 (userBloc)
I/flutter (14034):显示小吃吧(侦听器)

预期结果:
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 片段:
依赖关系:
颤振:
sdk:颤动
cupertino_icons: ^0.1.3
斩波器:^3.0.2
等价的:^1.1.1
颤振块:^4.0.0
提供者:^4.1.1
内置值:^7.1.0

dev_dependencies:
chopper_generator: ^3.0.4
build_runner:^1.10.0
内置值生成器:^7.1.0
颤振测试:
sdk:颤动

我可以上传我的 UserService 类,在那里我使用 Chopper 从 API 获取用户,如果需要,请告诉我。

【问题讨论】:

    标签: android flutter mobile bloc chopper


    【解决方案1】:

    最后我发现了一个问题。更准确地说,问题出在我的 BlockBuilder if/else 树中:

    if (state is UserLoading || state is UserInitial)
                    return _showLoadingStatus();
    

    我变成了:

    if (state is UserLoading)
                    return _showLoadingStatus();
    

    现在问题消失了。

    【讨论】:

      猜你喜欢
      • 2020-05-21
      • 2020-09-03
      • 2021-04-01
      • 2021-03-19
      • 2020-10-10
      • 2018-07-21
      • 2021-04-14
      • 2019-12-28
      • 2020-02-27
      相关资源
      最近更新 更多