表单执行时会重建 Imagepicker，丢失所选图像
Posted
技术标签:
【中文标题】表单执行时会重建 Imagepicker，丢失所选图像【英文标题】：Imagepicker is rebuilt when form does, losing the selected image 【发布时间】：2021-05-31 05:58:25 【问题描述】：我正在使用一个无状态屏幕，其中包含两个有状态小部件、一个图像选择器和一个包含许多字段的表单。当我打开键盘时，如果我之前选择了一个图像，它就会消失并且整个图像选择器小部件被重新初始化。
这意味着提交图像的唯一方法是在键盘关闭时选择它并且永远不要重新打开它。我已经尝试设置密钥并使用我在这里找到的其他解决方案，但没有任何效果。我无法完全理解这种行为，当然，即使我打开和关闭键盘，我也需要图像留在那里。
一个快速的解决方案可以简单地将图像选择器移动到表单本身中，但我更愿意将它们保存在不同的小部件中。我真的需要了解我错过了什么。
主页：
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),
topLeft: Radius.circular(8),
bottomRight: Radius.circular(8),
topRight: Radius.circular(8),
),
child: Image.file(
_storedImage,
fit: BoxFit.cover,
width: double.infinity,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 8),
child: ButtonWideOutlined(
action: _takePicture,
text: 'Select image',
),
),
],
);
表格只是一个标准表格，这个问题已经太长了。我真的很感激任何建议。我唯一知道的是每次打开键盘时都会在图像选择器中调用 initState（因此表单状态会发生变化）。
【问题讨论】：
【参考方案1】：当抽屉或软键盘打开时屏幕状态发生变化，有时构建方法会自动重新加载，请查看link了解更多信息。
构建方法的设计方式应该是纯的/没有副作用。这是因为许多外部因素都可以触发新的小部件构建，例如：
Route pop/push 屏幕大小调整，通常是由于键盘外观或方向改变 父小部件重新创建了它的子小部件一个 InheritedWidget 小部件所依赖的（Class.of(context) 模式）改变 这意味着构建方法不应触发 http调用或修改任何状态。
这与问题有什么关系？
您面临的问题是您的构建方法有副作用/不纯，使得无关的构建调用很麻烦。
您应该使您的构建方法纯粹，而不是阻止构建调用，以便可以随时调用它而不会受到影响。
在您的示例中，您需要将小部件转换为 StatefulWidget，然后将该 HTTP 调用提取到您的 State 的 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",
builder: (context, snapshot)
return Column(
children: <Widget>[
Text(snapshot.data),
subtree,
],
);
,
);
在此示例中，当 StreamBuilder 收到新值通知时，即使 StreamBuilder/Column 进行了重建，子树也不会重建。这是因为，由于关闭，MyWidget 的实例没有改变。
这种模式在动画中被大量使用。典型用途是 AnimatedBuilder 和所有过渡，例如 AlignTransition。
您也可以将子树存储到您的类的字段中，但不推荐使用，因为它会破坏热重载功能。
【讨论】：
“最终”方法有效，即使我必须采取一些技巧才能使其发挥作用。我会发布一个详细的答案，但你的提示成功了，这应该是被接受的【参考方案2】：我从 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',
),
],
),
),
);
我不确定这是否是最佳做法，但它可以工作，并且无论如何图像选择器都会保持其状态。
【讨论】：
以上是关于表单执行时会重建 Imagepicker，丢失所选图像的主要内容，如果未能解决你的问题，请参考以下文章
在执行异步回发页面时会丢失 gridviewscroll 脚本？