onPressed создает несколько экземпляров CheckboxListTile во Flutter

Question

Я новичок в флаттере, поэтому не знаю, как с этим справиться. Я хочу иметь возможность добавить еще один экземпляр того же CheckboxListTile, когда пользователь нажимает кнопку прямо под самым последним CheckboxListTile.

Код того, как это сейчас, ниже.

Widget build(BuildContext context) {
return ListView(
  children: <Widget>[
    CheckboxListTile(
        title: TextField(
          autocorrect: true,
        ),
        value: checkBoxValue,
        secondary: Icon(Icons.assignment),
        onChanged: (bool newValue) {
          setState(() {
            checkBoxValue = newValue;
          });
        }
    ),
  ],

Код примера того, как я хотел бы, чтобы приложение отображалось после нажатия пользователем, приведен ниже.

Widget build(BuildContext context) {
return ListView(
  children: <Widget>[
    CheckboxListTile(
        title: TextField(
          autocorrect: true,
        ),
        value: checkBoxValue,
        secondary: Icon(Icons.assignment),
        onChanged: (bool newValue) {
          setState(() {
            checkBoxValue = newValue;
          });
        }
    ),
    CheckboxListTile(
        title: TextField(
          autocorrect: true,
        ),
        value: checkBoxValue,
        secondary: Icon(Icons.assignment),
        onChanged: (bool newValue) {
          setState(() {
            checkBoxValue = newValue;
          });
        }
    ),
  ],

Заранее спасибо!

Answer 1

Один из способов сделать это - использовать ListView.builder как это..

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  List<bool> checkBoxesCheckedStates = [false];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: checkBoxesCheckedStates.length,
            itemBuilder: (BuildContext context, int index){
              return CheckboxListTile(
                title: TextField(
                  autocorrect: true,
                ),
                value: checkBoxesCheckedStates[index],
                secondary: Icon(Icons.assignment),
                onChanged: (bool newValue) {
                  setState(() {
                    checkBoxesCheckedStates[index] = newValue;
                  });
                },
              );
            },
          ),
        ),
        RaisedButton(
          child: Text('Add'),
          onPressed: (){
            setState(() {
              checkBoxesCheckedStates.add(false);
            });
          },
        ),
      ],
    );
  }
}

Answer 2

Создание виджетов в ListView осуществляется путем добавленияList<Widget>в его детях. Проще говоря, это примерно похоже на.

ListView(
  children: <Widget>[widgetA, widgetA, widgetC]);

Что вам нужно сделать, так это вручную добавить виджеты в List<Widget>. Вы можете создатьList<Widget> _checkboxList и создайте функцию, которая возвращает виджет CheckboxListTile.

CheckboxListTile _checkboxListTile(){
  return CheckboxListTile(
    title: TextField(
      autocorrect: true,
    ),
    value: checkBoxValue,
    secondary: Icon(Icons.assignment),
    onChanged: (bool newValue) {
      setState(() {
        checkBoxValue = newValue;
      });
    }
  );
}

и на твоей кнопке позвони _checkboxList.add(_checkboxListTile()); добавить это на List<Widget> _checkboxList

RaisedButton(
  onPressed: () {
    setState(() {
      _checkboxList.add(_checkboxListTile());
    });
  },
  child: Text('Add checkbox'),
),

Чтобы отобразить List _checkboxList на экране:

Widget build(BuildContext context) {
  return ListView(children: _checkboxList);
}

Позвольте мне знать, если это помогает.