Question

我正在尝试将某些内容包装在文件中，但没有成功。我发现我无法像使用Chips或Text小部件那样包装行。有人知道为什么吗？

这是三排行，每行并排放置一个图标和一个文本。但是在较小的屏幕中，由于没有足够的空间（宽度），所以它会溢出。

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

谢谢

我试图用容器包装行，但是没有用。

    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

这样的行上的对齐方式

Answer 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'),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),

Answer 2

行的宽度由mainAxisSize属性确定。如果 mainAxisSize属性为MainAxisSize.max，则行是传入约束的最大宽度。如果mainAxisSize 属性为MainAxisSize.min，则行的宽度为总和子项的宽度受传入约束的约束。

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

Flutter为什么环绕行时自动换行不起作用？

2 个答案: