日常记录.
业务开发中有一个需求,开始直播前有一个全屏预览直播页面,设置相关的直播信息,页面背景是当前摄像头的内容.使用了flutter的camera插件来获取相机实时内容.
此处集成完插件后,出现一个问题,相机内容在我的小屏幕手机(iPhone 6s)上内容显示正常,在刘海屏内显示人物被拉伸,安卓大屏机也是.
原先显示摄像头内容的代码如下:
return AspectRatio(
aspectRatio: _cameraController.value.aspectRatio,
child: Container(
color: Colors.black,
child: Center(child: CameraPreview(_cameraController)),
),
);
开始用了AspectRatio组件,根据cameraController的previewsize长宽比aspectRatio设置要显示的内容.大屏手机长宽比太大,导致显示的内容被拉伸.
此处在修复这个问题中使用了Transform组件,这个组件的作用Creates a widget that transforms its child.也就是改变它的字组件的缩放比例.
主要是用到了他的scale方法
Transform.scale({
Key? key,
required double scale, //要设置的尺寸
this.origin, //原来的尺寸
this.alignment = Alignment.center, //缩放的原点
this.transformHitTests = true,
Widget? child, //要缩放的组件
}) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
super(key: key, child: child);
修改后的代码如下:
final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
return Stack(children: <Widget>[
Center(
child: Transform.scale(
scale: _cameraController.value.aspectRatio / deviceRatio,
child: AspectRatio(
aspectRatio: _cameraController.value.aspectRatio,
child: Center(child: CameraPreview(_cameraController)),
),
),
),
]);
