Flutter 凸起效果底部导航栏一

最新推荐文章于 2025-03-10 20:38:56 发布

原创

最新推荐文章于 2025-03-10 20:38:56 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android

本文介绍如何使用Flutter的BottomNavigationBar和BottomAppBar组件创建一个带有中间凸起按钮的底部导航栏，并提供了一个具体的代码实现示例。

大多app中都会带有底部导航栏，系统默认自带的导航条不够新颖。今天我们改造一下导航条，将中间的按钮起到凸起的效果，特别有的app,中间常用扫一扫功能。

Flutter为我们提供了一个控件BottomNavigationBar，结合BottomAppBar实现不规则底部导航栏，我们主要用到这两个控件，先看一下这两个控件的介绍：

BottomNavigationBar简介

BottomNavigationBar({
    Key? key,
    required this.items, //必填项，长度必须至少为两个，每个项目的图标和标签不能为null
    this.onTap, //点击事件
    this.currentIndex = 0, //当前选中item下标
    this.elevation, //控制阴影z坐标高度，如果是null，默认为8.0
    this.type, //BottomNavigationBarType，默认 fixed，设置为 shifting 时，需要设置选中样式，和未选中样式，提供一个特殊动画
    Color? fixedColor, //选中 item 填充色
    this.backgroundColor, //整个BottomNavigationBar 背景色
    this.iconSize = 24.0, //图标大小
    Color? selectedItemColor, //选中title填充色，fixedColor,selectedItemColor只能2选1，优先用selectedItemColor
    this.unselectedItemColor, //未选中title填充色
    this.selectedIconTheme, //选中item图标主题
    this.unselectedIconTheme, //未选中item图标主题
    this.selectedFontSize = 14.0, //选中title字体大小