如何仅在 Flutter 中的一个列表项上显示加载指示器？

Question

我有一个带有按钮的项目列表。 通过单击按钮上的一个元素，我得到一个CircularProgressIndicator 。 我遇到了一个问题，当我在每个按钮上单击一张卡片时，我会在所有卡片上看到一个加载指示器。 如何让加载指示器只出现在我点击的一张卡片上？

bool isApprovedLoading = false;

return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 25),
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: Padding(
          padding: const EdgeInsets.only(top: 10, bottom: 18),
          child: ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  itemCount: list.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.only(bottom: 16),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(16),
                        child: BackdropFilter(
                          filter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
                          child: Container(
                            height: 152,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(16),
                              color:
                                  constants.Colors.greyXDark.withOpacity(0.8),
                            ),
                            child: Row(
                              children: [
                                          Expanded(
                                            child: Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                isApprovedLoading
                                                    ? const CircularProgressIndicator(
                                                        color: constants
                                                            .Colors.purpleMain)
                                                    : OrderButton(
                                                        text: 'Approved',
                                                        svgIcon:
                                                            SvgPicture.asset(
                                                                constants.Assets
                                                                    .enable,
                                                                color: constants
                                                                    .Colors
                                                                    .purpleMain),
                                                        textStyle: const TextStyle(
                                                            fontFamily: constants
                                                                .FontFamily
                                                                .AvenirLtStd,
                                                            fontSize: 12,
                                                            fontWeight:
                                                                FontWeight.w800,
                                                            color: constants
                                                                .Colors
                                                                .purpleMain),
                                                        borderColor: constants
                                                            .Colors.purpleMain,
                                                        buttonColor: constants
                                                            .Colors.greyXDark
                                                            .withOpacity(0.5),
                                                        onTap: () {
                                                          setState(() {
                                                            isApprovedLoading =
                                                                true;
                                                          });
                                                          _confirmOrder(
                                                            context,
                                                            list[index].id,
                                                            poyntBookingsCubit,
                                                            user,
                                                          );
                                                        },
                                                      ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                )
        ),
      ),
    );

Answer 1

您需要定义新变量，例如：

int selectedItem = -1;

并将您的 asdasd 更改为：

onTap: () {
          setState(() {
            isApprovedLoading = true;
            selectedItem = index;
          });
          _confirmOrder(
            context,
            list[index].id,
            poyntBookingsCubit,
            user,
          );
        },

然后像这样使用它：

isApprovedLoading && selectedItem == index
              ? const CircularProgressIndicator(
                  color: constants.Colors.purpleMain)
              : OrderButton(...),