Flutter 如何使用BLoC库？

我试图弄清楚集团库，但它让我头疼

我正在尝试从API获取酒店名称。我有一个模型和一个服务，负责联系API并获取数据。但是，我不知道如何将它连接到BLoC库

一旦我的应用程序启动，我希望BLoC从API获取数据，然后在应用程序中显示数据

这是我的密码：

达特酒店

一流酒店{
最终名单酒店；
旅馆（{this.Hotels}）；
factory Hotels.fromJson（Map json）{
返回酒店(
酒店：列表。来自(
json['hotels'].map(
（x） =>fromJson（x）酒店，
),
),
);
}
}
一流酒店{
最终字符串hotelName；
酒店（{this.hotelName}）；
factory Hotel.fromJson（地图json）{
返回酒店(
hotelName:json['name']，
);
}
}

达特服务酒店

import'package:http/http.dart'作为http；
抽象类下载服务{
未来酒店（）；
}
类HotelService扩展下载服务{
@凌驾
未来酒店（）{
最终Uri=Uri.https（'services.lastminute.com'，'mobile/stubs/hotels'）；
返回http.get（uri）；
}
}

以下是我对集团自由党所做的

达特尤伊事件酒店

hotel_bloc.dart'的一部分；
@不变的
抽象类HotelEvent{}
类OnAppStartEvent扩展HoteleEvent{}

达特集团酒店

导入'dart:async'；
导入“包：bloc/bloc.dart”；
导入“套餐：hotels/models/hotel/hotel_model.dart”；
导入“套餐：hotels/services/hotel/hotel_service.dart”；
导入“package:meta/meta.dart”；
“达特酒店”部分；
第二部分“达特州酒店”；
类HotelBloc扩展集团{
HotelBloc（）：super（HotelFinal（））；
最终HotelService HotelService=HotelService（）；
@凌驾
流映射事件状态(
HotelEvent活动，
)异步*{
if（事件为FetchEvent）{
最终响应=hotelService.fetchHotels（）；
产量
}
}
}

达特州立酒店

hotel_bloc.dart'的一部分；
@不变的
抽象类HotelState{
HotelState（）；
}
类HotelFinal扩展了HotelState{
最终酒店；
HotelFinal（这家酒店）；
格特酒店{
返回酒店；
}
}

首先，将

wait

添加到您集团的此行

final response=wait hotelService.fetchHotels（）

从

fetchHotels

函数返回

List

您的屏幕必须具有

stateful

类，并且必须处于

initState

您可以创建bloc对象并调用

。在其上添加
方法

在

build

方法中，使用

BlocBuilder

包装您的小部件，并在

builder

回调中检查您的bloc状态，如果该状态是

HotelFinal

则返回您的ui，并返回状态对象中的酒店列表

为您的

HotelState

添加另一个状态对于您的bloc获取数据时，甚至对于出现错误时都很有用。e、 g

您可能希望将

mapEventToState

更改为以下内容：

---

看一看就明白了basics@quoci是的，我知道基本情况，但是那里有很多过时的信息。在hotelService.fetchHotels（）中加入等待；之后，您就拥有了所有的酒店。现在，您希望在某个状态下生成这些数据，例如，您的HotelFinal->生成HotelFinal（响应），我建议您这样做。如果你使用blocs，它非常方便。

part of 'hotel_bloc.dart';

@immutable
abstract class HotelState {
  HotelState();
}

class HotelFinal extends HotelState {
  final Hotel hotel;
  HotelFinal(this.hotel);

  Hotel getHotel() {
    return hotel;
  }
}

class HotelLoading extends HotelState {
  HotelLoading();
}

class HotelError extends HotelState {
  final String error;
  HotelError(this.error);
}

 @override
  Stream<HotelState> mapEventToState(
    HotelEvent event,
  ) async* {
    if (event is FetchEvent) {
      yield HotelLoading();
      try {
        final response = await hotelService.fetchHotels();
        // It seems like your service doesn't return an hotel directly, so you'll have to deal with this as it is not part of the question.
        final hotel = getYourHotelHereWithTheResponse;
        yield HotelFinal(hotel);
      } catch (e) {
        yield HotelError('something went wrong getting the hotel info');
      }
    }
   }

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  HotelBloc hotelBloc;

  @override
  void initState() {
    hotelBloc = HotelBloc..add(FetchEvent());
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder(builder: (context, state) {
      if(state is HotelLoading) {
        // return a widget to deal with loading
      }
      
      if(state is HotelFinal) {
        // return a widget to deal with success
      }
      
      if(state is HotelError) {
        // return a widget to deal with error
      }
    });
  }
}