Flutter重新运行内部StatefulWidget的initState函数



我有一个外部StatefulWidget和一个内部StatefulWidget。当我在外部Widget上使用setState((时,内部Widget的构建函数会重新运行。有没有一种方法也可以触发initState方法?这是内部小工具:

class _Image extends StatefulWidget {
final String _imageId;
_Image(this._imageId);
@override
State createState() => new _ImageState();
}
class _ImageState extends State<_Image> {
ImageResponse image;
@override
void initState() {
super.initState();
// fetch image using the provided imageId
fetchImage(widget._imageId).then((ImageResponse imageResponse) {
setState(() {
image = imageResponse;
});
});
}

@override
Widget build(BuildContext context) {
return new Container(
width: 350.0,
height: 350.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color: Color(0xffFFFFFF),
image: image != null ? DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(image.downloadURL)
) : null,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.25),
spreadRadius: 0,
blurRadius: 4,
offset: Offset(0, 4)
)
]
),
);
}
} 

如您所见,这是一个非常简单的小工具。您可以提供一个imageId,Widget将获取该图像的数据并显示它。现在,我希望在更新外部Widget get时,不仅重新运行构建函数get,还重新运行initState函数,以便可以获取该imageId的新图像数据。

您可以使用FutureBuilder使用图像加载器显示视图,直到加载图像为止。每次启动此小部件时,它都会调用图像。

class _Image extends StatefulWidget {
final String _imageId;
_Image(this._imageId);
@override
State createState() => new _ImageState();
}
class _ImageState extends State<_Image> {
ImageResponse image;
@override
void initState() {
super.initState();
}

Future<ImageResponse> loadImage() async {
ImageResponse res = await fetchImage(widget._imageId);
return res;
}

@override
Widget build(BuildContext context) {
return FutureBuilder(
future: loadImage(),
builder: (context, snapshot) {
if (snapsnot.connectState==ConnectionState.done) {
return new Container(
width: 350.0,
height: 350.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color: Color(0xffFFFFFF),
image: image != null ? DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(snapshot.data.downloadURL)
) : null,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.25),
spreadRadius: 0,
blurRadius: 4,
offset: Offset(0, 4)
)
]
),
);
} else {
// paint whatever you want to the screen while the image loads. I'm using an empty container as an example
return Container();
}
}
)


}
} 

最新更新