如何解决Flutter:如何仅重建 gridview 的一项
GridView.builder 重建所有可见的项目,当我用 bloc 将项目添加到购物车并更改提供程序(ChangeNotifier 和 notifyListeners)上的值时。当我更改提供程序值时,如何仅重建一项?我的代码是:
ResourcesPageContent
class ResourcesPageContent extends StatefulWidget {
@override
_ResourcesPageContentState createState() => _ResourcesPageContentState();
}
class _ResourcesPageContentState extends State<ResourcesPageContent> {
final _searchController = TextEditingController();
bool _loadingInProgress = false;
@override
Widget build(BuildContext context) {
...
...
child: Column(
...
GridView.builder(
key: UniqueKey(),itemCount: context.select((ProviderModel p) => p.getResources).length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height /
(MediaQuery.of(context).size.height / (MediaQuery.of(context).size.width / 0.62))),),itemBuilder: (BuildContext context,int index) => Builder(builder: (context) {
final resource = context.select((ProviderModel p) => p.getResources)[index];
return BlocProvider(
create: (_) => ImageLoaderBloc()..add(LoadImageEvent(resource.ResId)),child: ResourcesGridItem(resource));
}),...
)
}
ResourcesGridItem
class ResourcesGridItem extends StatelessWidget {
final VDkResource _resource;
ResourcesGridItem(this._resource);
@override
Widget build(BuildContext context) {
print("DKPrint ResourcesGridItem build method");
return Padding(
padding: const EdgeInsets.all(2.0),child: Stack(
children: [
Container(
width:100,height:50,color: Colors.blue
),Align(
alignment: Alignment.topRight,child: CounterButtons(_resource),)
]
)
)
}
计数器按钮
class CounterButtons extends StatelessWidget {
final VDkResource _resource;
CounterButtons(this._resource);
@override
Widget build(BuildContext context) {
final cartItemProviderModel = Provider.of<CartItemProviderModel>(context,listen: false);
int _orderCount = context
.select((CartItemProviderModel p) => p.getCartItems)
.firstWhere((element) => element.ResId == _resource.ResId,orElse: () => CartItem(
ResId: 0,resource: null,ResTotBalance: 0,ItemCount: 0,ResPriceValue: 0,ItemPricetotal: 0,ResPendingTotalAmount: 0))
.ItemCount;
return BlocListener<CartItemBloc,CartItemState>(
listener: (context,state) {
if (state is CartItemCountChanged) {
cartItemProviderModel.setCartItems = state.getCartItems;
}
},child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
ElevatedButton(
...
onpressed: () {
BlocProvider.of<CartItemBloc>(context).add(ChangeCartItemCount(_resource,_orderCount + 1,false,_rpAcc.RpAccId));
},child: ...
),// Want to rebuild and show this part of widget but rebuilds all items on gridview
(_orderCount > 0)
? CounterWidgets(_orderCount,_resource,_rpAcc)
: Container(
width: 0,],));
}
应该这样做以获得更好的性能。因为 GridView 项目包含一些在每次重建时闪烁的图像。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。