页面主体上显示的小部件会根据底部导航栏当前的项目决定。这个页面主体部件可以单独放在一个小部件里面，打开 lib/app/app.dart，剪切一下在小部件里定义的 pageMain。

在 lib/app/components 里面，新建一个文件，名字是 app_page_main.dart，在这个文件里定义一个小部件，名字叫 AppPageMain。把之前剪切的 pageMain 先放在这个小部件的类里面。

然后可以在这个类里面再声明一个 int 类型的属性，名字是 currentIndex，它的值就是当前要显示的主体小部件的索引号。添加一个 AppPageMain 构造方法，在方法里添加一个参数，名字是 currentIndex，使用这个小部件的时候可以设置这个参数的值，它的值会交给类里面的 currentIndex 这个属性。

在小部件的 build 方法里面，返回的东西可以是 pageMain.elementAt(currentIndex)，也就是根据 currentIndex 这个属性的值返回对应的在 pageMain 里面的一个小部件。

打开 app.dart，在 Scaffold 里面，重新设置 body 参数的值，用一下 AppPageMain ，使用这个小部件的时候提供一个 currentIndex 参数，对应的值是 currentAppBottomNavigationBarItem，也就是当前活动状态下的底部导航栏项目的索引号。

在模拟器可以再试一下，点按底部导航栏项目，观察是否可以切换显示不同的小部件。

打开 AppPageMain，剪切一下在 pageMain 里面的第二个小部件，可以把它单独放在一个小部件里面。

在 lib/post/create/ 的下面，新建一个文件，名字是 post_create.dart，在这个文件里定义一个小部件，名字叫 PostCreate。把刚才剪切的小部件作为 build 方法 return 的东西。

再打开 AppPageMain，剪切一下 pageMain 里面的第三个小部件，这里我们也可以把它单独放在一个小部件里面，在 lib/user/profile 下面新建一个文件，名字是 user_profile.dart，在这个文件里定义一个小部件，名字叫 UserProfile。把刚才剪切的小部件作为 build 方法 return 的东西。

然后再打开 AppPageMain，在这个 pageMain 里面，用一个 PostCreate()，再用一个 UserProfile()。

在模拟器，点按底部导航栏上面的 添加 ，还有 用户 切换显示页面主体上的小部件。 当前项目如果是添加，显示的就是 PostCreate 小部件，如果当前项目是用户，页面主体显示的就是 UserProfile 这个小部件。