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相应的属性。或许还有其他更适合的布局方式，欢迎讨论。