在内容图像视图可以使用 PhotoView 来显示内容图像，我们先给项目安装一个包，在终端，项目所在目录的下面执行 flutter pub add photo_view ，给项目安装一个叫 photo_view 的包，它里面有我们需要用的 PhotoView，还有后面会用到的 PhotoViewGallery。

安装好以后，在项目里创建一个文件，放在 lib/post/show/components 里面，名字是 post_show_media_zoomable.dart，在文件里定义一个小部件，名字是 PostShowMediaZoomable ，添加一个属性，类型是 Post，名字是 post，再添加一个构造方法 PostShowMediaZoomable，给它一个参数，this.post。

小部件里可以用一个 SliverFillRemaining ，它的 child 是个 Center 小部件，然后再用一个 PhotoView ，这个小部件来自刚才我们安装的 photo_view 这个包。

使用它的时候要提供一个 imageProvider，值是要显示的图像，这里可以用 imageProvider 表示，再添加一个 loadingBuilder ，值是 loadingBuilder 。它的值是一个加载图像的时候显示的小部件。

在上面准备一下这两样东西，先声明一个 fileId，值是 post.file?.id ，根据这个文件 id 再准备一下对应的图像地址，声明一个 imageUrl ，值是 AppConfig.apiBaseUrl ，再加上 files 然后是 $fileId ，斜线 serve ，再用 size 查询符设置一下需要的尺寸，设置成 large。

下面声明一个 imageProvider ，值是一个 NetworkImage，把网络图像地址交给它，这里就是 imageUrl 。

再声明一个 loadingBuilder，这个构建器有两个参数，context 还有一个 event 。在这个 event 里面有一些需要用到的东西，声明一个 loaded，表示已经加载的字节数，它的值就是 event? 里的 cumulativeBytesLoaded。再声明一个 total，表示总共的大小，值是 event? 里的 expectedTotalBytes 。

用这两个值计算出当前加载的进度，声明一个 double 类型的 value，值可以判断一下 event 是不是等于 null ，如果是就让 value 等于 0，不是的话就让它等于 loaded! / total! 。

下面声明一个进度指示器小部件，名字是 indicator，新建一个 CircularProgressIndicator ，把 value 参数的值设置成上面准备好的 value 。

最后再组织一下这个 loadingBuilder 返回的小部件，返回一个 Center，它的 child 是个 Container，用 width 把宽度设置成 24，再把 height 高度设置成 24 ，它的 child 就是这个 indicator 。

post_image_view

打开 post_image_view，修改一下 CustomScrollView，给它提供一个 physics ，值可以新建一个 NeverScrollableScrollPhysics ，暂时不允许滚动这个滚动视图。

在 slivers 里面，去掉之前添加的这些东西，换成一个 PostShowMediaZoomable ，提供一个 widget.post 参数。

测试

现在 PostImageView 小部件里面会显示内容的图像，现在我们可以使用手势控制这个图像的显示，也可以双击图像，这样会循环使用几种不同的缩放比例显示图像。