Flutter 佈局篇 Positioned 和 Container

簡介

Container

它是由眾多容器類Widget(DecoratedBox、ConstrainedBox、Transform、Padding、Align等)組合成的Widget,所以它的功能可以說集眾家之特性

Positioned

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

Positioned 中定位 Container

在flutter中，Container容器一般預設是佔滿整個空間。當Positioned使用Container，會出現什麼情況呢？

• 程式碼片段

....
....
 @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.0

• print

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或者加子元素

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

• print

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)

• print

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 代替 Positioned

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

用Align容器讓Container的寬度鋪滿但是高度還是預設為0，所以增加子元素效果如下：

總結

• 可以使用Stack的特性進行定位佈局，又能完美使用Container相應的屬性。或許還有其他更適合的佈局方式，歡迎討論。
• 獲取容器大小和位置的相關文章請移步我的譯文
• juejin.im/post/5c7de3…