線上直播原始碼，flutter 溢位幾種佈局方案

線上直播原始碼，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 溢位幾種佈局方案，更多內容歡迎關注之後的文章