Flutter 导航组件集

Flutter 导航组件集（Cupertino），Cupertino导航相关的组件也非常丰富。由于它们之间有关联关系，所以本文把导航相关的组件放在一起说明。下面分别说明这些组件的属性及描述。

CupertinoTabScaffold

CupertinoTabScaffold为选项卡组件，将选项卡按钮及选项卡视图绑定在一起。常用属性如下所示：

CupertinoTabBar

CupertinoTabBar为选项卡按钮组件，通常由BottomNavigationBarItem组成，包含图标和文本，效果如图所示。常用属性如下所示：

CupertinoTabView

CupertinoTabView为选项卡视图组件，常用属性如下所示：

CupertinoPageScaffold

CupertinoPageScaffold为页面的基本布局结构组件，包含内容和导航栏。常用属性如下所示：

CupertinoNavigationBar

CupertinoNavigationBar为导航栏结构组件，效果图如图所示，常用属性如下所示：

导航综合示例

接下来编写一个使用导航组件的综合示例。步骤如下：

步骤1：使用CupertinoTabScaffold组件添加最外层导航选项卡。它有两个属性—tabBar和tabBuilder，分别用来绑定底部选项卡及所对应的视图。

步骤2：使用CupertinoTabBar组件添加底部选项卡按钮。需要指定选项卡项，每个项包含一个图标及一个文本。代码结构如下所示：

tabBar: CupertinoTabBar(
  items: [
    BottomNavigationBarItem(
    // 指定图标
    // 指定文本
    ),
    // 根据需要添加更多按钮
  ],
),

此部分代码效果图如图所示:

步骤3：每个选项卡需要绑定一个视图，使用CupertinoTabView组件。这需要使用分支语句来判断当前选中的是哪一个选项卡。代码如下所示：

tabBuilder: (context, index) {
  // 选项卡绑定的视图
  return CupertinoTabView(
    builder: (context) {
    switch (index) {
        case 0:
          return HomePage();
          break;
        case 1:
          return ChatPage();
          break;
        default:
          return Container();
      }
    },
  );
},

步骤4：编写第一个选项卡页面，即主页，将其命名为HomePage。页面需要一个Cupertino-PageScaffold组件来包裹，指定页面顶部导航内容及内容区域。代码如下所示：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        // 只加标题
      ),
      child: Center(
        // 内容区域
      ),
    );
  }
}

此部分代码效果图如图所示：

步骤5：编写第二个选项卡页面，即聊天页面，将其命名为ChatPage。页面需要用一个CupertinoPageScaffold组件来包裹，指定页面顶部导航内容（包含左中右三块）及内容区域。代码结构如下所示：

/ 聊天页面
class ChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        // 导航栏，包含左中右三部分
      ),
      child: Center(
        // 内容区域
      ),
    );
  }
}

此部分代码的效果图如图所示：

步骤6 组装所有内容，完整的代码如下所示：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino导航组件集',
      theme: ThemeData.light(), //浅色主题
      home: MyPage(),
    );
  }
}
class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
// 最外层导航选项卡
return CupertinoTabScaffold(
  // 底部选项卡
  tabBar: CupertinoTabBar(
    backgroundColor: CupertinoColors.lightBackgroundGray, //选项卡背景色
    items: [
      // 选项卡项，包含图标及文字
      BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.home),
          title: Text('主页'),
      ),
      BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.conversation_bubble),
          title: Text('聊天'),
      ),
    ],
  ),
  tabBuilder: (context, index) {
    // 选项卡绑定的视图
    return CupertinoTabView(
      builder: (context) {
          switch (index) {
            case 0:
              return HomePage();
              break;
            case 1:
              return ChatPage();
              break;
            default:
              return Container();
          }
      },
    );
  },
);
  }
}

// 主页
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return CupertinoPageScaffold(
  // 基本布局结构，包含内容和导航栏
  navigationBar: CupertinoNavigationBar(
    // 导航栏，只包含中部标题部分
    middle: Text("主页"),
  ),
  child: Center(
      child: Text(
        '主页',
        style: Theme.of(context).textTheme.button,
      ),
    ),
  );
}
  }

  // 聊天页面
  class ChatPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      // 导航栏，包含左中右三部分
      middle: Text("聊天面板"),              //中间标题
      trailing: Icon(CupertinoIcons.add), //右侧按钮
      leading: Icon(CupertinoIcons.back), //左侧按钮
    ),
    child: Center(
      child: Text(
        '聊天面板',
        style: Theme.of(context).textTheme.button,
              ),
    ),
  );
}
}

上述示例的效果如图所示:

酷客教程相关文章：

• Flutter 按钮组件
• Flutter 对话框组件
• Flutter 加载指示器组件
• Flutter 卡片组件