[译] 如何用 Flutter 来建立一个带有底部导航栏的应用程序

• 原文地址：How to use Flutter to build an app with bottom navigation
• 原文做者：Joseph Cherry
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：geniusq1981
• 校对者：DateBro

若是你从事移动开发，你可能据说过谷歌的跨平台 SDK：Flutter。Flutter 的 beta 版本 于 2 月 27 日发布，并于近期发布了第一个预览版。为了帮助您开始使用 Flutter，本教程将介绍 SDK 的一些基本内容，同时还将介绍如何设置底部导航栏。为了帮助您学习，本教程的代码能够在 GitHub上得到。

什么是 Flutter？

在咱们开始编写代码以前，让咱们先谈谈什么是 Flutter。Flutter SDK 继承了一套完整的开发框架，包括在 Android 和 iOS 上构建原生移动应用所需的 widget 和工具。与其余诸如 React Native 和 Xamarin 等跨平台框架的区别在于，它不使用平台原生 widget，也不使用 webview。相反，Flutter 有本身的用 C/C++ 编写的渲染引擎，而用来编写 Flutter 应用程序的 Dart 代码在各个平台上均可以编译成底层代码。这就能够在每一个平台上都能作出高性能的应用。不只应用在使用体验上很是快，并且经过 Flutter 的热重载特性也大大加快了开发时间。热重载容许开发人员在他们的设备或模拟器上当即显示修改内容的变化效果，由此能够减小那些浪费在等待代码编译的时间。

如何建立一个 Flutter 应用

如今咱们已经了解了 Flutter 是什么，让咱们开始建立咱们的应用程序。若是您尚未准备好开发环境，请按照 Flutter 网站的步骤安装 Flutter SDK。要建立应用程序，请运行“flutter create my_app”。若是您想让您的应用程序使用 Swift 或 Kotlin 做为平台特定代码，那么您能够从终端或命令行运行“flutter create -i Swift -a Kotlin my_app”。打开你建立的新项目，你可使用安装了 Dart 插件的 VS Code 或者安装了 Flutter 和 Dart 插件的 Android Studio。若是您须要编辑器安装的相关帮助，请参考 Flutter 的 帮助文档。

第一步 定义入口点

让咱们从打开 main.dart 文件开始，该文件位于 lib/ 目录下。接下来，因为咱们要从头开始编写应用程序，因此删除文件中的全部代码。这个文件是咱们应用程序的入口点。在文件的开始编写:

import 'package:flutter/material.dart';
复制代码

这就导入了 Flutter SDK 提供的 Material Design widgets。若是您想查看全部提供的 widget，能够在 Widget 目录 中查看。

在导入语句以后，咱们须要添加 main 方法。

void main() => runApp(App());
复制代码

若是您在添加 main 方法后看到一些错误，不要担忧。这是由于咱们尚未建立传递给 runApp 函数的 App widget 类。runApp 函数接收一个类型为 Widget 的类，并将它做为 root widget 运行。

如今咱们要建立咱们的 App widget。仍是在 main.dart 里面，在 main 方法下面添加如下的代码。

class App extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Flutter App',
     home: Home(),
   );
 }
}
复制代码

这就建立了一个新的无状态 widget App。之因此是一个无状态 widget，由于它的构建方法中没有任何内容会依赖于状态更新。全部的 StatelessWidgets 都须要实现 build 方法，由于这是咱们建立用户界面的地方。在咱们的 App widget 中，咱们简单地建立了一个新的 MaterialApp，并将 Home 属性设置为咱们但愿显示的第一个页面或 widget。在本例中，咱们把它设置为 Home widget，咱们将在接下来建立这个 widget。

第二步 建立主页

在 lib 目录下，建立一个新文件，并将其命名为 home_widget.dart。在这个文件的头部，咱们须要再次导入 material widgets。

import 'package:flutter/material.dart';
复制代码

接下来，咱们将建立做为咱们主页的 widget。为此，咱们将建立一个新的 StatefulWidget。当用户界面须要根据应用程序的当前状态发生变化时，StatefulWidget 就派上用场了。例如，如今咱们要使用底部导航栏，咱们的 Home widget 将根据当前选定的选项卡来渲染出不一样的 widget。首先，在导入语句下面添加如下代码。

class Home extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
    return _HomeState();
  }
}
复制代码

您可能会注意到，这个 widget 类没有实现咱们前面提到的 build 方法。当涉及到 StatefulWidgets 时，build 方法会在 widget 对应的 State 类中实现。在 StatefulWidget 中，惟一须要的方法是咱们在上面实现的 createState 方法，咱们只返回一个 _HomeState 类实例。类名前面的 “_” 表明 Dart 将类或类属性标记为 private。咱们如今须要建立 home widget 的 state 类。在 home_widget.dart 文件的末尾添加这个段代码：

class _HomeState extends State<Home> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('My Flutter App'),
     ),
     bottomNavigationBar: BottomNavigationBar(
       currentIndex: 0, // this will be set when a new tab is tapped
       items: [
         BottomNavigationBarItem(
           icon: new Icon(Icons.home),
           title: new Text('Home'),
         ),
         BottomNavigationBarItem(
           icon: new Icon(Icons.mail),
           title: new Text('Messages'),
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.person),
           Title: Text('Profile')
         )
       ],
     ),
   );
 }
}
复制代码

