阅读 881

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…
关注下面的标签,发现更多相似文章
评论