widget - Flutter:小部件和导航的生命周期
问题描述
我写了一个颤振插件,它显示相机预览和扫描条形码。我有一个Widget
调用,当检测到条形码时ScanPage
显示CameraPreview
并导航到新的。Route
问题:
当我将新路线 ( SearchProductPage
) 推送到导航堆栈时,CameraController
继续检测条形码。当从屏幕上删除时,我需要打电话stop()
给我。当用户返回到.CameraController
ScanPage
start()
ScanPage
我尝试
了什么:CameraController
实现WidgetsBindingObserver
并对didChangeAppLifecycleState()
. 当我按下主页按钮时,这非常有效,但当我将新按钮推Route
送到导航堆栈时则不行。
问题:在 iOS 或Android上,Flutter 中
是否有对应的viewDidAppear()
和?如果没有,我该如何启动和停止我的,以便当另一个小部件位于导航堆栈顶部时它停止扫描条形码?viewWillDisappear()
onPause()
onResume()
Widgets
CameraController
class ScanPage extends StatefulWidget {
ScanPage({ Key key} ) : super(key: key);
@override
_ScanPageState createState() => new _ScanPageState();
}
class _ScanPageState extends State<ScanPage> {
//implements WidgetsBindingObserver
CameraController controller;
@override
void initState() {
controller = new CameraController(this.didDetectBarcode);
WidgetsBinding.instance.addObserver(controller);
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}
//navigate to new page
void didDetectBarcode(String barcode) {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext buildContext) {
return new SearchProductPage(barcode);
},
)
);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(controller);
controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!controller.value.initialized) {
return new Center(
child: new Text("Lade Barcodescanner..."),
);
}
return new CameraPreview(controller);
}
}
编辑:
/// Controls a device camera.
///
///
/// Before using a [CameraController] a call to [initialize] must complete.
///
/// To show the camera preview on the screen use a [CameraPreview] widget.
class CameraController extends ValueNotifier<CameraValue> with WidgetsBindingObserver {
int _textureId;
bool _disposed = false;
Completer<Null> _creatingCompleter;
BarcodeHandler handler;
CameraController(this.handler) : super(const CameraValue.uninitialized());
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
switch(state){
case AppLifecycleState.inactive:
print("--inactive--");
break;
case AppLifecycleState.paused:
print("--paused--");
stop();
break;
case AppLifecycleState.resumed:
print("--resumed--");
start();
break;
case AppLifecycleState.suspending:
print("--suspending--");
dispose();
break;
}
}
/// Initializes the camera on the device.
Future<Null> initialize() async {
if (_disposed) {
return;
}
try {
_creatingCompleter = new Completer<Null>();
_textureId = await BarcodeScanner.initCamera();
print("TextureId: $_textureId");
value = value.copyWith(
initialized: true,
);
_applyStartStop();
} on PlatformException catch (e) {
value = value.copyWith(errorDescription: e.message);
throw new CameraException(e.code, e.message);
}
BarcodeScanner._channel.setMethodCallHandler((MethodCall call){
if(call.method == "barcodeDetected"){
String barcode = call.arguments;
debounce(2500, this.handler, [barcode]);
}
});
_creatingCompleter.complete(null);
}
void _applyStartStop() {
if (value.initialized && !_disposed) {
if (value.isStarted) {
BarcodeScanner.startCamera();
} else {
BarcodeScanner.stopCamera();
}
}
}
/// Starts the preview.
///
/// If called before [initialize] it will take effect just after
/// initialization is done.
void start() {
value = value.copyWith(isStarted: true);
_applyStartStop();
}
/// Stops the preview.
///
/// If called before [initialize] it will take effect just after
/// initialization is done.
void stop() {
value = value.copyWith(isStarted: false);
_applyStartStop();
}
/// Releases the resources of this camera.
@override
Future<Null> dispose() {
if (_disposed) {
return new Future<Null>.value(null);
}
_disposed = true;
super.dispose();
if (_creatingCompleter == null) {
return new Future<Null>.value(null);
} else {
return _creatingCompleter.future.then((_) async {
BarcodeScanner._channel.setMethodCallHandler(null);
await BarcodeScanner.disposeCamera();
});
}
}
}
解决方案
controller
在我导航到另一个页面并重新启动它之前,我最终停止了它,当pop()
被调用时。
//navigate to new page
void didDetectBarcode(String barcode) {
controller.stop();
Navigator.of(context)
.push(...)
.then(() => controller.start()); //future completes when pop() returns to this page
}
另一种解决方案是将打开的maintainState
属性设置为.route
ScanPage
false
推荐阅读
- r - 如何在换行符处终止我的模式?
- javascript - 如何在 React 中提交表单后消除对输入的关注
- laravel - Laravel 唯一的验证规则,除了不工作
- python - 无法在 windows 的 virtualenv 中安装 psycopg2
- c++ - 为什么下面的代码块给出输出“ZZZ(一些垃圾值)”而不是“ZZ(一些垃圾值)”
- android - 如何在 Firebase 远程配置中编写 OR 规则/条件?
- git - GitVersion 配置不递增
- java - 如何使扫描仪输入与问题在同一行?
- typescript - 打字稿如何为对象定义通用方法,如对象
- ramda.js - ramda set lensPath on array item 将数组更改为对象