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

发布时间 2023-04-10 14:13:53作者: 云豹科技-苏凌霄

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

方案一 SizedOverflowBox

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

 


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

方案二 transform

 

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

 

方案三 FitteBbox

 

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

 

布局解说

 

FittedBox 放飞 child ,高度 150

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

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

 

方案四 Align

 

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

 

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