使用 BLoC 的 Flutter 应用程序中的状态不会改变

Question

我正在构建一个从 API 获取酒店名称的应用。我正在使用 BLoC 库。我设法创建了下载数据的整个服务，但结果没有显示在我的终端中。

我的 BLoC 工作，它下载数据。我在 Dart DevTools 中看到过，但是状态没有改变，也没有显示出来。

这是我的代码：

hotel_bloc.dart

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:hotels/controllers/hotel/hotel_controller.dart';
import 'package:hotels/models/hotel/hotel_model.dart';
import 'package:meta/meta.dart';

part 'hotel_event.dart';
part 'hotel_state.dart';

class HotelBloc extends Bloc<HotelEvent, HotelState> {
  HotelBloc() : super(HotelLoading());

  final HotelController hotelController = HotelController();

  @override
  Stream<HotelState> mapEventToState(
    HotelEvent event,
  ) async* {
    if (event is FetchEvent) {
      yield HotelLoading();

      try {
        final Hotels hotels = await hotelController.parseHotels();

        yield HotelFinal(hotels);
      } catch (error) {
        HotelError(error);
      }
    }
  }
}

hotel_state.dart

part of 'hotel_bloc.dart';

@immutable
abstract class HotelState {
  HotelState();
}

class HotelFinal extends HotelState {
  final Hotels hotels;

  HotelFinal(this.hotels);

  Hotels getHotel() {
    return hotels;
  }
}

class HotelLoading extends HotelState {
  HotelLoading();
}

class HotelError extends HotelState {
  final String error;

  HotelError(this.error);
}

hotel_event.dart

part of 'hotel_bloc.dart';

@immutable
abstract class HotelEvent {
  HotelEvent();
}

class FetchEvent extends HotelEvent {
  FetchEvent();
}

hotel_service.dart

import 'package:http/http.dart' as http;

abstract class DownloadService {
  Future<http.Response> fetchHotels();
}

class HotelService extends DownloadService {
  @override
  Future<http.Response> fetchHotels() {
    final Uri uri = Uri.https('services.lastminute.com', 'mobile/stubs/hotels');

    return http.get(uri);
  }
}

hotel_controller.dart

import 'package:hotels/models/hotel/hotel_model.dart';
import 'package:hotels/services/hotel/hotel_service.dart';

class HotelController {
  final HotelService hotelService = HotelService();

  Future<Hotels> parseHotels() async {
    final response = await hotelService.fetchHotels();

    final hotels = hotelsFromJson(response.body);

    return hotels;
  }
}

最后是主屏幕

home_screen.dart

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hotels/blocs/hotel/hotel_bloc.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  HotelBloc hotelBloc;
  @override
  void initState() {
    hotelBloc = HotelBloc()..add(FetchEvent());
    super.initState();
  }

  @override
  void dispose() {
    hotelBloc.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title').tr(),
      ),
      body: BlocConsumer<HotelBloc, HotelState>(
        listener: (context, state) {
          if (state is HotelError) {
            print(state.error);
          }
        },
        builder: (context, state) {
          if (state is HotelLoading) {
            print('It\'s loading!');
          }

          if (state is HotelFinal) {
            print(state.hotels.toString());
          }

          return Text('Default text');
        },
      ),
    );
  }
}

结果是这样的：

Answer 1

问题是您没有提供BlocConsumer 和hotelBloc。您希望将BlocProvider 作为父级或使用BlocConsumer 上的cubit 参数。

BlocConsumer<HotelBloc, HotelState>(
  cubit: hotelBloc,
  listener:...
  builder:...
)