我有一个父小部件，其中包含多个子小部件，每个小部件都包含一个复选框。 如何检查父小部件中的每个复选框？

Question

I have a parent widget that draws multiple child widgets using a listview. There is a checkbox within each of these child widgets. I am trying to implement a "select all" button in the parent widget which checks all of the children's checkboxes, but I'm having a hard time figuring out how to accomplish this.

Here is my parent widget:

class OrderDisplay extends StatefulWidget {
  static const routeName = '/orderDisplay';
  //final Order order;
  //const OrderDisplay(this.order);

  @override
  OrderDisplayState createState() {
    return OrderDisplayState();
  }
}

class OrderDisplayState extends State<OrderDisplay> {
  bool preChecked = false;
  double total = 0;
  List<OrderedItem> itemsToPayFor = [];

  @override
  Widget build(BuildContext context) {
    final OrderDisplayArguments args =
        ModalRoute.of(context).settings.arguments;
    return Scaffold(
        backgroundColor: MyColors.backgroundColor,
        body: SafeArea(
            child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                physics: ScrollPhysics(),
                child: Container(
                    padding: EdgeInsets.only(top: 10),
                    child: Column(
                      children: [
                        Text(args.order.restaurantName,
                            style: MyTextStyles.headingStyle),
                        ListView.separated(
                            physics: NeverScrollableScrollPhysics(),
                            shrinkWrap: true,
                            itemCount: args.order.orderedItems.length,
                            itemBuilder: (context, index) {
                              return FoodOrderNode(
                                  preChecked, args.order.orderedItems[index],
                                  onCheckedChanged: (isChecked) {
                                isChecked
                                    ? setState(() {
                                        itemsToPayFor.add(
                                            args.order.orderedItems[index]);
                                      })
                                    : setState(() {
                                        itemsToPayFor.remove(
                                            args.order.orderedItems[index]);
                                      });
                              });
                            },
                            separatorBuilder: (context, index) =>
                                MyDividers.MyDivider)
                      ],
                    )),
              ),
            ),
            MyDividers.MyDivider,
            Container(
                height: 140,
                color: MyColors.backgroundColor,
                child: Row(children: [
                  Expanded(
                      flex: 5,
                      child: Column(
                        children: [
                          Expanded(flex: 2, child: SizedBox()),
                          Expanded(
                              flex: 6,
                              child: SelectAllButton(() {
                                print("SELECT ALL");
                                setState(() {
                                  preChecked = true;
                                });
                              })), 
                          Expanded(flex: 2, child: SizedBox())
                        ],
                      )),
                  Expanded(
                      flex: 5,
                      child: Column(
                        children: [
                          Expanded(flex: 1, child: SizedBox()),
                          Expanded(
                              flex: 8,
                              child: PayNowButton(() {
                                print("PAY NOW");
                              },
                                  double.parse(itemsToPayFor
                                      .fold(0, (t, e) => t + e.itemPrice)
                                      .toStringAsFixed(
                                          2)))),
                          Expanded(flex: 1, child: SizedBox())
                        ],
                      ))
                ]))
          ],
        )));
  }
}

And here is FoodOrderNode :

typedef void SelectedCallback(bool isChecked);

class FoodOrderNode extends StatefulWidget {
  final bool preChecked;
  final OrderedItem item;
  final SelectedCallback onCheckedChanged;

  const FoodOrderNode(this.preChecked, this.item,
      {@required this.onCheckedChanged});

  @override
  FoodOrderNodeState createState() {
    return FoodOrderNodeState();
  }
}

class FoodOrderNodeState extends State<FoodOrderNode> {
  bool isChecked = false;
  bool isSplitSelected = false;

  @override
  Widget build(BuildContext context) {
    isChecked = widget.preChecked;
    return Container(
      height: 80,
      padding: EdgeInsets.only(left: 15, right: 15),
      decoration: BoxDecoration(
        color: MyColors.nodeBackgroundColor,
      ),
      child: Row(
        children: [
          Expanded(
              flex: 1,
              child: CircularCheckBox(
                value: isChecked,
                checkColor: Colors.white,
                activeColor: Colors.blue,
                autofocus: false,
                onChanged: (bool value) {
                  print("Change to val: $value");
                  widget.onCheckedChanged(value);
                  setState(() {
                    isChecked = value;
                  });
                },
              )),
          Expanded(
            flex: 7,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                    padding: EdgeInsets.only(bottom: 5, left: 40),
                    child: Text(
                      widget.item.itemName,
                      style: TextStyle(fontSize: 18, color: Colors.black),
                      textAlign: TextAlign.left,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    )),
                Container(
                    padding: EdgeInsets.only(left: 40),
                    child: Text(
                      "\$${widget.item.itemPrice}",
                      style:
                          TextStyle(fontSize: 16, color: MyColors.labelColor),
                    ))
              ],
            ),
          ),
          Expanded(
              flex: 2,
              child: isSplitSelected
                  ? SplitButtonSelected(() {
                      setState(() {
                        isSplitSelected = false;
                      });
                    })
                  : SplitButtonUnselected(() {
                      setState(() {
                        isSplitSelected = true;
                      });
                    }))
        ],
      ),
    );
  }
}

I have tried creating a "preChecked" argument for FoodOrderNode and then using setState from the parent widget, however, that hasn't worked out. I have also tried using keys, but I couldn't figure out how to get those working for this either. Thank you, and let me know if you'd like any more relevant code.

Answer 1

Just put a global checkbox above the list items and give it isAllChecked (bool) on its value so when it will be checked set the state to isAllChecked => true and then in child checkboxes check for condition if isAllChecked is true then mark as true or checked.

GlobalCheckbox( onChanged(value){ setState(() { isAllChecked==value; }); } ); ChildCheckBox( value: isAllChecked? true: false )

this might help you:)