Flutter布局中Expanded使用

在flutter 中对 Expanded 使用 来平分布局占用比例（相当于Android里面的LinearLayout 控件中设置权重），但是在使用中遇到一些坑，然后就开始了踩坑之旅...........

Column

一种 Column 包含 Expanded 正常显示

Widget _columnExpanded(){
    return new Column(
      children: <Widget>[

        new Expanded(child: new Text("有Expanded一半")),

        new Text("无Expanded一半"),

      ],
    );
  }
复制代码

二种 Column 包含 Expanded ，但是 Text 内容增加，如果不加 maxLines: 3, 它会自动换行。如果不设置crossAxisAlignment属性值 那么 new Text("无Expanded一半"), 这个控件会居中 ，因为 Column 中的crossAxisAlignment 默认值是全部居中

Widget _columnMoreExpanded(){
    return new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[

        new Expanded(
            child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,"
                "有Expanded一半,有Expanded一半有Expanded一半,有Expanded一半,有Expanded一半",
              maxLines: 3,
            )
        ),

        new Text("无Expanded一半"),

      ],
    );
  }
复制代码

三种 Column 包含 Expanded ，但在Expanded中使用Column来加载多控件， 显示正常

/*
 * Expanded 嵌套Column控件  然后Column 控件里面放两个 Text 会出现
 * 
 */
Widget _columnExpandedMoreWidget(){
  return new Column(
    children: <Widget>[

      new Expanded(
          child: new Column(
            children: <Widget>[
              new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              )
            ],
          )
      ),

      new Text("无Expanded一半"),

    ],
  );
}
复制代码

四种 Column 包含 Expanded，只对 Expanded 里面的Row 加入一个 Expanded 这时屏幕上就会出现，如下图情况：（超出屏幕）

Widget _columnExpandedMoreRowWidget(){
 return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
             )
           ],
         )
     ),

     new Text("无Expanded一半"),

   ],
 );
}
复制代码

看到超出屏幕，于是将 Row 中的两个 Text 控件都加上 Expanded ，代码如下：

Widget _columnExpandedMoreRowWidget1(){
 return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
             )),
           ],
         )
     ),

     new Text("无Expanded一半"),

   ],
 );
}
复制代码

超出屏幕的提示消除。如图

于是将 Expanded 中 Row 子控件 其中的一个 Text 内容减少，代码如下： 如图：

Widget _columnExpandedMoreRowWidget1(){
 return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Expanded(child: new Text("有Expanded一半",
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
             )),
           ],
         )
     ),

     new Text("无Expanded一半"),

   ],
 );
}
复制代码

平分的确算是平分了，但是没有达到效果，又修改： 代码如下：

Widget _columnExpandedMoreRowWidget1(){
 return new Column(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             )),
             new Text("有Expanded一半有Expanded一半有Expanded一半",
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
             ),
           ],
         )
     ),
     new Text("无Expanded一半"),
   ],
 );
}
复制代码

在 Row 中去掉一个 Expanded 设置，就变成了

但是，问题又来了，去掉一个 Expanded 设置后 Text 不能自动换行。目前没有找到解决办法。。。。除非使用前面那个办法 加两个Expanded 但是这样就是平分天下了

Row

在Row中 Column 的第四种 说明了 Row 一行的排列出现的问题，还是 Text 不换行

Widget _rowExpandedMoreWidget(){
 return new Row(
   children: <Widget>[

     new Expanded(
         child: new Row(
           children: <Widget>[
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 2,
               overflow: TextOverflow.clip,
             ),),
             new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",
               maxLines: 2,
               overflow: TextOverflow.clip,
             ),),
           ],
         )
     ),

     new Text("无Expanded一半"),

   ],
 );
}
复制代码

通过以上列子 说明 Row 中 要横向的两个控件 要么平分 ，要么 Row 中的另外一个控件宽度不能太长，不然超出边界不能显示，在Column中始终能自动换行