这里有不少内容，咱们来逐一看看。在 _HomeState 类中，咱们实现了 Home widget 的 build 方法。咱们从 build 方法返回的 widget 叫作 Scaffold。这个 widget 有一些很棒的属性，能够帮助咱们布置主屏幕，包括添加底部导航栏、滑动条和选项卡。咱们如今只使用它的 appBar 和 bottomNavigationBar 属性。在咱们的底部导航栏中，咱们返回一个列表，其中列出了咱们但愿在底部栏中出现的项目。如您所见，咱们有三个选项卡，分别是 Home、Message 和 Profile。咱们还将当前索引做为属性设置为 0。稍后咱们将把它与当前选项卡联系起来。当前索引可让导航栏知道要将哪一个图标用于当前选择的选项卡。

此时，咱们差很少已经准备好第一次运行 Flutter 应用了，来看看咱们的成果。再回到 main.dart 文件，在顶部，咱们须要导入新建立的 Home widget。咱们能够经过在当前的导入语句下添加下面这个导入语句来实现。

import 'home_widget.dart';
复制代码

咱们如今应该能够运行咱们的应用了。你能够在 VS Code 里面，任意的 Dart 文件里按 F5，或者在 Android Studio 中点击 run 按钮，或者在终端中输入 flutter run。若是您须要模拟器安装或者模拟运行应用程序的相关帮助，请参考 Flutter 的帮助文档。若是一切顺利，你的应用应该是这样的。

太棒了!咱们如今已经有一个应用程序了，并且它有很漂亮的底部导航栏。然而，这里有一个问题。咱们的导航栏不会导引到任何地方!如今让咱们解决这个问题。

第三步 准备导航

回到 home_widget.dart 文件，咱们须要对 _HomeState 类作一些更改。在类的顶部，咱们须要添加两个新的实例属性。

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  final List<Widget> _children = [];
...
复制代码

第一个是当前所选选项卡的索引，另外一个则是选项卡对应的但愿渲染的 widget 列表。

接下来，咱们须要使用这些属性来告诉咱们的 widget，当一个新选项卡被选中时须要显示什么。为此，咱们须要对 build 方法返回的 scaffold widget 进行一些更改。这是咱们新的 build 方法。

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('My Flutter App'),
     ),
     body: _children[_currentIndex], // new
     bottomNavigationBar: BottomNavigationBar(
       onTap: onTabTapped, // new
       currentIndex: _currentIndex, // new
       items: [
         new BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),
         new BottomNavigationBarItem(
           icon: Icon(Icons.mail),
           title: Text('Messages'),
         ),
         new BottomNavigationBarItem(
           icon: Icon(Icons.person),
           title: Text('Profile')
         )
       ],
     ),
   );
 }
复制代码

咱们的 build 方法中更改的三行用 // new 注释了。首先，咱们添加了 scaffold 的 body 属性，即在应用程序栏和底部导航栏之间显示的 widget。咱们将 body 设置为与 _children widget 列表中相对应的 widget。接下来，咱们给底部导航栏添加 onTap 属性。咱们将它设置为一个名为 ontabtap 的函数，该函数将接收被选中选项卡的索引并决定如何处理它。咱们立刻就实现这个函数。最后，咱们将底部导航栏的 currentIndex 设置为 state 类里面的 _currentIndex 属性。

第四步 处理导航

如今，咱们将添加上一步中提到的 ontabtap 函数。在 _HomeState 类的底部添加如下函数。

void onTabTapped(int index) {
   setState(() {
     _currentIndex = index;
   });
 }
复制代码

这个函数接收被选中选项卡的索引，并在咱们的 state 类上调用 setState。这将触发 build 方法接收咱们传递给它的状态信息并再次运行。在本例中，咱们将传递更新的选项卡索引，该索引将更改 scaffold widget 的 body，并激活导航栏上正确的选项卡。

第五步 添加子 widgets

咱们的应用程序就要完成了。最后一步是建立 _children widget 列表中用到的 widget 并把它们添加到导航栏。首先 在 lib 目录下建立一个名为 placeholder_widget.dart 的新文件。这个文件将做为一个简单的 StatelessWidget 来使用背景色。

import 'package:flutter/material.dart';

class PlaceholderWidget extends StatelessWidget {
 final Color color;

 PlaceholderWidget(this.color);

 @override
 Widget build(BuildContext context) {
   return Container(
     color: color,
   );
 }
}
复制代码

如今咱们要作的就是向导航栏中添加 PlaceholderWidget。在 home_widget.dart 的顶部,须要导入咱们的 widget。

import 'placeholder_widget.dart';
复制代码

而后，咱们要作的就是将这些 widget 添加到 _children 列表中，以便在选择新选项卡时渲染它们。

class _HomeState extends State<Home> {
 int _currentIndex = 0;
 final List<Widget> _children = [
   PlaceholderWidget(Colors.white),
   PlaceholderWidget(Colors.deepOrange),
   PlaceholderWidget(Colors.green)
 ];
...
复制代码

就是这样!如今应该能够运行应用程序并在选项卡之间切换了。若是您想要看到 Flutter 的热重载特性，请尝试更改一下 BottomNavigationBarItems。值得注意的是，更改传递给 PlaceholderWidgets 的颜色不会在热重载期间反映出来，由于 Flutter 会保持咱们 StatefulWidget 的状态。

结论

在本教程中，咱们学习了如何搭建一个新的 Flutter 应用程序并让底部导航栏工做。像 Flutter 这样的跨平台工具在移动领域愈来愈流行，由于它们缩短了开发时间。Flutter 有它的独特之处，由于它不须要使用 底层原生的 widget 或 webview。目前采用 Flutter 的主要缺点之一是在功能特性上缺乏第三方支持。然而，Flutter 仍然是一种颇有前途的工具，使用它能够在不牺牲性能的前提下编写出很是棒的跨平台应用程序。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。