dart - 在页面之间切换时抖动的相机框架掉落

Question

我尝试将Flutter camera plugin(0.2.1)与PageView和BottomNavigationBar结合使用，但是每次切换页面时，都会跳过几帧并且UI冻结一秒钟。

对于这个示例，我简化了代码库:

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

void main() => runApp(new Pages());

class Pages extends StatefulWidget {
  @override
  _PagesState createState() => _PagesState();
}

class _PagesState extends State<Pages> {
  PageController _pageController;
  int _page = 0;

  @override
  void initState() {
    _pageController = new PageController();
    super.initState();
  }

  void navTapped(int page) {
    _pageController.animateToPage(page,
        duration: const Duration(milliseconds: 300), curve: Curves.ease);
  }

  void onPageChanged(int page) {
    setState(() {
      this._page = page;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: new Text("CameraTest"),
        ),
        body: PageView(
          children: <Widget>[Feed(), Camera(), Profile()],
          controller: _pageController,
          onPageChanged: onPageChanged,
        ),
        bottomNavigationBar: new BottomNavigationBar(
          items: [
            new BottomNavigationBarItem(
                icon: new Icon(Icons.home), title: new Text("Feed")),
            new BottomNavigationBarItem(
                icon: new Icon(Icons.camera), title: new Text("Capture")),
            new BottomNavigationBarItem(
                icon: new Icon(Icons.person), title: new Text("Profile"))
          ],
          onTap: navTapped,
          currentIndex: _page,
        ),
      ),
    );
  }
}

class Camera extends StatefulWidget {
  @override
  _CameraState createState() => _CameraState();
}

class _CameraState extends State<Camera> {
  List<CameraDescription> _cameras;
  CameraController _controller;

  initCameras() async{
    _cameras = await availableCameras();
    _controller = new CameraController(_cameras[0], ResolutionPreset.medium);
    await _controller.initialize();
    setState(() {});
  }

  @override
  void initState() {
    initCameras();
    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_controller == null || !_controller.value.isInitialized) {
      return new Center(
        child: new Text("Waiting for camera...", style: TextStyle(color: Colors.grey),),
      );
    }
    return new AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: new CameraPreview(_controller));
  }
}

//just placeholder widgets

class Feed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: new Text("Feed"));
  }
}

class Profile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: new Text("Profile"));
  }
}

基本上有三页，中间一页显示摄像机预览
( how it's supposed to look)，但是在切换到相机并从相机切换回 this时会发生。这确实很烦人，因为它破坏了用户体验，并且一点也不流畅。当调用initCameras()或放置摄像机 Controller 时，会出现延迟。我尝试将initCameras()与FutureBuilder结合使用，后者根本没有帮助，并在单独的隔离中运行该方法，但是似乎仅允许在主要隔离上进行平台调用。对我来说有点奇怪，因为打开相机并不需要太多的cpu功能，因此异步方法应该没问题。我知道这里有一个 image-picker plugin，但是我想直接在应用程序中进行预览。我也考虑过在应用程序启动时运行initCameras()，但是当用户仅使用应用程序的另一个页面时，我并不想一直运行相机。

是否有任何方法可以改善initCameras()或使用其他实现来解决卡顿问题？我什至都不在乎是否需要一秒钟来加载，但是我不希望任何帧跳越。

我遵循了相机页面底部的 example。

在物理设备以及不同Android版本上的仿真器上进行了测试。

Answer 1

如果要在与将图像路径存储为全局变量不同的页面中使用图像路径，请在所需的位置使用它。