下面创建一个显示内容文件信息用的小部件，新建一个文件，放在 lib/post/show/components 里面，名字是post_show_file_metadata.dart。

在文件里定义一个小部件，名字是 PostShowFileMetadata，在里面添加一个属性，final Post 名字是 post，再添加一个构造方法 PostShowFileMetadata ，添加一个参数，this.post。

小部件的 build 方法 return 的东西可以先用一个 Observer 小部件，设置一下它的 builder 参数，return 的东西先用一个 SliverToBoxAdapter ，它的 child 可以是一个 Container ，用 padding 添加点边距，EdgeInsets.only，top 是 16，right 是 16，left 是 24 。 这个容器的 child 暂时用一个 Text 小部件，文字是 PostSowFileMetadata。

post_content_view.dart

打开 post_content_view.dart，在这个 PostShowMedia 小部件的下面，再添加一个 PostShowFileMetadata，提供一个 post 参数。

你会发现，现在内容页面上会显示 PostShowFileMetadata 这个小部件。

PostShowFileMetadata

继续再编辑一下这个小部件，这里我们可以把它转换成一个 StatefulWidget ，带状态的小部件。在小部件的 State 类里面，声明一个属性，用 late 标记一下，类型是 FileShowStore，名字是 fileShowStore。

添加一个 initState 方法，在方法里面，设置一下 fileShowStore ，它的值可以读取一下用 Provider 提供的 FileShowStore 。这里我们要在文件里面导入 provider 这个包。

下面声明一个 hasFile，值可以判断一下 widget.post.file != null 。 然后判断一下，如果 hasFile，声明一个 fileId，等于 widget.post.file!.id! 。再声明一个 cache，值可以用一下 fileShowStore.getFileMetadataCache，给它提供一个 fileId 。

判断一下，如果 cache 等于 null ，就是如果在文件信息缓存里没找到可用的缓存，先用一下 WidgetsBinding.instance!，用 addPostFrameCallback 注册一个后帧回调，这里可以执行一下 fileShowStore 里的 getFileById，把 fileId 交给这个方法，它会到服务端请求对应的文件信息数据。

如果界面上出现错误，可以重新启动一下应用。然后再打开一个内容页面。

在小部件里用的 Observer 的 builder 里面，声明一个 fileId，值是 widget.post.file?.id ，再声明一个 cache ，值可以用一下 fileShowStore.getFileMetadataCache，把 fileId 交给这个方法。

再声明一个 specs，值是 cache?['value']['specs'] 。然后声明一个 showSpecs ，值可以判断一下 specs 是不是不等于 null 。

设置一下 Container 的 child，换成一个 Column ，在它的 children 里面，判断一下 showSpecs，然后添加一个 Row 小部件，它的 children 属性的值，用一下 specs!.map 生成一组小部件。

当前项目是 item，返回的是一个 Container，用 padding 添加点边距，EdgeInsets.only(right: 8)，容器的 child 是一个 Text 小部件，显示的文字是 ${item.value}，在这个 map 方法的后面，调用 toList，转换成一个列表。

测试

现在，在内容页面上会显示焦距，光圈大小，快门速度，还有感光度这些数据。