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技術大全”微信公眾號


青海快三开奖信息