flutter相机预览

  • Z时代
  • 2024-01-10
  • 分类：问答

我是Flutter和Dart的新手，所以请多多包涵。我正在尝试使用Flutter通过Camera

Plugin显示摄像机预览，但是有两个问题。1）预览被拉伸，因此看起来很奇怪。2）我想BottomNavigationBar在预览下方显示一个，但是“摄像机预览”使用了所有屏幕空间。

我初始化相机并打开预览：

@override
Widget build(BuildContext context) {
  if (!_isReady) return new Container();
  if (!controller.value.initialized) return new Container();
  return new CameraPreview(controller);
}

1）这是我调用的类的构建方法_CameraWidgetState。如何使此预览看起来不那么拉伸？

2）为了不让CameraWidget占用所有空间，我尝试将它放到Scaffold没有运气的内部：

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(
    child: new CameraWidget(),
  ),
  bottomNavigationBar: new BottomNavigationBar(
    items: [
      new BottomNavigationBarItem(
          icon: new Icon(Icons.camera), title: new Text("Left")),
      new BottomNavigationBarItem(
          icon: new Icon(Icons.favorite),
          title: new Text("Right"))
    ],
  ),
);
}

任何想法或帮助表示赞赏！

回答：

这解决了问题，但是也可能有更好的解决方案。（感谢@ user1462442从上面的评论。）

@override
Widget build(BuildContext context) {
 if (!_isReady) return new Container();
 if (!controller.value.initialized) return new Container();
 return new Scaffold(
   body: new Container(
     child: new AspectRatio(
       aspectRatio: controller.value.aspectRatio,
       child: new CameraPreview(controller),
     ),
   ),
   floatingActionButton: new FloatingActionButton(
     onPressed: _isReady ? capture : null,
     child: const Icon(
       Icons.camera,
       color: Colors.white,
     ),
   ),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
 );
}

以上是 flutter相机预览 的全部内容， 来源链接： utcz.com/qa/413542.html

回到顶部