Flutter 为什么 Wrap 在环绕行时不起作用？答案

【问题标题】：Flutter Why Wrap doesn't work when surrounding rows?Flutter 为什么 Wrap 在环绕行时不起作用？
【发布时间】：2020-01-03 08:54:06
【问题描述】：

我试图用颤振包装一些内容但没有成功。我发现我不能像使用 Chips 或 Text 小部件那样换行。有人知道为什么吗？

这是三组 Rows ，每组都有一个图标和一个文本，并排放置。但是在较小的屏幕中它会溢出，因为没有足够的空间（宽度）。

我希望当当前行中的空间结束时，最后一组行（一个图标和一个标签）跳转到下一行。

谢谢

我尝试用容器包装行，但没有成功。

    Row(
    children: <Widget>[
        Wrap(
        children: <Widget>[
            Row(
            children: <Widget>[
                Text('long text 1'),
                Text('an icon here'),
            ],
            ),
            Row(
            children: <Widget>[
                Text('Anoter Label'),
                Text('Anoter icon'),
            ],
            ),
        // I want this row to jump to next line when there is not space in 
        // current line 
        Row(
            children: <Widget>[
                Text('More Text'),
                Text('Moire icon'),
            ],
            ),
        ],
        )
    ],
    ),

Flutter layout ok large screen

Overflow on smaller screens

当我在较小的屏幕上时，带有标题的图像会调整大小并且非常适合。但是图片上方的标签和图标溢出了。所以 id 像最后一组图标/标签带有 $ simbol e 价格的那个，跳到新行。我可以在仅使用文本小部件时换行并且它可以工作，但随后我失去了在 mainAxisAlignment 等行上的对齐方式：MainAxisAlignment.spaceAround

【问题讨论】：

你能分享一下你真正想做的设计吗？
为什么将wrap 小部件包装在row 中。？删除最上面的row & 它会正常工作。
删除最上面的行不起作用。它适用于芯片或文本。不带行。
我将添加一张图片来展示布局。

标签： flutter row flutter-layout

【解决方案1】：

更新：这在某种程度上是一个解决方案

Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.alarm),
              Text('60 Minutes'),
            ],
          ),
        ),
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.shop),
              Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
            ],
          ),
        ),
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.attach_money),
              Text('Very expensive'),
            ],
          ),
        )
      ],
    );

...

你可以这样做

Row(
          children: <Widget>[
            Expanded(
              child: Wrap(
                children: <Widget>[
                  Text('long text 1'),
                  Text('an icon here'),
                  Text('Anoter Label'),
                  Text('Anoter icon'),
                  // I want this row to jump to next line when there is not space in
                  // current line
                  Text('More Text'),
                  Text('Moire icon'),
                ],
              ),
            )
          ],
        ),

或者这个

 Row(
          children: <Widget>[
            Expanded(
              child: Wrap(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text('long text 1'),
                      Text('an icon here'),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text('Anoter Label'),
                      Text('Anoter icon'),
                    ],
                  ),
                  // I want this row to jump to next line when there is not space in
                  // current line
                  Row(
                    children: <Widget>[
                      Text('More Text'),
                      Text('Moire icon'),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),

【讨论】：

仅包装文本小部件有效，但随后我松散了我在 mainAxisAlignment: MainAxisAlignment.spaceAround 等行上的对齐方式
查看我的回答的顶部更新，希望这会对你有所帮助
非常感谢。一直在寻找这种行为

【解决方案2】：

行的宽度由mainAxisSize 属性决定。如果 mainAxisSize 属性是MainAxisSize.max，那么行是传入约束的最大宽度。如果mainAxisSize 属性是MainAxisSize.min，那么Row的宽度就是总和受传入约束影响的子项的宽度。

要解决您的问题，只需将行小部件上的 mainAxisSize 属性设置为 MainAxisSize.min

【讨论】：