打开评论底板，如果还没有评论数据并且正在加载的时候，可以显示一组评论列表项目骨架。

新建一个文件，放在 lib/comment/index/components 里面，名字是 comment_list_item_skeleton.dart ，在这个文件里定义一个小部件，名字是 CommentListItemSkeleton 。

comment_list

打开 comment_list ，复制一份这个 list，名字改成 skeleton ， childCount 设置成 10，构建器返回的东西是一个 CommentListItemSkeleton 。

然后我们可以先让这个 view 等于 skeleton，回头再回来修改一下。这样做主要是为了让这个 skeleton 一直显示出来。

comment_list_item_skeleton

回到 comment_list_item_skeleton ，在小部件的 build 方法里面，在这个容器里用 padding 设置一下边距，EdgeInsets.only，bottom 是 24 ，小部件 child 是一个 Row 小部件，然后设置一下它的交叉轴对齐，设置成 CrossAxisAlignment.start 。 在它的 children 里面，添加一个 thumbnail ，再添加一个 content 。

在上面定义一个 thumbnail ，新建一个 Container 小部件。

再定义一个 content，用一个 Expanded，它的 child 是一个 Container，用 padding 把边距设置成 EdgeInsets.only，left 是 8 ，它的 child 是一个 Column，交叉轴对齐是 CrossAxisAlignment.start。它的 children 里面添加一个 userName，一个 commentContent，还有一个 actions。

在上面分别定义一个 userName，新建一个 Container，把 padding 设置成 EdgeInsets.only，bottom 是 8 。 复制一份，再声明一个 commentContent ，再复制一份，声明一个 actionItem，边距里面把 right 设置成 8 。

然后声明一个 actions，它是一个 Row，它的 children 里面，添加两个 actionItem 。

下面继续再编辑一下这些东西。先声明一个 backgroundColor，背景颜色 ，值是 Colors.black26 。

thumbnail，的 Container，把宽度设置成 24，高度也设置成 24，给它添加一个 decoration，新建一个 BoxDecoration，用 shape 设置一下形状，BoxShape.circle。再把 color 设置成 backgroundColor ，padding 是 EdgeInsets.only，top 是 4。

userName 的容器 child 又是一个 Container ，把 color 设置成 backgroundColor ，height 是 14，宽度可以在一个列表里随机选一个，一组括号，里面是一个列表，随便添加几个值，比如 30.0，40.0，50.0 ，用一下 ..shuffle，然后访问一下第一个项目。

复制一下这个 child，粘贴到 commentContent 这里，修改一下这个列表里的这几个值，125.0，175.0，225.0 ，再添加一个 275.0 。

再把这个 child 粘贴到 actionItem 这里，width 可以是固定值，比如 35 。

观察

观察一下这个评论列表项目骨架。

然后回到 comment_list ，这里可以判断一下 comments.isEmpty 并且 loading，满足这个条件，可以让 view 等于 skeleton。就是只有没有评论数据列表，并且正在加载数据的时候，才会显示评论列表项目骨架。