Flutter bloc 总是必须有一个 属性(data)
is Flutter bloc always must have one property(data)
我是 flutter 项目的工作人员,使用 bloc 作为状态管理。
但是我的屏幕包含各种各样的数据。
如何管理所有这些数据?
class ProductCubit extends Cubit<ProductState> {
Worker worker = Worker();
List<ProductMakePriceChange> productsPriceChange = [];
List<PurchaseCount> purchaseCount = [];
int productCount = 0;
int productSaleCount = 0;
int productCategoryCount = 0;
int productUnitCount = 0;
}
我每个数据都有一个状态(加载状态)
以及每个数据的一种加载方法
问题!
当一个状态改变时,所有屏幕都重建
我只需要更改屏幕上的一个分区,即数据生效时的那个分区
有几种方法可以实现这一点。
如你所料,你当然可以将一些田地移到不同的肘上。另一种选择是实现 ProductState
的不同子类,并在运行时检查 BlocBuilder
或 BlocConsumer
中的类型。
class ProductCubit extends Cubit<ProductState> {
ProductCubit()
: super(
const ProductInitial(
ProductInfo(
productsPriceChange: [],
purchaseCount: [],
productSaleCount: 0,
productCategoryCount: 0,
productCount: 0,
productUnitCount: 0,
),
),
);
Future<void> loadProductPurchaseCount() async {
emit(ProductPurchaseCountLoadInProgress(state.productInfo));
try {
// TODO load product purchase count
final productPurchaseCount = <dynamic>[];
emit(
ProductPurchaseCountLoadSuccess(
state.productInfo.copyWith(
purchaseCount: productPurchaseCount,
),
),
);
} catch (_) {
emit(
ProductPurchaseCountLoadSuccess(state.productInfo),
);
}
}
}
abstract class ProductState extends Equatable {
const ProductState(this.productInfo);
final ProductInfo productInfo;
@override
List<Object?> get props => [productInfo];
}
class ProductInitial extends ProductState {
const ProductInitial(ProductInfo productInfo) : super(productInfo);
}
class ProductPurchaseCountLoadInProgress extends ProductState {
const ProductPurchaseCountLoadInProgress(ProductInfo productInfo)
: super(productInfo);
}
class ProductPurchaseCountLoadFailure extends ProductState {
const ProductPurchaseCountLoadFailure(ProductInfo productInfo)
: super(productInfo);
}
class ProductPurchaseCountLoadSuccess extends ProductState {
const ProductPurchaseCountLoadSuccess(ProductInfo productInfo)
: super(productInfo);
}
最后但同样重要的是,有一个相对较新的小部件,称为 BlocSelector
,它可以让您检查状态以确定是否应该构建子项。
BlocSelector<BlocA, BlocAState, SelectedState>(
selector: (state) {
// return selected state based on the provided state.
},
builder: (context, state) {
// return widget here based on the selected state.
},
)
我是 flutter 项目的工作人员,使用 bloc 作为状态管理。
但是我的屏幕包含各种各样的数据。
如何管理所有这些数据?
class ProductCubit extends Cubit<ProductState> {
Worker worker = Worker();
List<ProductMakePriceChange> productsPriceChange = [];
List<PurchaseCount> purchaseCount = [];
int productCount = 0;
int productSaleCount = 0;
int productCategoryCount = 0;
int productUnitCount = 0;
}
我每个数据都有一个状态(加载状态) 以及每个数据的一种加载方法
问题!
当一个状态改变时,所有屏幕都重建
我只需要更改屏幕上的一个分区,即数据生效时的那个分区
有几种方法可以实现这一点。
如你所料,你当然可以将一些田地移到不同的肘上。另一种选择是实现 ProductState
的不同子类,并在运行时检查 BlocBuilder
或 BlocConsumer
中的类型。
class ProductCubit extends Cubit<ProductState> {
ProductCubit()
: super(
const ProductInitial(
ProductInfo(
productsPriceChange: [],
purchaseCount: [],
productSaleCount: 0,
productCategoryCount: 0,
productCount: 0,
productUnitCount: 0,
),
),
);
Future<void> loadProductPurchaseCount() async {
emit(ProductPurchaseCountLoadInProgress(state.productInfo));
try {
// TODO load product purchase count
final productPurchaseCount = <dynamic>[];
emit(
ProductPurchaseCountLoadSuccess(
state.productInfo.copyWith(
purchaseCount: productPurchaseCount,
),
),
);
} catch (_) {
emit(
ProductPurchaseCountLoadSuccess(state.productInfo),
);
}
}
}
abstract class ProductState extends Equatable {
const ProductState(this.productInfo);
final ProductInfo productInfo;
@override
List<Object?> get props => [productInfo];
}
class ProductInitial extends ProductState {
const ProductInitial(ProductInfo productInfo) : super(productInfo);
}
class ProductPurchaseCountLoadInProgress extends ProductState {
const ProductPurchaseCountLoadInProgress(ProductInfo productInfo)
: super(productInfo);
}
class ProductPurchaseCountLoadFailure extends ProductState {
const ProductPurchaseCountLoadFailure(ProductInfo productInfo)
: super(productInfo);
}
class ProductPurchaseCountLoadSuccess extends ProductState {
const ProductPurchaseCountLoadSuccess(ProductInfo productInfo)
: super(productInfo);
}
最后但同样重要的是,有一个相对较新的小部件,称为 BlocSelector
,它可以让您检查状态以确定是否应该构建子项。
BlocSelector<BlocA, BlocAState, SelectedState>(
selector: (state) {
// return selected state based on the provided state.
},
builder: (context, state) {
// return widget here based on the selected state.
},
)