如何解决图像选择器在表单执行时重建，丢失所选图像
我使用的是一个无状态屏幕，其中包含两个有状态小部件、一个图像选择器和一个包含多个字段的表单。当我打开键盘时，如果我之前选择了一个图像，它会消失并且整个图像选择器小部件会重新初始化。
这意味着提交图像的唯一方法是在键盘关闭时选择它并且永远不要重新打开它。我已经尝试过设置密钥并使用我在这里找到的其他解决方案，但没有任何效果。我无法完全理解这种行为，当然，即使我打开和关闭键盘，我也需要图像留在那里。
一个快速的解决方案可能是简单地在表单本身中移动图像选择器，但我更愿意将它们保留在不同的小部件中。我真的需要了解我错过了什么。
主页：
class ProductAddScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final GlobalKey<ProductAddUpdateFormState> _keyForm = GlobalKey();
final GlobalKey<ImageInputProductState> _keyImage = GlobalKey();
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,),TitleHeadline(
title: 'Add',backBtn: true,trailingBtn: Icons.info,trailingBtnAction: () =>
Navigator.of(context,rootNavigator: true).push(
MaterialPageRoute(builder: (context) => InfoScreen()),const SizedBox(height: 8),ImageInputProduct(key: _keyImage),ProductAddUpdateForm(key: _keyForm),const SizedBox(height: 16),ButtonWide(
action: () => _keyForm.currentState.submit(
screenContext: context,newImage: _keyImage.currentState.storedImage),text: 'Confirm',],);
}
}
图像选择器：
class ImageInputProduct extends StatefulWidget {
final String preImage;
ImageInputProduct({Key key,this.preImage = ''}) : super(key: key);
@override
ImageInputProductState createState() => ImageInputProductState();
}
class ImageInputProductState extends State<ImageInputProduct> {
File _storedImage;
// Get the selected file
File get storedImage {
return _storedImage;
}
// Take an image from camera
Future<void> _takePicture() async {
final picker = ImagePicker();
final imageFile = await picker.getImage(
source: ImageSource.camera,maxHeight: 1280,maxWidth: 1280,);
setState(() {
_storedImage = File(imageFile.path);
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 130,width: 200,alignment: Alignment.center,decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),border: Border.all(
width: 1,color: Colors.black12,child: _storedImage == null
? widget.preImage.isEmpty
? Column(
mainAxisAlignment: MainAxisAlignment.center,children: [
Icon(
Icons.image,color:
Theme.of(context).primaryColor.withOpacity(0.4),size: 48,Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,vertical: 4,child: Text(
'No image selected',textAlign: TextAlign.center,style: Theme.of(context).textTheme.bodyText2,)
],)
: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(8),topLeft: Radius.circular(8),bottomRight: Radius.circular(8),topRight: Radius.circular(8),child: Image.network(
widget.preImage,fit: BoxFit.cover,width: double.infinity,)
: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(8),child: Image.file(
_storedImage,Padding(
padding: const EdgeInsets.symmetric(horizontal: 48,vertical: 8),child: ButtonWideOutlined(
action: _takePicture,text: 'Select image',);
}
}
表格只是标准表格，这个问题已经太长了。我真的很感激任何建议。我唯一知道的是，每次打开键盘时都会在图像选择器中调用 initState（因此表单状态会发生变化）。
解决方法
当抽屉或软键盘打开时屏幕状态发生变化，有时构建方法会自动重新加载，请查看此link了解更多信息。
构建方法的设计方式应该是纯粹的/没有副作用。这是因为许多外部因素可以触发新的小部件构建，例如：
Route pop/push 屏幕调整大小，通常是由于键盘外观或方向变化父小部件重新创建其子部件小部件依赖的 InheritedWidget (Class.of(context) pattern) 更改这意味着构建方法不应触发 http调用或修改任何状态。
这与问题有什么关系？
您面临的问题是您的构建方法有副作用/不纯，使无关的构建调用变得麻烦。
与其阻止构建调用，您应该使构建方法纯，以便可以随时调用而不会产生影响。
在您的示例中，您将小部件转换为 StatefulWidget，然后将该 HTTP 调用提取到您的状态的 initState：
class Example extends StatefulWidget {
@override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
Future<int> future;
@override
void initState() {
future = Future.value(42);
super.initState();
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: future,builder: (context,snapshot) {
// create some layout here
},);
}
}
我已经知道了。我来这里是因为我真的很想优化重建
还可以使小部件能够重建，而无需强迫其子部件也进行构建。
当小部件的实例保持不变时； Flutter 故意不会重建孩子。这意味着您可以缓存部分小部件树以防止不必要的重建。
最简单的方法是使用 dart const 构造函数：
@override
Widget build(BuildContext context) {
return const DecoratedBox(
decoration: BoxDecoration(),child: Text("Hello World"),);
}
感谢 const 关键字，即使构建被调用数百次，DecoratedBox 的实例也将保持不变。
但是您可以手动实现相同的结果：
@override
Widget build(BuildContext context) {
final subtree = MyWidget(
child: Text("Hello World")
);
return StreamBuilder<String>(
stream: stream,initialData: "Foo",snapshot) {
return Column(
children: <Widget>[
Text(snapshot.data),subtree,],);
},);
}
在此示例中，当 StreamBuilder 收到新值通知时，即使 StreamBuilder/Column 重建子树也不会重建。这是因为，由于关闭，MyWidget 的实例没有改变。
这种模式在动画中被大量使用。典型用途是 AnimatedBuilder 和所有过渡，例如 AlignTransition。
你也可以将子树存储到你的类的一个字段中，虽然不太推荐，因为它破坏了热重载功能。
,我从 abbas jafary 的建议开始，并尝试重构屏幕以不自动重建图像选择器。我无法在没有一些侧面更改的情况下在变量中初始化它，因为我将密钥传递给图像选择器本身。最终代码如下：
class ProductAddScreen extends StatelessWidget {
static final GlobalKey<ProductAddUpdateFormState> _keyForm = GlobalKey();
static final GlobalKey<ImageInputProductState> _keyImage = GlobalKey();
final imageInput = ImageInputProduct(key: _keyImage);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,),TitleHeadline(
title: 'Add',backBtn: true,trailingBtn: Icons.info,trailingBtnAction: () =>
Navigator.of(context,rootNavigator: true).push(
MaterialPageRoute(builder: (context) => InfoScreen()),const SizedBox(height: 8),imageInput,ProductAddUpdateForm(key: _keyForm),const SizedBox(height: 16),ButtonWide(
action: () => _keyForm.currentState.submit(
screenContext: context,newImage: _keyImage.currentState.storedImage),text: 'Confirm',);
}
}
我不确定这是最佳做法，但它确实有效，而且无论如何图像选择器都会保持其状态。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。