在 Flutter 中创建底部和顶部导航栏
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
简介：
Flutter 是一个功能强大的框架，用于构建跨平台移动应用程序。它提供了丰富的组件，可用于创建直观且交互性强的用户界面。移动应用程序中常见的两种 UI 元素是底部导航栏和顶部导航栏，它们允许用户在应用程序的不同屏幕或部分之间进行导航。在本教程中，我们将探讨如何在 Flutter 中实现底部导航栏和顶部导航栏。
前提条件：
在开始之前，请确保您的系统已安装 Flutter 和 Dart。您可以参考 Flutter 官方文档获取安装说明。
创建 Flutter 项目
首先，打开你常用的 IDE，然后运行以下命令创建一个新的 Flutter 项目：
flutter create navigation_example
项目创建完成后，使用以下命令导航到项目目录：
cd navigation_example
实现底部导航栏
-
在你的IDE中打开这个
lib/main.dart文件。这个文件是你的Flutter应用程序的入口点。 -
删除类中的默认代码
MyApp，并将其替换为以下代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _tabs = [
HomeScreen(),
FavoritesScreen(),
ProfileScreen(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Demo'),
),
body: _tabs[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Home Screen'),
);
}
}
class FavoritesScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Favorites Screen'),
);
}
}
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Profile Screen'),
);
}
}
-
在上面的代码中，我们定义了一个
MyHomePage继承StatefulWidget并返回一个Scaffold组件的类。该Scaffold组件代表一个基本的 Material Design 布局结构。我们设置了appBar用于显示顶部导航栏的属性和body用于显示所选标签页内容的属性。该bottomNavigationBar组件还BottomNavigationBar允许用户在不同的标签页之间切换。 -
在……里面
BottomNavigationBar，
我们定义了三个BottomNavigationBarItem控件，每个控件代表一个标签页项。该currentIndex属性用于跟踪当前选中的标签页，当标签页被点击时，onTap回调函数会更新该值。_currentIndex
-
列表
_tabs包含每个标签页的内容。在本例中，我们有三个不同的屏幕：HomeScreen，，FavoritesScreen和ProfileScreen。您可以将其替换为您自己的屏幕。 -
每个屏幕都由一个单独的
StatelessWidget类表示，该类返回一个居中的Text控件，显示屏幕的名称。 -
保存文件并使用以下命令运行应用程序：
flutter run
现在您应该能在屏幕底部看到带有三个标签页的导航栏。点击每个标签页即可显示相应的屏幕内容。
实现顶部导航栏
- 要添加顶部导航栏，请
_MyHomePageState按如下方式修改类：
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _tabs = [
HomeScreen(),
FavoritesScreen(),
ProfileScreen(),
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
appBar: AppBar(
title: Text('Top Navigation Demo'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.home), text: 'Home'),
Tab(icon: Icon(Icons.favorite), text: 'Favorites'),
Tab(icon: Icon(Icons.person), text: 'Profile'),
],
),
),
body: TabBarView(
children: _tabs,
),
),
);
}
}
-
在上面的代码中，我们
Scaffold用一个DefaultTabController组件包裹了该组件。该组件length的属性DefaultTabController被设置为选项卡的数量（在本例中为_tabs.length），它表示我们有多少个屏幕。 -
在 `<div>` 标签内
AppBar，我们添加了一个TabBar控件作为bottom属性。该TabBar控件会在屏幕顶部显示选项卡，并允许用户在它们之间切换。 -
每个选项卡都由一个控件表示
Tab，该控件可以包含图标和文本。在本例中，我们为每个选项卡设置了图标icon和文本text属性。 -
该
body属性Scaffold设置为TabBarView，显示所选选项卡的内容。 -
保存文件，然后再次运行该应用程序
flutter run。现在你应该会在屏幕顶部看到一个带有三个标签页的导航栏。点击每个标签页即可显示相应的屏幕内容。
总结：
在本教程中，我们学习了如何在 Flutter 中实现底部和顶部导航栏。我们使用了 `<body>` 和 ` BottomNavigationBar<top>` 组件来实现底部导航栏，并使用了 `<top>`TabBar和`<top> TabBarView` 组件来实现顶部导航栏。借助这些导航栏，您可以为 Flutter 应用程序创建动态且用户友好的界面。
正在寻找专业的 Flutter 开发人员？请访问我们的网页“聘请 Flutter 开发人员”，聘请顶尖的 Flutter 专业人才。我们经验丰富的开发人员精通 Flutter 应用开发，能够为您的项目提供高质量、高效率的解决方案。充分利用他们的专业知识，自信地加入蓬勃发展的 Flutter 开发行业。
文章来源：https://dev.to/sachin_007/creating-bottom-and-top-navigation-bars-in-flutter-4ifj