新建一个文件，放在 lib/post/show/components 里面，名字是 post_media_aspect_ratio_bottom_sheet.dart ，在这个文件里定义一个小部件，名字是 PostMediaAspectRatioBottomSheet 。

再打开 post_show_header_aspect_ratio，设置一下这个 onTap 方法，在里面用一下 showModalBottomSheet ，提供一个 context 参数，值是 context，一个 builder 参数，构建器有个 context 参数，返回的是一个 PostMediaAspectRatioBottomSheet 小部件。

现在点按内容页面头部这个小图标，会在底部显示一个 BottomSheet 小部件。回来继续编辑这个小部件。

在文件顶部导入一个包，导入的是 package:provider/provider.dart。 小部件里先用一个 Observer 小部件，给它提供一个 builder ，在这个构建器里面，声明一个 postShowStore，值是 context.read ，类型是 PostShowStore。

再声明一个 mediaAspectRatio ，值是 postShowStore 里的 mediaAspectRatio ，再声明一个 setMediaAspectRatio，值是 postShowStore 里的 setMediaAspectRatio 。

这个构建器 return 的可以是一个 Container 小部件，用 padding 设置一下边距，EdgeInsets.only ，上边是 24 右边是 32，下边是 48，左边是 32。再把这个容器的 height 设置成 100。

它的 child 可以用一个 Row 小部件，里面先用 mainAxisAlignment 把主轴对齐设置成 MainAxisAlignment.spaceAround。

children 是一组小部件，添加一个 AppTextMenuItem 小部件，label 是 原始，isActive，可以判断 mediaAspectRatio 是不是等于 null，如果是这个菜单项目就是激活状态。 再设置一下 onTap，这里可以执行一下 setMediaAspectRatio，提供一个 null 。

复制三份这个 AppTextMenuItem， 然后再分别修改一下，第二个项目的 label 设置成 1:1 ，表示宽高比是 1：1 。isActive 判断的是 mediaAspectRatio 是不是等于 1 ，点按它的时候，执行 setMediaAspectRatio ，提供的参数是 1 。

第三个项目的 label 是 3:4 ，激活状态判断的条件是 mediaAspectRatio 是不是等于 0.75 ，宽高比如果是 3:4 ，计算出来的值就是 0.75 。执行 setMediaAspectRatio 提供的参数值是 0.75 。

最后这个项目的 label 是 3:2，isActive 判断的是 mediaAspectRatio 是不是等于 1.5 ，点按它的时候执行 setMediaAspectRatio，提供的参数值是 1.5 。

测试

如果页面出现错误，可以按一下 shift + command + F5 重新启动一下应用，打开一个内容项目，点按这个比例小图标，会在底部弹出一个 BottomSheet ，上面会有几个选项，当前激活状态的是原始这个项目，再点按一下其它的项目，被按的这个项目会变成活动状态。