如何在flutter中使用动态列表制作表单

Question

我正在尝试使用动态筹码列表在颤振中构建一个表单，用户可以在其中选择多个类别，但我无法构建它，因为我是颤振的新手，我无法完成它，我该如何获得静态表单字段并获取其中芯片的动态列表。

我正在尝试使用网格视图来获取它，但是网格视图正在对每个芯片重复整个表单，如果我只使用带有芯片的网格视图，我将无法获得表单的其余静态字段。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Student form"),
      ),
      body:ExamGrid(),
    );
  }

下面是考试网格：

class _ExamGridState extends State<ExamGrid> {
  @override
  Widget build(BuildContext context) {
    final loadedExams = Provider.of<StudentFormProvider>(context);
    final loadedExam = loadedExams.exams;

    return GridView.builder(
      padding: const EdgeInsets.all(1.0),
      itemCount: loadedExam.length,
      itemBuilder: (ctx, i) {
        String catname;
        final exam = loadedExam[i];
        if (i > 0) {
          catname = exam.catname;
        }
        if (exam.catname != catname) {
          //new SizedBox(height: 8);
          catname = exam.catname;
          return Padding(
            padding: EdgeInsets.fromLTRB(16, 0, 8, 8),
            child: Align(alignment: Alignment.centerLeft,
              child: Text(exam.catname,
                  style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 17,
                ),
              ),
            ),
          );
        } else {
          return FilterChip(
            label: Text(exam.examname),
            backgroundColor: Colors.transparent,
            shape: StadiumBorder(side: BorderSide()),
            selected: exam.isselected,
            onSelected: (bool checked) {
              setState(() {
                exam.isselected = checked;
              });
            },
          );
        }
      },
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //crossAxisCount: 1,
        maxCrossAxisExtent: 200,
        childAspectRatio: 4 / 1,
        mainAxisSpacing: 10,
      ),
    );
  }
}

任何人都可以帮助我在这种情况下做什么，因为我正在尝试导致意想不到的结果。 我想有多个静态表单列表和动态芯片列表

Answer 1

类中有两个小部件列表。 一个是空的，一个包含所有类别。 向用户显示所有类别，当用户点击一个类别时，将其添加到空列表中并调用 setstate。

Answer 2

我终于解决了。 这是为我工作的解决方案。 我不确定这是否是最好的方法。

Widget build(BuildContext context) {
final loadedExams = Provider.of<StudentFormProvider>(context);
List<Widget> exams = new List<Widget>();
String a;
//myController.text = loadedExams.exams.coachingname;
(loadedExams.exams.exams).map((exam) {
  if (exam.ischecked) {
    examids.add(exam.autouid);
  }
  if (exam.catname != a) {
    a = exam.catname;
    exams.add(
      Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              exam.catname + ":-",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
              ),
            ),
          ),
        ],
      ),
    );
  }

  exams.add(
    ChoiceChip(
      selected: exam.ischecked,
      label: Text(exam.examname),
      onSelected: (bool check) {
        setState(() {
          exam.ischecked = check;
          if (check) {
            examids.add(exam.autouid);
          }
          if (!check) {
            examids.removeWhere((a) => a == exam.autouid);
          }
        });
      },
    ),
  );
}).toList();

List<Widget> subjects = new List<Widget>();
subjects.add(
  Row(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          "You would like to solve the doubts of ?",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 17,
          ),
        ),
      ),
    ],
  ),
);
(loadedExams.exams.subjects).map((subject) {
  if (subject.issolving) {
    subjectids.add(subject.autouid);
  }
  subjects.add(ChoiceChip(
    label: Text(subject.subname),
    selected: subject.issolving,
    onSelected: (bool solve) {
      setState(() {
        subject.issolving = solve;
        if (solve) {
          subjectids.add(subject.autouid);
        } else {
          subjectids.removeWhere((a) => a == subject.autouid);
        }
      });
    },
  ));
}).toList();

