动态地在颤动中添加Choicechip

Question

我正在尝试在容器内动态添加ChoiceChip / InputChip。我从列表中选择选项，并将其添加到容器中。但是添加选项时出现水平溢出错误。我已经使用了Wrap小部件，但无法正常工作。我想使用wrap，以便下一个选定的芯片位于下一行。谁能帮忙吗？

List<Widget> _specialWidget = List<Widget>();
                         DropdownButtonHideUnderline(
                            child: DropdownButton<String>(
                              hint: Text(Strings.searchJob),
                              value: _jobTitle == null
                                  ? null
                                  : Lists.jobCatagories[_jobTitle],
                              items: Lists.jobCatagories.map((String value) {
                                return new DropdownMenuItem<String>(
                                  value: value,
                                  child: new Text(value),
                                );
                              }).toList(),
                              onChanged: (value) {
                                setState(() {
                                  _jobTitle =
                                      Lists.jobCatagories.indexOf(value);
                                  _specialWidget.add(Special());
                                });
                              },
                            ),
                          ),

这些筹码正在添加，它来自一个StatefulWidget

                     Container(
                        child: Row(
                          children: List.generate(
                            _specialWidget.length,
                            (i) {
                              return _specialWidget[i];
                            },
                          ),
                        ),
                      ),

class Special extends StatefulWidget {
  @override
  _SpecialState createState() => _SpecialState();
}

class _SpecialState extends State<Special> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      children: <Widget>[
        InputChip(
          label: Text(
            _jobTitle == null ? null : Lists.jobCatagories[_jobTitle],
          ),
        ),
      ],
    );
  }
}

https://i.stack.imgur.com/8KD8M.png

Answer 1

您应将代码中的Row替换为Wrap。

 Container(
    child: Row( // REPLACE THIS WITH Wrap
    children: List.generate(
      _specialWidget.length,
      (i) {
        return _specialWidget[i];
      },
    ),
  ),
 ),

当前，您的代码Wrap是单个小部件，并将其添加为Row子代，这违背了Wrap的目的。在您的情况下，Wrap应该替换为Row，因为您已经知道，它的任务是在小部件溢出时中断它们的行-就像Text小部件将处理长字符串一样。

有关Wrap小部件的更多信息：https://api.flutter.dev/flutter/widgets/Wrap-class.html