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

问题描述

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

根据屏幕/窗口的大小，我希望横幅广告如下显示：

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

想象一下，视频的缩放比例正在改变窗口大小。

基本上：
如果外观比原始尺寸宽->在顶部和底部显示较少（放大）
如果长宽比原始高->在侧面显示较少（居中时会裁切）

我有些工作要做。当使窗口变宽时，它可以工作，但是当窗口变薄时，它只是开始将所有内容按比例缩小，因此无法保持完整的高度，而侧面的显示较少。

这是我正在进行的工作：

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

解决方法

使用 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'),)

,

您可以使用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');
          }
        }
      )
    ),);