打开一个内容页面,如果还没有需要的文件数据就会请求服务端接口获取到对应的文件数据,网络请求需要点时间,在请求完成之前我们可以在内容页面上显示一个内容骨架,等有数据以后可以隐藏这个内容骨架。
在这个 post_show_file_metadata 里面,在这个 Column 小部件里,可以显示一个 skeleton ,它表示的小部件可以在上面定义一下。声明一个 skeleton,新建一个 Row 小部件,设置一下它的 children ,这个小部件的孩子们我们可以用一个列表生成。
用一下 List.generate,生成 4 个列表项目,列表项目的值就是项目当前的索引号。后面直接调用生成的这个列表的 map 方法,最后调用 toList() 方法把它转换成一个列表。
设置一下这个 map 方法,提供一个回调,当前项目是 item,返回的值可以是一个小部件,用一个 Container,用 padding 设置一下边距,EdgeInsets.only,right 是 8,bottom 是 4 。它的 child 又是一个 Container,这个容器的 height 设置成 13 ,容器的 width 可以随机在一个列表里选择,([30.0, 40.0, 50.0]..shuffle()) ,访问一下列表里的第一个项目。
再设置一下容器的 color,Theme.of(context) 用一下 textTheme.bodyText2?.color! withOpacity ,不透明度是 0.3 。
现在界面上会显示文件数据的骨架,这个骨架要在特定条件下显示。
在小部件里,声明一个 loading,值是 fileShowStore 里的 loading。 然后声明一个 showSkeleton,它的值是 loading ,并且 specs == null 。
显示 skeleton 之前,可以用 if 判断一下 showSkeleton 。
测试
在模拟器上测试一下,现在,只有在加载文件数据并且没有当前内容相关的文件数据的时候,才会在内容页面上显示一个内容骨架。