如何在 Flutter 中“居中裁剪”一個 Widget？

Question

我有一個VideoPlayer小部件，它需要全屏顯示並適合源視頻的縱橫比。 為了實現這一點，我需要切掉視頻的頂部/底部或左側/右側。

我曾希望以下內容可以實現這一點，但我認為我必須錯誤地使用FittedBox因為它會導致我的VideoPlayer消失：

final Size size = controller.value.size;
return new FittedBox(
  fit: BoxFit.cover,
  child: new AspectRatio(
    aspectRatio: size.width / size.height,
    child: new VideoPlayer(controller)
  ),
);

誰能幫我解決這個問題？ 🙏

Answer 1

終於解決了。 有一些缺失的部分：

1. 我需要一個不受限制的OverflowBox ，這樣我的孩子就可以根據需要長大。
2. 我需要FittedBox的孩子來實際執行一個大小來阻止布局系統崩潰。
3. 現在我的小部件將在其邊界之外繪制，我們還希望在其中放置一個ClipRect以阻止這種情況發生。

final Size size = controller.value.size;
return new ClipRect(
  child: new OverflowBox(
    maxWidth: double.infinity,
    maxHeight: double.infinity,
    alignment: Alignment.center,
    child: new FittedBox(
      fit: BoxFit.cover,
      alignment: Alignment.center,
      child: new Container(
        width: size.width,
        height: size.height,
        child: new VideoPlayer(controller)
      )
    )
  )
);

Answer 2

從上述解決方案開始，我想出了這個：

final Size size = _controller.value.size;
return Container(
  color: Colors.lightBlue,
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.width,
  child: FittedBox(
           alignment: Alignment.center,
       fit: BoxFit.fitWidth,
       child: Container(
         width: size.width,
         height: size.height,
         child: VideoPlayer(_controller))),
      ),
)

內部Container為VideoPlayer內的Texture提供大小。

Answer 3

我知道這個問題很老，但我可以把它貼在這里，所以如果其他人找到它，他們會找到另一個解決方案。 所以基本上，如果你總是想要一張圖片覆蓋一個區域，但想要總是顯示圖片的中間（我猜是中心裁剪），請在圖像周圍創建一個大小框。 您可能會說它沒有響應或必須進行硬編碼。 只是從某事計算它。 我是這樣的：

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context)=>SizedBox(child: Image.asset("home.jpg",fit: BoxFit.cover,),width: isWide ? MediaQuery.of(context).size.width-350 : MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,);
}

在這里，我什至檢查“設備的分辨率”。 isWide 布爾值為真，如果 MediaQuery.orientation == 橫向。 如果是這樣，我在左側有一個 350px 的菜單，因此我可以計算 sizedbox 的剩余空間。 希望這有幫助！

Answer 4

我對此有很多問題，接受的答案並沒有為我解決。 我只是想讓背景圖像垂直適合並水平溢出。 這是我最終的做法：

OverflowBox(
    maxWidth: double.infinity,
    alignment: Alignment.center,
    child:
        Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
            UnconstrainedBox(
                constrainedAxis: Axis.vertical,
                child: Image.asset('images/menu_photo_1.jpg', fit: BoxFit.cover))
        ])
)