在线直播源码，flutter 溢出几种布局方案

在线直播源码，flutter 溢出几种布局方案

方案一 SizedOverflowBox

要实现这样的效果很容易想到的就是 SizedOverflowBox,复制下面的代码到 main.dart,运行后查看效果。

 

1	<br>Container(<br>   color: Colors.green[400],<br>   width: 100,<br>   height: 100,<br>   alignment: Alignment.topCenter,<br>   child: SizedOverflowBox(<br>     size: Size.zero,<br>     child:<br>         Container(color: Colors.blue, width: 50, height: 50),<br>   )))));<br>

​

方案二 transform

 

1	Container(<br>    color: Colors.green[400],<br>    width: 100,<br>    height: 100,<br>    alignment:Alignment.topCenter,<br>    child:Transform.translate(<br>      offset:const Offset(0,-25),<br>      child:<br>         Container(color: Colors.blue, width: 50, height: 50))<br>)<br>

 

方案三 FitteBbox

 

1

Container(<br>    color: Colors.green[400],<br>    width: 100,<br>    height: 100,<br>    child:FittedBox(<br>      fit: BoxFit.none,<br>      child:Container(<br>        alignment: Alignment.topCenter,<br>         height: 150,<br>         child:Container(color: Colors.blue, width: 50, height: 50)))<br>    )<br>

 

布局解说

 

FittedBox 放飞 child ，高度 150

FittedBox 默认居中摆放 child ，向上溢出 25。

FittedBox’ child 在顶部居中 blue container ，最终效果就是向上溢出 20，左右居中。

 

方案四 Align

 

1	Container(<br>      color: Colors.green[400],<br>      width: 100,<br>      height: 100,<br>      alignment: Alignment(0, -2),<br>      child: Container(color: Colors.blue, width: 50, height: 50),<br>)

 

 以上就是 在线直播源码，flutter 溢出几种布局方案，更多内容欢迎关注之后的文章