关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

Flutter的AspectRatio控件实现视频播放、图片播放按照长宽比缩放

发布时间:2023-06-26 21:00:02

AspectRatio控件的作用

AspectRatio小部件用于调整其子级小部件的宽高比。它将其子级小部件的宽度调整为给定的宽度,并根据宽度计算出相应的高度,以保持指定的宽高比。


使用场景

调整容器的宽高比: 当您希望在布局中使用容器或小部件时,以特定的宽高比显示内容时,可以使用AspectRatio。

例如,您可能想要在页面上显示一个具有特定宽高比的视频播放器区域。

用法:

AspectRatio小部件具有两个必需的属性:


aspectRatio:定义宽高比的浮点值。它是宽度与高度之间的比率。例如,aspectRatio: 16 / 9表示宽度是高度的16/9倍。

child:要调整宽高比的子级小部件。

下面是一个简单的示例,演示如何使用AspectRatio小部件来创建一个具有特定宽高比的容器:

AspectRatio(  aspectRatio: 16 / 9,  child: Container(  color: Colors.blue,  child: Center(  child: Text(  'AspectRatio Container',  style: TextStyle(  color: Colors.white,  fontSize: 24,  ),  ),  ),  ), )

   

在上述示例中,AspectRatio的宽高比被设置为16/9,它的子级小部件是一个蓝色容器,容器内居中显示文本。由于指定了宽高比,AspectRatio将根据给定的宽度计算出相应的高度,以保持16/9的宽高比。


注意:AspectRatio小部件将尽量适应其父级约束的大小,如果父级约束不允许按照指定的宽高比进行调整,则可能会出现剪裁或溢出的情况。


用AspectRatio来限制视频播放窗口的大小

 Widget build(BuildContext context) {  return Scaffold(  backgroundColor: Colors.black,  body: Stack(  children: [  Align(  alignment: Alignment.topLeft,  child: AspectRatio(  aspectRatio: _videoPlayerController.value.aspectRatio,  child: Chewie(  controller: _chewieController,  ),  ),  ),  ],  ),  );  }

/template/Home/leiyu/PC/Static