文件信息列表可以单独定义一个小部件，新建一个文件，放在 lib/file/components 里面，名字是 file_metadata_list.dart ，文件里定义一个小部件，名字是 FileMetadataList 。

添加两个属性，先添加一个 List 名字是 list，它的值就是要显示的列表数据。再添加一个 variant ，类型是 FileMetadataListVariant，它是一个 enum 。

可以在这个类的上面定义这个 enum，名字是 FileMetadataListVariant，里面添加一个 horizontal，再添加一个 vertical 。

添加一个构造方法，FileMetadataList，一个参数，this.list，再添加一个带名字的参数，this.variant，默认值是设置成 FileMetadataListVariant.vertical 。

在小部件的 build 方法里面，先定义一些东西，声明一个 theme，它的值是 Theme.of(context) 。 下面声明一个 primaryTextColor，值是 theme.textTheme.bodyText1!.color 。

然后声明一个 metadataListTheme ，它可以用一下 theme.copyWith ，设置一下 iconTheme ，值是 theme.iconTheme.copyWith，重新设置一下 size，值是 16，再设置一下小图标的 color ，设置成 primaryTextColor。

下面声明一个 labelTextStyle ，新建一个 TextStyle，把 fontWeight 设置成 FontWeight.bold，把 color 设置成 primaryTextColor。

然后声明一个 valueTextStyle，新建一个 TextStyle，设置一下 fontWeight，值是 FontWeight.w300，再把 fontSize 设置成 16。

下面我们可以根据使用这个小部件的时候提供的 list 数据生成一组小部件。声明一个 items ，值可以用一下 list.map() 然后继续调用 toList() 把结果转换成一个列表。

给这个 map 提供一个回调，有个 item 参数，在这个回调里声明一个 crossAxisAlignment ，判断一下 variant 是不是等于 FileMetadataListVariant.horizontal ，如果是的话，crossAxisAlignment 的值就是 CrossAxisAlignment.center，不是的话它的值就是 CrossAxisAlignment.start。

label

再声明一个 label ， 先用一个 Container 小部件，里面用 padding 设置一下边距，EdgeInsets.only，把 bottom 设置成 4 。它的 child 是一个 Row 小部件，设置一下它的 children ，这里可以判断一下 item.icon 是否不等于 null ，如果不等于 null，这里可以添加一个 item.icon! 。

再判断一下同样的情况，如果 item 里有 icon ，再添加一个 SizedBox，把 width 设置成 4 。下面再添加一个 Text 小部件，文字是 item 里的 title，再把 style 设置成 labelTextStyle。

value

下面再准备一下列表项目的值，声明一个 value，先用一个 Container 小部件，里面用 padding 添加点边距，EdgeInsets.only ，在底边添加点边距，大小是 16 。容器的 child 用一个 Text 小部件，文字是 '${item.value}' ，再设置一下文字样式，用一下 valueTextStyle。

最后让这个 map 方法的回调返回的是一个 Column 小部件，设置一下 crossAxisAlignment，值是 crossAxisAlignment。在它的 children 里面添加一个 label，再添加一个 value。

metadataList

然后我们再声明一个 Widget ，名字叫 metadataList，它的值用一个 Column 小部件，把 crossAxisAlignment 设置成 CrossAxisAlignment.start。再把 children 设置成 items。

下面判断一下，variant 是不是等于 FileMetadataListVariant.horizontal，如果是的话，重新设置一下这个 metadataList，让它等于一个 Row，设置一下它的 mainAxisAlignment ，值是 MainAxisAlignment.spaceBetween。再把 children 设置成 items。

build

最后这个 FileMetaDataList 小部件的 build 方法返回的东西，先用一个 Theme 设置一下主题，data 的值设置成上面准备好的 metadataListTheme。它的 child 是一个 Container，这个容器的 child 设置成 metadataList。

post_bottom_sheet_file_metadata

打开 post_bottom_sheet_file_metadata，这里可以先准备一下需要的列表数据，声明一个 fileId，值是 widget.post.file?.id! ，下面声明一个 cache，值可以用一下 fileShowStore.getFileMetadataCache这个方法得到，提供一个 fileId 参数。

然后声明一个 List? 名字是 specs ，值是 cache?['value']['specs'] 。

在这个 Column 的 children 里面，判断一下 specs != null ，如果这个 specs 有值，这里可以添加一个 FileMetadataList ，列表数据是 specs，再把 variant 设置成 FileMetadataListVariant.horizontal 。

观察

观察一下现在这个内容底板的信息这个标签下的显示，现在这里会显示焦距，光圈，曝光这些信息。