Wrap布局为何出现不应有溢出？如何解决？

我当前尝试用Wrap布局展示图标，但图标还是溢出了屏幕。我原本以为Wrap就是用来避免溢出的，还试过把它放进ConstrainedBox里，但没解决问题。

如截图所示，“Aéroport”这一行的图标出现了溢出情况。

我的代码 #

Wrap布局部分：

Container( 
  child: Wrap( 
    spacing: 4.0, 
    runSpacing: 4.0, 
    children: row // List<Widget> row = 生成图标列表的函数
  )
);

生成图标的函数：

Widget lineIcon({String lineCode, String lineColor, double width, double height, double fontSize, int ratio}) { 
  var r = ratio == null ? 100 : ratio; 
  var colorInt = int.parse('0xFF' + lineColor); 
  return Container( 
    height: height == null ? 32.0*r/100 : height, 
    width: width == null ? 48.0*r/100 : width, 
    decoration: BoxDecoration( 
      color: Color(colorInt), 
      borderRadius: BorderRadius.all(Radius.elliptical(16.0, 16.0)), 
      border: Border.all( 
        color: Color(colorInt), 
      ), 
    ), 
    child: Align( 
      child: Text(lineCode, style: TextStyle( 
        color: Colors.white, 
        fontSize: fontSize == null ? 20.0*r/100 : fontSize, 
        fontWeight: FontWeight.bold
      ))
    )
  ); 
}

版本信息 #

Flutter Channel beta, v0.3.2，运行于Mac OS X 10.13.4

解决方案 #

Wrap确实是用来处理溢出自动换行的，但它的前提是父容器给它设定了明确的宽度约束。如果Wrap的父组件没有限制宽度，它会默认尝试占用无限空间，自然不会触发换行。你之前用ConstrainedBox没成功，大概率是ConstrainedBox本身的父容器也没有宽度限制，导致约束没生效。

给你两个简单有效的解决办法：

1. 给Wrap的父Container设置可用宽度
   让Container占满当前屏幕的可用宽度，这样Wrap就知道自己的最大宽度边界，超过就会自动换行。修改后的代码如下：

   Container(
     width: MediaQuery.of(context).size.width, // 获取屏幕宽度
     // 或者用width: double.infinity，让Container占满父组件的可用宽度
     child: Wrap(
       spacing: 4.0,
       runSpacing: 4.0,
       children: row,
     ),
   )
   

2. 用Expanded包裹Wrap（如果Wrap在Row/Column中）
   如果你的Wrap是嵌套在Row或者Column里，直接用Expanded把Wrap包起来，让它占用剩余的可用空间：

   Column(
     children: [
       Expanded(
         child: Wrap(
           spacing: 4.0,
           runSpacing: 4.0,
           children: row,
         ),
       ),
     ],
   )
   

另外可以检查下生成的图标宽度是否合理，不过从你的lineIcon函数来看，宽度是48*r/100，正常情况下不会导致单个图标过宽，核心问题还是Wrap的宽度约束没到位。

内容的提问来源于stack exchange，提问作者Blax