微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter:如何仅重建 gridview 的一项

如何解决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 举报,一经查实,本站将立刻删除。