Flutter - 如何将带有按钮的芯片组列表水平包装在一起答案

【问题标题】：Flutter - How to wrap list of chipsets with a button horizontally togetherFlutter - 如何将带有按钮的芯片组列表水平包装在一起
【发布时间】：2021-04-27 08:32:42
【问题描述】：

我是 Flutter 的新手，一直在尝试获取封装在 Wrap 小部件中的芯片组列表，并能够通过图像中显示的按钮添加更多芯片组。但是，该按钮无法与芯片组水平缠绕。下面是设计的图片，以使其更清晰。

代码：

Container(
child: Wrap(
  children: [
    Container(
      child: Wrap(
        children: _chipsetList,
      ),
    ),
    SizedBox(width: 2),
    Container(
        height: 35,
        width: 35,
        child: FittedBox(
          child: FloatingActionButton(
            heroTag: null,
            elevation: 0,
            shape: StadiumBorder(
                side: BorderSide(width: 2.0)),
            onPressed: () {
              _getMoreChips(context);
            },
            child: Icon(Icons.add),
          ),
        ))
  ],
),),

我尝试尝试SingleChildScrollView 属性或Wrap 方向但徒劳无功。有什么方法可以让这个设计发挥作用？

【问题讨论】：

如果按钮相似，您可以使用ListView 并为每个按钮构建图块。然后你可以改：scrollDirection: Axis.horizontal.

标签： flutter dart

【解决方案1】：

看来你想把筹码和按钮放在一个包装里。为此，请将它们组合在一个列表中，并将此列表用作 wrap 的子项

List<Widget> items = List.from(_chipsetList); // copy
Widget button = FloatingActionButton();
items.add(button);
Wrap(
  children: items,
)

或者，使用扩展运算符

Wrap(
  children: [
    ..._chipsetList,
    FloatingActionButton(),
  ],
)

【讨论】：

谢谢！使用扩展运算符的解决方案对我有用。