1. <output id="5rrzn"></output>

        <dl id="5rrzn"><ins id="5rrzn"><strong id="5rrzn"></strong></ins></dl><dl id="5rrzn"><font id="5rrzn"><nobr id="5rrzn"></nobr></font></dl>
        1. 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容器一般默认是占满整个?#21344;洹?#24403;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中块?#23545;?#32032;占满整行但没有高度,点击按钮 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?#30001;?nbsp;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又消失了,?#30001;?nbsp;bottom:0 定位的数值后,就好比HTML中块?#23545;?#32032;被绝对定位 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技术大全”微信公众号


          足球外围投注app

              1. <output id="5rrzn"></output>

                <dl id="5rrzn"><ins id="5rrzn"><strong id="5rrzn"></strong></ins></dl><dl id="5rrzn"><font id="5rrzn"><nobr id="5rrzn"></nobr></font></dl>

                      1. <output id="5rrzn"></output>

                        <dl id="5rrzn"><ins id="5rrzn"><strong id="5rrzn"></strong></ins></dl><dl id="5rrzn"><font id="5rrzn"><nobr id="5rrzn"></nobr></font></dl>
                        1. 福建36选7开奖结果18068 时时彩计划 360彩票老快3遗漏 河北福彩排七中奖规则 新疆十一选五推荐号码预测 彩票走势图哪个网站好 福彩3d15278预测分析 天津快乐十分钟开奖走势图 幸运飞艇计划论坛 内蒙古11选5一定牛手机版 最精准的一码中特资料 东方6十1巨奖 2019两码中特 极速飞艇走势分析 微信彩票中了一等奖