首页 > 解决方案 > 当我使用 Bloc 模式时,我的无限列表不会滚动

问题描述

我想用 bloc 模式制作无限列表,但我的 bloc builder 只能工作 1 次。滚动页面后“yield”不起作用,所以 bloc builder 不会构建。新项目来了,但状态没有建立。

Deliveries_bloc.dart:

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_asten_app/data/orders_repository.dart';
import 'package:flutter_asten_app/models/order_list.dart';

import '../../locater.dart';

part 'deliveries_event.dart';
part 'deliveries_state.dart';

class DeliveriesBloc extends Bloc<DeliveriesEvent, DeliveriesState> {
  final OrdersRepository ordersRepository = getIt<OrdersRepository>();
  DeliveriesBloc() : super(DeliveriesInitial());
  List<OrderList> orderss = [];

  @override
  Stream<DeliveriesState> mapEventToState(
    DeliveriesEvent event,
  ) async* {
    if (event is FetchDeliveriesEvent) {
      yield DeliveriesLoadingState();
      try {
        final orders = await ordersRepository.getOrderList(event.page);
        print(orders.length);
        yield DeliveriesLoadedState(orders: orders);
      } catch (_) {
        yield DeliveriesErrorState();
      }
    } else if (event is FetchMoreDeliveriesEvent) {
      try {
        final orders = await ordersRepository.getMoreOrderList(event.page);
        print(orders.length);                  //this is for check the orders length
        yield DeliveriesLoadedState(orders: orders);
      } catch (_) {
        yield DeliveriesErrorState();
      }
    }
  }
}


您可以在上面看到当我的事件是 FetchMoreDeliveriesEvent 我的订单长度增加但产量 DeliveriesLoadedState(orders: orders); 不起作用deliveries_state.dart:

part of 'deliveries_bloc.dart';

abstract class DeliveriesState extends Equatable {
  const DeliveriesState();
}

class DeliveriesInitial extends DeliveriesState {
  @override
  List<Object> get props => [];
}

class DeliveriesLoadingState extends DeliveriesState {
  @override
  // TODO: implement props
  List<Object> get props => throw UnimplementedError();
}

class DeliveriesLoadedState extends DeliveriesState {
  final List<OrderList> orders;

  DeliveriesLoadedState({@required this.orders});
  @override
  // TODO: implement props
  List<Object> get props => [orders];
}

class DeliveriesErrorState extends DeliveriesState {
  @override
  // TODO: implement props
  List<Object> get props => throw UnimplementedError();
}

Deliveries_event.dart:

part of 'deliveries_bloc.dart';

abstract class DeliveriesEvent extends Equatable {
  const DeliveriesEvent();
}

class FetchDeliveriesEvent extends DeliveriesEvent {
  final int page;
  FetchDeliveriesEvent({@required this.page});
  @override
  // TODO: implement props
  List<Object> get props => [page];
}

class FetchMoreDeliveriesEvent extends DeliveriesEvent {
  final int page;
  FetchMoreDeliveriesEvent({@required this.page});
  @override
  // TODO: implement props
  List<Object> get props => [page];
}

Main_page 部分

Expanded(
                      child: BlocBuilder<DeliveriesBloc, DeliveriesState>(
                        bloc: _ordersBloc,
                        builder: (context, DeliveriesState state) {
                          if (state is DeliveriesLoadingState) {
                            return Center(
                              child: CircularProgressIndicator(),
                            );
                          }
                          if (state is DeliveriesLoadedState) {
                            return ListView.builder(
                                controller: _scrollController,
                                itemCount: state.orders.length,
                                itemBuilder: (context, index) {
                                  return Card(
                                    elevation: 4,
                                    child: ListTile(
                                      title: Text(state.orders[index].firadi),
                                      subtitle: Text(state.orders[index].sidttr
                                          .toString()),
                                    ),
                                  );
                                });
                          } else {
                            return null;
                          }
                        },
                      ),
                    ),

标签: flutterflutter-bloc

解决方案


Bloc builder 仅在其内容发生更改时才重新构建小部件。确保您向您的 equatable 的 props getter 提供您的更改可检测变量。

如果您的OrderList类不是从 Equatable 扩展的,则订单字段的更改不会反映在状态中。

检查您是否使用 扩展了您的OrderList课程Equatable,如果是,请确保您也添加了它的道具。


推荐阅读