Flutter底部导航栏BottomNavigationBar

Flutter 底部导航栏(BottomNavigationBar)

在移动开发中,底部导航栏是非常常见的,在之前我也写过一篇关于在Android中如何使用底部导航栏的博客,感兴趣的可以看一下。
Android底部导航栏BottomNavigationBar使用方法

下面,我们来看一下在Flutter 中 底部导航栏是如何使用的。

首先看一下效果图:

shifting模式
在这里插入图片描述

fixed模式
在这里插入图片描述

BottomNavigationBar

首先,bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用

BottomNavigationBar构造方法

  BottomNavigationBar({
    Key key,
    @required this.items,  
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  })
属性 值类型 说明
items BottomNavigationBarItem类型的List 底部导航栏的显示项
onTap ValueChanged < int > 点击导航栏子项时的回调
currentIndex int 当前显示项的下标
type BottomNavigationBarType 底部导航栏的类型,有fixed和shifting两个类型,显示效果不一样
fixedColor Color 底部导航栏type为fixed时导航栏的颜色,如果为空的话默认使用ThemeData.primaryColor
iconSize double BottomNavigationBarItem icon的大小

BottomNavigationBar中属性比较简单,下面我们来看一下BottomNavigationBarItem

BottomNavigationBarItem

底部导航栏要显示的Item,有图标和标题组成

构造方法:

  const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })
属性 值类型 说明
icon Widget 要显示的图标控件,一般都是Iocn
title Widget 要显示的标题控件,一般都是Text
activeIcon Widget 选中时要显示的icon,一般也是Icon
backgroundColor Color BottomNavigationBarType为shifting时的背景颜色

简单使用

一般来说,点击底部导航栏都是要进行页面切换或者更新数据的,我们需要动态的改变一些状态,所以,我们要继承自StatefulWidget

class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IndexState();
  }
}

首先,我们需要准备导航栏要显示的项:

  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];

以及点击导航项是要显示的页面:

 final pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];

由于是演示,页面很简单,都是只放一个Text

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("首页"),
    );
  }
}

这些都准备完毕后,我们就可以开始使用底部导航栏了,首先我们要在Scaffold中使用bottomNavigationBar,然后指定items,currentIndex,type(默认是fixed)、onTap等属性

Scaffold(
      appBar: AppBar(
        title: Text("底部导航栏"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.shifting,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }

这里我们主要看一下onTap,该属性接收一个方法回调,其中,index表示当前点击导航项的下标,也就是items的下标。
知道下标后,我们只需要更改currentIndex即可。

下面我们来看一下_changePage方法:

  /*切换页面*/
  void _changePage(int index) {
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }

如此一来,我们就实现了点击底部导航项切换页面的效果了,非常简单。
全部代码:

import 'package:flutter/material.dart';
import 'package:flutter_sample/widget/bottom_nav/cart_page.dart';
import 'package:flutter_sample/widget/bottom_nav/home_page.dart';
import 'package:flutter_sample/widget/bottom_nav/msg_page.dart';
import 'package:flutter_sample/widget/bottom_nav/person_page.dart';

class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IndexState();
  }
}

class _IndexState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      title: Text("消息"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      title: Text("购物车"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      title: Text("个人中心"),
    ),
  ];

  int currentIndex;

  final pages = [HomePage(), MsgPage(), CartPage(), PersonPage()];

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("底部导航栏"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.shifting,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );
  }

  /*切换页面*/
  void _changePage(int index) {
    /*如果点击的导航项不是当前项  切换 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
}

效果图如下
在这里插入图片描述

一般情况下,我们底部导航栏不会弄得这么花哨,所以一般都是使用fixed模式,此时,导航栏的图标和标题颜色会使用fixedColor指定的颜色,如果没有指定fixedColor,则使用默认的主题色primaryColor

代码示例:

Scaffold(
      appBar: AppBar(
        title: Text("底部导航栏"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          _changePage(index);
        },
      ),
      body: pages[currentIndex],
    );

入口函数:

/*入口函数*/
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter入门示例程序',
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: IndexPage(),
    );
  }
}

在这里插入图片描述

好了,Flutter 底部导航栏就这些,还是很简单的。

Flutter底部导航栏demo


如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我的 Flutter 博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值