如何在自动包装小部件中填充内容？

Question

如果窗口小部件溢出，我想自动将其移动到新行，而Wrap小部件是一种好方法。

所以我有一些环绕式小部件，其宽度基于文本长度和一些图标，如：

当前实际值：

我想在父母的左侧和右侧对齐2个图标。

但是您可以看到Row的红色区域，我不知道当Row小部件的长度大于{{ 1}}（在上面附带图片的情况下，Text）

这是我期望的：

我当前的代码是：

Row

如何实现？

Answer 1

processInput

用IntrinsicWidth而不是普通的Container Widget包装长文本列。此外，删除Row小部件上的mainAxisSize约束，使其宽度与Text小部件相同。

https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html

Answer 2

我认为这就是您要寻找的List of Containers side by side

我将其设为动态，以便您可以根据需要在项目列表中添加新项目。

class Item {
  String text;
  IconData icon1;
  IconData icon2;
  Color color;

  Item({ this.text, this.icon1, this.icon2,this.color,});
}

我们可以通过创建项目

的列表来使其动态化

final List<Item> item = [
    Item(
      text: 'Item 3',
      icon1: Icons.edit,
      icon2: Icons.more_vert,
      color: Colors.blue,
    ),
    Item(
      text: 'Item 2 This text is too long for the screen width..... screen width.....screen width.....screen width.....',
      icon1: Icons.edit,
      icon2: Icons.more_vert,
      color: Colors.greenAccent,
    ),
    Item(
      text: 'Item 3',
      icon1: Icons.edit,
      icon2: Icons.more_vert,
      color: Colors.amberAccent[100],
    ),
  ];

您可能还想看看Wrap Class

Wrap(
    spacing: 8.0, // gap between adjacent chips
    runSpacing: 4.0, // gap between lines
    children: item.map((Item) {
      return GestureDetector(
        child: Container(
          decoration: BoxDecoration(
            color: Item.color,
          ),
          margin: const EdgeInsets.all(15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(Item.text),
              Wrap(
                children: <Widget>[
                  Icon(Item.icon1),
                  Icon(Item.icon2),
                ],
              )
            ],
          ),
        ),
        onTap: () => {},
      );
    }).toList(),
  ),