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

终于解决了。有一些缺失的部分：

我需要一个没有限制的OverflowBox，以便我的孩子可以根据需要增长。
我需要FittedBox的孩子实际执行一个大小来阻止布局系统崩溃。
现在我的小部件将在其边界之外绘制，我们还想在其中放置一个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提供Texture内部VideoPlayer的大小。

Answer 3

我对此有很多问题，被接受的答案并没有为我解决。我只是想让背景图像垂直适合而水平溢出。这是我最终完成的方式：

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))
        ])
)

Answer 4

我知道这个问题很旧，但是imma将其张贴在这里，因此如果其他人找到了，他们会找到另一个解决方案。因此，基本上，如果您始终希望图片覆盖某个区域，但又想始终显示图片的中间（我想是中心裁剪），请在图片周围创建一个sizebox。您可能会说它没有响应或必须进行硬编码。只是从某事计算出来。我确实是这样：

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,);
}

在这里，我什至检查“设备的分辨率”。如果MediaQuery.orientation == landscape，则isWide布尔值为true。如果是这样，我在左侧有一个350px的菜单，因此我可以计算出sizebox的剩余空间。希望这会有所帮助！

你怎么能把作物集中在一起？＃34;颤抖的小工具？

4 个答案: