当前位置：码云笔记 > 前端 > Flutter教程 > 22. Flutter实战-实现底部导航栏功能
码云码云 Flutter教程

22. Flutter实战-实现底部导航栏功能

AI 概述
主入口文件的编写StatefulWidget 讲解BottomNaivgationWidget 自定义子页面的编写重写 initState()方法BottomNavigationBar 里的响应事件 在实际项目中最常见的就是底部导航栏功能，你很难找出没有底部导航栏的应用。所以接下来我们就实现底部导航栏需求。 主入口文件的编写 首先我们先写一个主入口文...
目录
文章目录隐藏
  1. 主入口文件的编写
  2. StatefulWidget 讲解
  3. BottomNaivgationWidget 自定义
  4. 子页面的编写
  5. 重写 initState()方法
  6. BottomNavigationBar 里的响应事件

在实际项目中最常见的就是底部导航栏功能，你很难找出没有底部导航栏的应用。所以接下来我们就实现底部导航栏需求。

主入口文件的编写

首先我们先写一个主入口文件，这个文件只是简单的 APP 通用结构，最主要的是要引入自定义的BottomNavigationWidget组件。

main.dart 代码如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter bottomNavigationBar',
      theme:ThemeData.light(),
      home:BottomNavigationWidget()
    );
  }.
}

注意的是BottomNaivgationWidget这个组件还没有编写，所以现在会报错。

StatefulWidget 讲解

在编写BottomNaivgationWidget组件前，我们需要简单了解一下什么是StatefulWidget。

StatefulWidget具有可变状态(state)的窗口组件（widget）。使用这个要根据变化状态，调整 State 值。

在 lib 目录下，新建一个bottom_navigation_widget.dart文件。

它的初始化和以前使用的StatelessWidget不同，我们在 VSCode 中直接使用快捷方式生成代码（直接在 VSCode 中输入 stful）：

class name extends StatefulWidget {
  _nameState createState() => _nameState();
}

class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}

上面的代码可以清楚的看到，使用StatefulWidget分为两个部分，第一个部分是继承与StatefullWidget，第二个部分是继承于State。其实State部分才是我们的重点，主要的代码都会写在State中。

BottomNaivgationWidget 自定义

接下来我们就要创建BottomNaivgationWidget这个 Widget 了，只是建立一个底部导航。

import 'package:flutter/material.dart';


class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
     return Scaffold(

       bottomNavigationBar: BottomNavigationBar(
         items: [
           BottomNavigationBarItem(
             icon:Icon(
               Icons.home,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Home',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.email,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Email',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.pages,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Pages',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.airplay,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'AipPlay',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
         ],
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}

这时候我们就可以使用flutter run 来进行查看代码了，效果已经出现，在 APP 的页面上已经出现了一个底部导航栏，只不过现在还点击还没有什么效果。最基础的静态页做出来后，我们在实现让点击后可以切换页面的效果。

我们先把几个要导航的页面创建出来。

子页面的编写

子页面我们就采用最简单的编写了，只放入一个AppBar和一个Center，然后用 Text Widget 表明即可。

先来写一个 HomeScreen 组件，新建一个 pages 目录，然后在目录下面新建home_screen.dart文件。

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text('HOME'),
      ),
      body:Center(
        child: Text('HOME'),
      )
    );
  }
}

有了这个文件剩下的文件就可以复制粘贴，然后改少量的代码来完成了。

分别建立:

  • email_screen.dart
  • pages_screen.dart
  • airplay_screen.dart

这些都是导航要用的子页面，有了这些页面，我们才能继续编写代码。

重写 initState()方法

我们要重新initState()方法，把刚才做好的页面进行初始化到一个 Widget 数组中。有了数组就可以根据数组的索引来切换不同的页面了。这是现在几乎所有的 APP 采用的方式。

代码如下:

List<Widget> list = List();
 @override
 void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }

这里的..add()是 Dart 语言的..语法，如果你学过编程模式，你一定听说过建造者模式，简单来说就是返回调用者本身。这里 list 后用了..add()，还会返回 list，然后就一直使用..语法，能一直想 list 里增加 widget 元素。 最后我们调用了一些父类的initState()方法。

BottomNavigationBar 里的响应事件

BottomNavigationBar组件里提供了一个相应事件onTap，这个事件自带一个索引值index，通过索引值我们就可以和我们 list 里的索引值相对应了。

onTap: (int index) {
  setState(() {
    _currentIndex = index;
  });
},

现在给出全部的bottom_navigation_widget.dart的全部代码：

import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/airplay_screen.dart';

class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List<Widget> list = List();

  @override
  void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       body: list[_currentIndex],
       bottomNavigationBar: BottomNavigationBar(
         items: [
           BottomNavigationBarItem(
             icon:Icon(
               Icons.home,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Home',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.email,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Email',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.pages,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Pages',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.airplay,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'AipPlay',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
         ],
         currentIndex:_currentIndex,
         onTap:(int index){
           setState((){
             _currentIndex= index;
           });
         },
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}

最终实现效果：

Flutter 实例-底部导航栏与切换效果的实现

以上就是关于 Flutter 底部导航的全部内容，相信通过上面的学习大家基本掌握了 APP 底部导航的编写方法，其实这些知识是很面向工作的，因为在真实项目中，你也要如此划分你的代码结构。

还是那句话，希望你一定要动手练习一下，因为不动手练习，你是真的学不会的，这不再是基础知识，而是稍显复杂的小案例，并且这些案例你练习后，以后工作中用到，是可以直接拷贝里边的代码的，绝对不亏的。

以上关于22. Flutter实战-实现底部导航栏功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 22. Flutter实战-实现底部导航栏功能

码云 SVIP

分享到：

相关推荐

发表回复