return Scaffold(
  key: _skey,
  body: SingleChildScrollView(
    child: Padding(
      padding: EdgeInsets.all(8),
      child: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            TextFormField(
              initialValue: loadedExams.exams.coachingname,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Coaching Name",
                hintText: "Enter your coaching name",
              ),
              validator: (cname) {
                if (cname.isEmpty) {
                  return 'Coaching name is required';
                }
                //return cname;
              },
              //controller: myController,
              onSaved: (cname) => {_studentForm.coachingName = cname},
            ),
            SizedBox(height: 8),
            Padding(
              padding: EdgeInsets.all(8),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  "Follow exams:",
                  style: TextStyle(
                    color: Colors.grey,
                    fontWeight: FontWeight.bold,
                    fontSize: 21,
                  ),
                ),
              ),
            ),
            SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Wrap(
                    alignment: WrapAlignment.center,
                    spacing: 5,
                    children: exams,
                  ),
                  Wrap(
                    alignment: WrapAlignment.center,
                    spacing: 5,
                    children: subjects,
                  ),
                ],
              ),
              //String  ="";
            ),
            _isloading
                ? CircularProgressIndicator()
                : FlatButton.icon(
                    icon: Icon(Icons.save),
                    onPressed: savestudentform,
                    label: Text("Save"),
                    textColor: Colors.white,
                    color: Theme.of(context).primaryColor,
                    shape: RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(10.0)),
                  ),
          ],
        ),
      ),
    ),
  ),
);

Answer 3

我用过这个你需要在我的项目中有一个完整的样本，你可以选择一个芯片或多个

class CourseFilterScreen extends StatefulWidget {
  static const route = "/CourseFilterScreen";

  _CourseFilterScreenState createState() => _CourseFilterScreenState();
}

class _CourseFilterScreenState extends State<CourseFilterScreen> {
  List title = [
    {'title': "React jsx", "value": "React jsx"},
    {'title': "English For Kids", "value": "English for kids"},
    {'title': "IELTS", "value": "IELTS"},
    {'title': "Egnlish", "value": "Egnlish"},
    {'title': "Flutter", "value": "Flutter"},
  ];

  List selectedReportList = List();
  String selectedReport = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              child: MultiSelectChip(
                reportList: title,
                onSelectionChanged: (selectedList) {
                  setState(() {
                    selectedReportList = selectedList;
                  });
                },
              ),
            ),
            Text("${selectedReportList.join(",")}"),
            SingleSelectChip(
              reportList: title,
              onSelectionChanged: (selectItem) {
                setState(() {
                  selectedReport = selectItem;
                });
              },
            ),
            Text(selectedReport),
          ],
        ),
      ),
    );
  }
}

class MultiSelectChip extends StatefulWidget {
  final List reportList;
  final Function onSelectionChanged;

  MultiSelectChip({this.reportList, this.onSelectionChanged});

  @override
  _MultiSelectChipState createState() => _MultiSelectChipState();
}

class _MultiSelectChipState extends State<MultiSelectChip> {
  List selectedChoices = List();
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: widget.reportList
            .map((item) => (Container(
                  padding: const EdgeInsets.all(2.0),
                  child: ChoiceChip(
                    selectedColor: Colors.lightBlueAccent,
                    label: Text(item['title']),
                    selected: selectedChoices.contains(item['value']),
                    onSelected: (selected) {
                      setState(() {
                        selectedChoices.contains(item['value'])
                            ? selectedChoices.remove(item['value'])
                            : selectedChoices.add(item['value']);
                        widget.onSelectionChanged(selectedChoices);
                      });
                    },
                  ),
                )))
            .toList());
  }
}

class SingleSelectChip extends StatefulWidget {
  final List reportList;
  final Function onSelectionChanged;

  SingleSelectChip({this.reportList, this.onSelectionChanged});

  @override
  _SingleSelectChipState createState() => _SingleSelectChipState();
}

class _SingleSelectChipState extends State<SingleSelectChip> {
  String selectedChoices = '';
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: widget.reportList
            .map((item) => (Container(
                  padding: const EdgeInsets.all(2.0),
                  child: ChoiceChip(
                    selectedColor: Colors.lightBlueAccent,
                    label: Text(item['title']),
                    selected: selectedChoices.contains(item['value']),
                    onSelected: (selected) {
                      setState(() {
                        selectedChoices = item['value'];
                      });
                    },
                  ),
                )))
            .toList());
  }
}