【问题标题】:Flutter Camera Preview颤振相机预览
【发布时间】:2018-04-08 18:29:53
【问题描述】:

我是 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"))
    ],
  ),
);
}

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

【问题讨论】:

  • 1) 如果您希望camerPreview 为固定大小,请将其包裹在容器小部件周围 2) 容器小部件 - 相同的答案docs.flutter.io/flutter/widgets/Container-class.html
  • 谢谢!将其包装在容器中并进一步包装在 AspectRatio 中有效。
  • 酷,对不起,我有点懒得给你写答案
  • Thomas ...您能否详细说明(即显示答案)? @user1462443 说要将相机 包裹 一个容器小部件。你说你把它包装在 一个 Container Widget 中。
  • @lilbiscuit 我在下面添加了我的解决方案。我希望这能回答这个问题。

标签: dart flutter


【解决方案1】:

这解决了问题,但也可能有更好的解决方案。 (感谢上面 cmets 的 @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,
 );
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-02-19
    • 2021-06-24
    • 2019-01-30
    • 1970-01-01
    • 2018-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多