如何在模态底部表单中创建 CheckboxListTile？

Question

void _onButtonPressd(BuildContext context) {
  TextEditingController customController = TextEditingController();
  showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) {
        return Container(
            height: 350,
            child: Column(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(
                      left: 10.0, right: 10.0, top: 20.0, bottom: 15.0),
                  child: Text(
                    'Meritos',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 24,
                        fontFamily: 'Jost',
                        fontWeight: FontWeight.bold),
                  ),
                ),
                Container(
                    height: 80,
                    padding: EdgeInsets.only(left: 25.0, right: 25.0),
                    child: Column(
                      children: <Widget>[
                        CheckboxListTile(
                                *Here where the problem arises*
                        )

                      ],
                    )),
              ],
            ));
      });
}

Answer 1

您需要使用 aStateFulBuilder将状态更改应用到模态：

showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  builder: (context) {
                    return StatefulBuilder(  // this is new
                        builder: (BuildContext context, StateSetter setState) {
                      return Container(
                          height: 350,
                          child: Column(
                            children: <Widget>[
                              Container(
                                padding: EdgeInsets.only(
                                    left: 10.0,
                                    right: 10.0,
                                    top: 20.0,
                                    bottom: 15.0),
                                child: Text(
                                  'Meritos',
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontSize: 24,
                                      fontFamily: 'Jost',
                                      fontWeight: FontWeight.bold),
                                ),
                              ),
                              Container(
                                  height: 80,
                                  padding:
                                      EdgeInsets.only(left: 25.0, right: 25.0),
                                  child: Column(
                                    children: <Widget>[
                                      CheckboxListTile(
                                        title: Text('checkbox'),
                                        onChanged: (bool value) {
                                          setState(() {
                                            _checked = value;
                                          });
                                        },
                                        value: _checked,
                                      )
                                    ],
                                  )),
                            ],
                          ));
                    });
                  });

结果：