我怎样才能在flutterMap中取消勾选复选框?

bmp9r5qi  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(129)

我有一个复选框,是迭代与Map,但当一个复选框被点击,所有的复选框被选中在同一时间,他们应该是单独的复选框。
这是一个图片和代码,以便更好地解释
图片:

这是我的代码:

class _RejectJobConfirmationOptions2PopupState
    extends State<RejectJobConfirmationOptions2Popup> {
  bool _isChecked = false;
  String _currText = '';
  List<String> items = [
    "Title",
    "Quantity",
    "Description",
    "Your Phone Number",
    "Due Date"
  ];
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Hero(
          tag: heroRejectJobConfirmationOptions2PopupCard,
          createRectTween: (begin, end) {
            return CustomRectTween(begin: begin, end: end);
          },
          child: Material(
            color: Colors.white,
            elevation: 2,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Align(
                      // These values are based on trial & error method
                      alignment: Alignment(1.05, -1.05),
                      child: InkWell(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            color: Color(0xffECF0F1),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Icon(
                            Icons.close,
                            color: Color(0xffB0BEC1),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(left: 22.0, right: 22.0),
                        child: Text(
                          'Select a reason why you \nwant to reject this job',
                          style: GoogleFonts.poppins(
                              fontSize: 16,
                              fontWeight: FontWeight.w600,
                              color: Color(0xff212121)),
                        ),
                      ),
                      Divider(
                        color: Color(0xff34495E).withOpacity(0.2),
                      ),
                      Column(
                        children: items
                            .map((e) => Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Transform.scale(
                                      scale: 1.3,
                                      child: Checkbox(
                                        side:
                                            MaterialStateBorderSide.resolveWith(
                                          (Set<MaterialState> states) {
                                            if (states.contains(
                                                MaterialState.selected)) {
                                              return const BorderSide(
                                                  width: 2,
                                                  color: Color(0xff34495E));
                                            }
                                            return const BorderSide(
                                                width: 1,
                                                color: Color(0xffB0BEC1));
                                          },
                                        ),
                                        shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        activeColor: Color(0xff34495E),
                                        materialTapTargetSize:
                                            MaterialTapTargetSize.shrinkWrap,
                                        visualDensity: VisualDensity(
                                            horizontal: -4, vertical: -4),
                                        value: _isChecked,
                                        onChanged: (value) {
                                          setState(() {
                                            _isChecked = value;
                                           
                                          });
                                        },
                                      ),
                                    ),
                                    SizedBox(
                                      width: 10,
                                    ),
                                    Text(
                                      e,
                                      style: GoogleFonts.poppins(
                                          color: Colors.black87,
                                          fontSize: 12,
                                          fontWeight: FontWeight.w400),
                                    ),
                                  ],
                                ))
                            .toList(),
                      ),
                      
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

我尝试使用if条件,但它给了我错误。我也尝试寻找有关使用firstorwhere的信息,但我没有正确实现它

irtuqstp

irtuqstp1#

您需要有一个列表来控制/保存列表项。
创建状态变量,如下所示

List<String> selected = [];

复选框值更新为

value: selected.contains(e),
  onChanged: (value) {
    if (selected.contains(e)) {
      selected.remove(e);
    } else {
      selected.add(e);
    }
    setState(() {});
  },
),

相关问题