日常記錄.
業(yè)務(wù)開發(fā)中有一個需求,開始直播前有一個全屏預(yù)覽直播頁面,設(shè)置相關(guān)的直播信息,頁面背景是當前攝像頭的內(nèi)容.使用了flutter的camera插件來獲取相機實時內(nèi)容.
此處集成完插件后,出現(xiàn)一個問題,相機內(nèi)容在我的小屏幕手機(iPhone 6s)上內(nèi)容顯示正常,在劉海屏內(nèi)顯示人物被拉伸,安卓大屏機也是.
原先顯示攝像頭內(nèi)容的代碼如下:

return AspectRatio(
        aspectRatio: _cameraController.value.aspectRatio,
        child: Container(
          color: Colors.black,
          child: Center(child: CameraPreview(_cameraController)),
        ),
      );

開始用了AspectRatio組件,根據(jù)cameraController的previewsize長寬比aspectRatio設(shè)置要顯示的內(nèi)容.大屏手機長寬比太大,導(dǎo)致顯示的內(nèi)容被拉伸.

此處在修復(fù)這個問題中使用了Transform組件,這個組件的作用Creates a widget that transforms its child.也就是改變它的字組件的縮放比例.
主要是用到了他的scale方法

Transform.scale({
    Key? key,
    required double scale, //要設(shè)置的尺寸
    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)),
                ),
              ),
            ),
          ]);

參考:https://www.it1352.com/2087528.html