在一页中使用多颤动块

Posted

技术标签:

【中文标题】在一页中使用多颤动块【英文标题】:Use multi flutter bloc in one page 【发布时间】:2020-07-28 08:42:04 【问题描述】:

我正在尝试学习和使用flutter bloc,我创建了一个项目来监听用户位置,并从服务中获取一些坐标,并在地图中显示这个坐标作为标记。所以这是 myApp 方法:

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Material App',
      home: MultiBlocProvider(providers: [
        BlocProvider<FoursquareBloc>(create: (context) => sl<FoursquareBloc>()), //bloc page to get corrdinate
        BlocProvider<LocationBloc>(create: (context) => sl<LocationBloc>()), // bloc page to listen to change user location
      ], child: HomeFoursquareScreen()),
    );
  

HomeFoursquareScreen页面显示地图:

 Widget build(BuildContext context) 
    return BlocBuilder<LocationBloc, LocationState>(builder: (context, state) 
      if (state is LocationLoadingState) 
        return Center(child: CircularProgressIndicator());
       else if (state is LocationLoadedState) 
        print("LocationLoadedState");
        intMapCoordinate =
            LatLng(state.location.latitude, state.location.longitude);
       else if (state is UserLocationListeningState) 
        _controller.move(
            LatLng(state.location.latitude, state.location.longitude), 15.0);
      
      return FlutterMap(
        mapController: _controller,
        options: MapOptions(
          center: intMapCoordinate,
          zoom: 13.0,
        ),
        layers: [
          TileLayerOptions(
              urlTemplate: "https://s.tile.openstreetmap.org/z/x/y.png",
              subdomains: ['a', 'b', 'c']),
        ],
      );
    );
  

我很困惑,因为我不知道如何使用FoursquareBloc 获取坐标以在地图中显示为标记?

这是LocationBloc

class LocationBloc extends Bloc<LocationEvent, LocationState> 
  var location = Location();
  StreamSubscription<LocationData> _locationSubscription;
  LocationData currentLocation;
  @override
  LocationState get initialState => LocationLoadingState();

  @override
  Stream<LocationState> mapEventToState(
    LocationEvent event,
  ) async* 
    if (event is GetCurrentLocation) 
      yield* _mapToGetCurrentLocationState();
     else if (event is StartListeningForLiveLocation) 
      yield* _mapToStartListeningUserLocation();
    else if (event is AddLiveUserLocation) 
      yield UserLocationListeningState(event.location);
    

  

这是FoursquareBloc

class FoursquareBloc extends Bloc<FoursquareEvent, FoursquareState> 
  final FoursquareRepository repo;
  FoursquareBloc(this.repo);

  @override
  FoursquareState get initialState => Empty();

  @override
  Stream<FoursquareState> mapEventToState(
    FoursquareEvent event,
  ) async* 
    if (event is GetVenuesByUserEvent) 
      yield Loading();
      try 
        final result = await repo.getVenuesByUser(event.lat, event.lng);
        yield Loaded(result);
       on Exception catch (e) 
        yield Error(e.toString());
      
    
  

它是否再次调用 BlocBuilder&lt;LocationBloc, LocationState&gt;(builder: (context, state) 下的 BlocBuilder 或者我必须使用 LocationBloc 构造函数在 LocationBloc 中调用 FoursquareBlo

【问题讨论】:

你想让 HomeFoursquareScreen 小部件对这两个 bloc 做出反应吗? Yes.in HomeFoursquareScreen 我想显示来自 locationBloc 的用户位置和来自 FoursquareBloc @PayamZahedi 的坐标 【参考方案1】:

我有同样的问题,直到现在 Flutter Bloc 库不支持 MultiBlocBuilder。您可以使用嵌套的 bloc 构建器或创建一个新的 bloc,它结合了其他两个状态。我创建了issue in Github,查看更多信息。

【讨论】:

以上是关于在一页中使用多颤动块的主要内容,如果未能解决你的问题,请参考以下文章

我如何在一页中使用多个jquery版本[重复]

如何在一页中使用 vuetify.css 和 bootstrap?

在一页中堆叠 vuetify 元素

Laravel Livewire 在一页中进行多个分页

为啥服务器端数据表在一页中显示所有记录而搜索不起作用?

Django在一页中合并查询集