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中始終能自動換行