Riverpod、Flutter - 如何通过索引更改复选框状态

Question

有一个状态为 true 的 CartCheckbox 小部件（对象）。它被添加到 CartItemWidget，然后从中形成列表。 由于具有相同对象的 CartItemWidget 中的列表被添加到 ListView.builder （据我所知），因此当您单击复选框时，列表中的所有复选框都会变为非活动状态..

添加了一个可以将 Map 键和值返回给我的提供程序

final checkboxesProvider = StateProvider<Map<String, bool>>((ref) => {'Checkbox1': true});

然后这个..

class CartCheckbox extends ConsumerWidget {
  const CartCheckbox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final checkboxes = ref.watch(checkboxesProvider);
  //  ref.watch(selectAllProvider);

    return Column(
      children: [
        ...checkboxes.entries.map((entry) {
          return Checkbox(
            value: entry.value,
            activeColor: AppColors.main,
            onChanged: (bool? value) {
              ref.watch(checkboxesProvider.notifier).state[entry.key] = value!;
              ref.refresh(selectAllProvider.notifier).state = ref.read(checkboxesProvider.notifier).state.values.every((v) => v);
            },
          );
        },
        ),
      ],
    );
  }
}

工作表在这里创建..

  child: ListView.builder(
                    itemCount: response.data.products.length,
                    itemBuilder: (context, index) {
                      return CartItemWidget(
                        key: ValueKey<String>(
                            response.data.products[index].price.price),
                        product: response.data.products[index],
                        cartState: state,
                      );
                    },
                  ),

需要这样的结果：

当我们进入购物车时，所有复选框均处于活动状态。 单击其中一个复选框后，该复选框和“全选”将变为非活动状态。 当最后一个复选框变为活动状态时，“全选”也变为活动状态

如何根据此代码使每个单独的复选框处于活动或非活动状态（我通过索引思考））...也许我错了

Consumer selectAllButton() {
return Consumer(
  builder: (BuildContext context, WidgetRef ref, Widget? child) {
    final selectAll = ref.watch(selectAllProvider);

    return Align(
        alignment: Alignment.centerLeft,
        child: Padding(
          padding: const EdgeInsets.only(left: 16),
          child: GestureDetector(
            onTap: () {},
            child: Row(
              children: [
                Checkbox(
                  value: selectAll,
                  activeColor: AppColors.main,
                  onChanged: (bool? value) {
                    ref.read(selectAllProvider.notifier).state = value!;
                    ref.read(checkboxesProvider.notifier).state = ref
                        .read(checkboxesProvider.notifier)
                        .state
                        .map((key, value) => MapEntry(key, !selectAll));
                  },
                ),
                Insets.gapW8,
                const Text(
                  "Обрати всі",
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w400,
                      color: AppColors.textGray80),
                ),
              ],
            ),
          ),
        ));
  },
);

}

Widget build(BuildContext context) {
super.build(context);
return Consumer(
  builder: (context, ref, child) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 1, color: AppColors.line),
        ),
      ),
      child: ProductPushWrapper(
        product: product,
        child: Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 16, vertical: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                       const CartCheckbox(),
                    Row(
                      children: [
                        avatarImage(),
                        Insets.gapW20,
                        Expanded(
                          child: Column(
                            crossAxisAlignment: Cross

Answer 1

我只是使用

checkboxesProvider

来控制选择，包括全选。

当

Map

覆盖重复键的值时，您可以在更新项目时利用此优势。

ref
    .watch(checkboxesProvider.notifier)
    .update((state) => {...state, entry.key: value!});

class CartCheckbox extends ConsumerWidget {
  const CartCheckbox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final checkboxes = ref.watch(checkboxesProvider);

    return Column(
      children: [
        CheckboxListTile(
          title: const Text('Check all'),
          value: checkboxes.values.every((element) => element),
          onChanged: (bool? value) {
            ref.watch(checkboxesProvider.notifier).update((state) {
              return state.map((key, _) => MapEntry(key, value ?? false));
            });
          },
        ),
        ...checkboxes.entries.map(
          (entry) {
            return CheckboxListTile(
              title: Text(entry.key),
              value: entry.value,
              onChanged: (bool? value) {
                ref.watch(checkboxesProvider.notifier).update((state) => {
                      ...state,
                      entry.key: value!,
                    });
              },
            );
          },
        ),
      ],
    );
  }
}