在底部表 GetX 库中调用 update() 时小部件不更新

Posted 2023-05-06

【中文标题】在底部表 GetX 库中调用 update() 时小部件不更新

【英文标题】：Widget doesn't update when call update() in bottomsheet GetX Library

【发布时间】：2022-01-09 14:56:27

【问题描述】：

当点击图标时，添加和删除项目不会更新，即使我在 controller() 中调用了 update() 函数

这是我称之为底部表的代码：

Get.bottomSheet(VariantBs(cartItems: cartItem));

这是底页的视图：

Row(
                          children: [
                            GestureDetector(
                              onTap: () 
                                if (amount == 1) 
                                  _dx.deleteItem(cartItems[i].itemId);
                                 else 
                                  _dx.updateQty(cartItems[i].itemId,
                                      cartItems[i].qty - 1);
                                
                              ,
                              child: Icon(
                                Icons.remove_circle,
                                color: AppColor.orange,
                                size: 34,
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.symmetric(
                                  horizontal: 14, vertical: 0),
                              child: Text(
                                cartItems[i].qty.toString(),
                                style: AppFont.lexendSemiB14Primary,
                              ),
                            ),
                            GestureDetector(
                              onTap: () 
                                _dx.updateQty(
                                    cartItems[i].itemId, cartItems[i].qty + 1);
                               
                              ,
                              child: Icon(
                                Icons.add_circle,
                                size: 34,
                                color: AppColor.orange,
                              ),
                            ),
                            const Spacer(),
                            Text(() 
                              final fmt = MoneyFormatter(
                                  settings: MoneyFormatterSettings(
                                    thousandSeparator: '.',
                                    decimalSeparator: ',',
                                  ),
                                  amount: double.parse(amount.toString()));
                              return 'Rp$fmt.output.withoutFractionDigits';
                            (), style: AppFont.lexendMedium14),
                          ],
                        ),

以及控制器中的功能：

 updateQty(int itemId, int qty) async 
    final api = await _brofoodRepository.updateQty(itemId, qty);

    return api.fold((error) => Get.snackbar('Terjadi Kesalahan', error.data),
        (response) 
      getCart();
      update();
    );
  


 getCart() async 
    final api = await _brofoodRepository.getCart();

    return api.fold((error) => Get.snackbar('Terjadi Kesalahan', error.data),
        (response) 
      if (response.merchantName == "") 
        cart.value = Cart();
       else 
        cart.value = response;
        totalItems.value = 0;
        totalPrice.value = 0;
        for (var element in cart.value.cartItems) 
          totalItems.value += element.qty;
          totalPrice.value += element.price * element.qty;
          if (element.variants == null) 
           else 
            for (var x in element.variants!) 
              for (var y in x.options) 
                totalPrice.value += y.price * element.qty;
              
            
          
        
      
      update();
    );
  

但是当我重新打开底页时，会出现 item 的新值。

对这些问题有任何想法吗？谢谢。

【参考方案1】：

您需要使用GetBuilder 来更新屏幕：

GetBuilder<YourController>(
  builder:(controller)=> Text(
                            controller.cartItems[i].qty.toString(),
                            style: AppFont.lexendSemiB14Primary,
                          ),
)

【讨论】：

我用它作为脚手架主体的子节点，所以get builder是根

【参考方案2】：

我也遇到过同样的问题，Getx 的作者在following issue 中描述了这个问题

Flutter 不会重建小部件的所有子级，因此您有两种选择： 1-在模式外使用下拉菜单。 2- 封装你想要改变的小部件，而不是通过 GetBuilder 的模式。

所以我使用了showModalBottomSheet 而不是Get.bottomSheet，如following answer 中所述

showModalBottomSheet(
context: context,
builder: (context) 
  return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState /*You can rename this!*/) 
    return Container(
      height: heightOfModalBottomSheet,
      child: RaisedButton(onPressed: () 
        setState(() 
          heightOfModalBottomSheet += 10;
        );
      ),
    );
  );
);

所以我最终使用了：

setState 用于更新底页 MY_VIEW_CONTROLLER 用于更新父视图中的选定值