Flutter 3 基础05: 切换导航页面

在创建应用导航一文中，我们为应用增加了一个底部导航栏，点击导航图标，也可以正常切换。但是，美中不足的是，不论你点击哪个导航图标，屏幕中间的内容区域都是一片空白。现在我们就来解决这个问题。

启动 Android Studio，打开 hello_world 项目，运行模拟器，这样就可以实时看到编码产生的效果。当然，现在只能看到空白的导航页面。

为什么显示空白

我们先来搞清楚页面一直显示空白的原因。

找到并打开 main.dart 文件，在 _HomePageState 类的 build 方法中，找到下面的代码：

body: SafeArea(  
  child: Container(),  
),

我们先来简单解释一下这段代码。

• body: body 属性是用来设置屏幕要显示什么内容。
• SafeArea: 调用 SafeArea 方法是确保我们的内容显示在"安全区域"，不会被手机操作系统固有的界面内容所影响或遮挡。
• child: child 属性是实际我们配置要显示的内容的地方。

可以看到，child 属性的值是 Container() 方法返回的一个空容器，里面没有放置任何东西，这也是我们看到空白屏幕的原因。而且，这个属性的值是固定的，不会因为我们点击了导航图标而改变，这也是为什么我们点击导航图标，也一直白屏的原因。

创建导航页面

为了能给切换不同的页面，我们首先需要创建这些页面。

继续在 main.dart 文件中，找到下列这行代码：

int _selectedIndex = 0;

在这行代码的下面，添加以下代码：

// 创建一组彩色的容器  
static List<Widget> pages = <Widget>[  
  Container(color: Colors.red),  
  Container(color: Colors.green),  
  Container(color: Colors.blue)  
];

这是一个静态方法，创建了一组简单的彩色容器：红，绿，蓝。在这里，我们依然让每个页面显示一个 Container 容器，通过 color 属性，为每个容器配置了不同的背景色（虽然不美，但可以让我们区分每个页面，你可以设置你喜欢的颜色）。

切换导航页面

现在，我们可以让用户点击不同的导航图标时，显示不同颜色的页面。

继续在 main.dart 文件中，找到下列这三行代码：

body: SafeArea(  
  child: Container(),  
),

把其中第二行代码 child: Container(), , 替换为下面的代码：

child: pages[_selectedIndex],

保存文件。如果你已经打开虚拟机，保持程序运行，你就会发现白色的页面已经变成了红色页面。

验证效果

点击部件导航图标，可以看到绿色的页面：

点击设置导航图标，可以看到蓝色的页面：

虽然页面现在显示的内容比较简单，只是展示了不同的背景颜色，但是，随着我们不断的学习和探索，会让页面呈现更丰富的内容。

提交代码

我们已经实现了应用底部导航页面的切换，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。

git add .
git commit -m '实现应用导航页面的切换。'