State 指的其实就是数据 .. 先剪切一下这个 BottomNavigationBar 的代码 ... 这里可以换成一个 BottomNavigationBarDemo .. 下面我们再去定义这个小部件 ..

打开资源管理器 .. 在项目的 lib 下面的 demo 目录里面新建一个文件 ... 名字是 bottom_navigation_bar_demo.dart

文件里面.. 先导入一个 fluuter 包里面的 material ...

这里我们创建一个 StatefulWidget ... 添加一个类 .. 名字叫 BottomNavigationBarDemo .. 让它继承一下 StatefulWidget ..

这种类型的 Widget 里面需要一个 createState 方法 .. 添加一个这样的方法 .. 设置一下方法 return 的东西 .. _BottomNavigationBarDemoState ..

下面再去创建一下这个类 .. 名字是 _BottomNavigationBarDemoState .. 继承一下 State ... 类型是 BottomNavigationBarDemo ..

里面添加一个 build 方法 ... 方法 return 的东西就是我们的 BottomNavigationBar .. 把刚才剪切的代码粘贴到这里 ..

回到 main.dart ... 再剪切一下这个 _currentIndex ... 还有这个 _onTapHandler ...

粘贴到这个 _BottomNavigationBarDemoState 里面 ..

修改一下这个 setState 要做的事情 .. 这里就是设置一下 _currentIndex 的值，把它设置成 index ... 这个 index 的值就是用户按的那个导航项目的索引值 ...

回到 main.dart .... 在文件的顶部 .. 导入我们刚才创建的 BottomNavigationBarDemo ...

保存 ...

到模拟器上再试一下应用界面底部的这个导航栏 ... 现在，按下去的导航项目就会变成激活的状态 ... 因为按下去以后，我们就会用 setState 重新设置一下小部件的状态 ... 这个动作会重新渲染界面 .. 让被按的导航项目变成激活的状态 ...

下面可以再去把之前我们创建的列表视图放到界面上，整体的预览一下 .. 先导入 listview demo ..

然后修改一下 Scaffold 的 body 属性里的这个 TabBarView .. 把它的第一个子部件 .. 换成刚才导入进来的 ListViewDemo ...

再到模拟器上可以预览一下我们现在做的这些界面 ...