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 (将#修改为@）