在线直播源码,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 溢出几种布局方案,更多内容欢迎关注之后的文章