时间戳

首页 > 解决方案 > Flutter - 如何将带有按钮的芯片组列表水平包装在一起

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

问题描述

我是 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方向，但徒劳无功。有什么方法可以让这个设计工作？

在此处输入图像描述

标签： flutterdart

解决方案

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

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

或者，使用扩展运算符

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

推荐阅读