如何在 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))
        ])
)