Flutter 佈局篇 Positioned 和 Container

時間 2019-11-16

標籤 flutter 佈局 positioned container 简体版

原文原文鏈接

簡介

Container

它是由衆多容器類Widget(DecoratedBox、ConstrainedBox、Transform、Padding、Align等)組合成的Widget,因此它的功能能夠說集衆家之特性ide

Positioned

它是Stack佈局內進行定位的Widget,與CSS中 position:absolute; 類似佈局

Positioned 中定位 Container

在flutter中，Container容器通常默認是佔滿整個空間。當Positioned使用Container，會出現什麼狀況呢？post

代碼片斷

....
....
 @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Stack(
        children: <Widget>[
          Positioned(
          //主要分析的Container對象
            child: Container(
            //_keyRed 申明爲全局變量 GlobalKey _keyRed = GlobalKey();
            //用key綁定Container
              key: _keyRed,
              decoration: BoxDecoration(color: Colors.yellow),
              child: Row(
                children: <Widget>[
                ],
              ),
            ),
          ),
          Positioned(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              MaterialButton(
                elevation: 5.0,
                padding: EdgeInsets.all(15.0),
                color: Colors.grey,
                child: Text("Get Sizes"),
                onPressed: _getSizes,
              ),
              MaterialButton(
                elevation: 5.0,
                color: Colors.grey,
                padding: EdgeInsets.all(15.0),
                child: Text("Get Positions"),
                onPressed: _getPositions,
              ),
            ],
          )),
        ],
      ),
    );
    //獲取Positioned中Container渲染位置
  _getPositions() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final positionRed = renderBoxRed.localToGlobal(Offset.zero);
    print("POSITION of Red: $positionRed ");
  }
//獲取Positioned中Container大小
  _getSizes() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final sizeRed = renderBoxRed.size;
    print("SIZE of Red: $sizeRed");
  }
複製代碼

顯示效果

Positioned 中 Container的Color爲yellow，但在界面上並無顯示相應的界面，由於這時候的Container就如HTML中塊級元素佔滿整行但沒有高度，點擊按鈕 Get Sizes和Get Position來輸出Container位置和大小

I/flutter (27566): SIZE of Red: Size(360.0, 0.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 0.0)
複製代碼

給Container加上height: 50.0ui

I/flutter (27566): SIZE of Red: Size(360.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 0.0)
複製代碼

將Container定位到底部bottom:0

Container又消失了，加上 bottom:0 定位的數值後，就比如HTML中塊級元素被絕對定位position:absolute;默認寬高的數值爲0
print

I/flutter (27566): SIZE of Red: Size(0.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 542.0) 
複製代碼

給Container加width或者加子元素spa

....
....
//用key綁定Container
  key: _keyRed,
  decoration: BoxDecoration(color: Colors.yellow),
  child: Row(
    children: <Widget>[
        Text('222 '),
        Text('333'),
    ],
  ),
複製代碼

I/flutter (27566): SIZE of Red: Size(203.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 542.0) 
複製代碼

試試給Container加邊距 margin: EdgeInsets.only(bottom: 50.0,right: 10.0)

I/flutter (27566): SIZE of Red: Size(213.0, 100.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 492.0) 
// padding: EdgeInsets.only(top: 50.0,left: 10.0),`
I/flutter (27566): SIZE of Red: Size(213.0, 50.0)
I/flutter (27566): POSITION of Red: Offset(0.0, 542.0) 
複製代碼

margin的數值與width和height疊加
padding 只有left 和 right 與 width 疊加

那如何讓Container寬度鋪滿而且對齊底部

Align 代替 Positioned3d

Align(
    //對齊底部
    alignment: Alignment.bottomCenter,
    child: Container(
      key: _keyRed,
      decoration: BoxDecoration(color: Colors.yellow),
      child: Row(
        children: <Widget>[
          Text('222 '),
          Text('333'),
        ],
      ),
    ),
  ),
複製代碼

用Align容器讓Container的寬度鋪滿可是高度仍是默認爲0，因此增長子元素效果以下：code