如何根据 window 大小显示更多或更少的元素？

Question

我想要一个横幅小部件，可能是一个 VideoPlayer（来自 video_player 插件）或者只是一张图片。

根据 screen/window 的大小，我希望我的横幅如下所示：

https://i.imgur.com/YADZSrV.mp4

假设视频中的缩放是 window 尺寸变化。

基本上：
如果宽高比原来的宽 -> 在顶部和底部显示较少（有点放大）
如果 aspect 比原来的高 -> 在侧面显示较少（居中时有点裁剪）

我有一些东西可以部分工作。它在 window 变宽时有效，但当它变得更细时，它只是开始缩小所有内容，它不会保持完整高度，同时在侧面显示更少。

这是我正在进行的工作：

return ClipRect(
  child: OverflowBox(
    maxWidth: double.infinity,
    maxHeight: double.infinity,
    child: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: VideoPlayer(_controller),
    ),
  ),
);

Answer 1

您可以使用 LayoutBuilder 获取其内容的大小并相应地以不同方式呈现： https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

在你的情况下，它会是这样的：

  return ClipRect(
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: double.infinity,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constaints.bigger.width > constaints.bigger.height) {
            return Text('More width than height');
          }
          else {
            return Text('More height than width');
          }
        }
      )
    ),
  );

Answer 2

使用 FittedBox 小部件和 BoxFit 枚举可以很容易地解决这个问题。

FittedBox(
  fit: BoxFit.cover,
  child: Container(
    width: 960,
    height: 360,
    child: VideoPlayer(_controller),
  ),
)

使用 VideoPlayer 小部件作为 Container 的子项，我将大小设置为视频的原始大小。

使用图像的示例：

FittedBox(
  fit: BoxFit.cover,
  child: Image(
    image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
  ),
)

如何根据 window 大小显示更多或更少的元素？

How do I show more or less of an element depending on window size?

flutter

responsive