Flutter 布局篇 Positioned 和 Container

PHP技术大全 / 2019-03-15 15:03:49

它是由众多容器类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: [
Positioned(
//主要分析的Container对象
child: Container(
//_keyRed 申明为全局变量 GlobalKey _keyRed = GlobalKey();
//用key绑定Container
key: _keyRed,
decoration: BoxDecoration(color: Colors.yellow),
child: Row(
children: [
],
),
),
),
Positioned(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
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: [
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: [
Text('222 '),
Text('333'),
],
),
),
),
复制代码

用Align容器让Container的宽度铺满但是高度还是默认为0,所以增加子元素效果如下:


干货分享

敬请关注“PHP技术大全”微信公众号