应用请求服务端获取内容列表数据的时候我想在这个标题右边儿显示一个加载指示器。先打开 post_index_store.dart，在这个 store 里面添加一个新的数据，用 @observable 标注一下，类型是 bool ，名字是 loading ，默认值是 false，用它表示加载状态。

在动作里面，再添加一个新的动作，用 @action 标注一下，名字是 setLoading，接收一个 bool 类型的 data 参数，在它里面让 loading 等于这个 data 参数的值。

getPosts

然后可以改造一下 getPosts 这个方法，先去掉它的这个 sort 参数， 去掉以后方法里会报错，因为要用的 sort 不见了，这里我们可以在这个 store 里面添加一个 sort 数据。

用 @observable 标注一下，类型是 String 名字是 sort，默认值是 'latest'。然后再添加一个对应的动作，用 @action 标注一下，名字是 setSort，一个 String 类型的参数，名字是 data，在动作里面让 sort 等于这个 data。

注意在 store 里添加 observable 还有 action 以后，必须重新执行 build_runner build 命令，我执行的 watch 命令，所以会监视文件的变化自动编译文件。

store 里有了 sort 以后，在 getPosts 里就不会再报错了。下面再改进一下这个方法，剪切一下这些代码。在方法里面用一组 try，catch，还有 finally ，在 try 里面，先执行一下 setLoading ，把 loading 设置成 true，表示正在加载数据。提示 setLoading 不存在，因为这里定义这个动作的时候名字写错了，修改一下 。

设置了 loading 以后，可以请求内容列表接口，成功以后执行 setPosts 设置 posts 的值。catch 到错误的时候可以 throw 一个 HttpException 这个异常。在 finally 这里，可以执行 setLoading，把 loading 设置成 false。

post_list.dart

打开 post_list.dart，这里执行 getPosts 的时候，就不需要设置它的参数了，因为 getPosts 需要的参数数据可以让它从 postIndexStore 里直接得到。

这样这个小部件也就不再需要 sort 这个属性还有参数了，把它们删除掉 。再删除掉文件顶部用不到的导入。

app_header_title.dart

打开 app_header_title.dart ，在文件的顶部导入一个包，package:provider/provider.dart。 然后在这个 Observer 的 builder 里面，声明一个 postIndexStore，值是 context.read ，类型是 PostIndexStore。

声明一个 showIndicator ，让它等于 postIndexStore.loading。

下面再定义一个 indicator，等于一个 Container ，用 padding 设置点边距，EdgeInsets.all ，大小是 8 ，width 是 24，height 也设置成 24。child 可以判断一下 showIndicator，如果是 true，就用一个 CircularProgressIndicator，把 strokeWidth 设置成 2，不然这里可以是一个空白的 Container 。

然后在 title 里面用的这个 Row 小部件里面，再添加一个 indicator 。这样执行 getPosts 方法获取内容列表数据的时候，store 里的 loading 就会被设置成 true，这里就会显示一个加载进度指示器，请求完成以后，loading 会被设置成 false，这个进度指示器就会被隐藏起来。