在颤振上动态添加choicechip答案

【问题标题】：Dynamically add choicechip on flutter在颤振上动态添加choicechip
【发布时间】：2020-02-11 13:09:57
【问题描述】：

我正在尝试在容器内动态添加 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

【问题讨论】：

标签： android ios flutter dart flutter-layout

【解决方案1】：

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

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

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

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

【讨论】：

成功了。非常感谢您描述问题。祝你有美好的一天。