flutter底部导航栏中间按钮凸起,导航栏中间部分凹陷效果

在这里插入图片描述

关键代码:
Scaffold中设置floatingActionButtonLocation: FloatingActionButtonLocation.centerDockedextendBody: true
BottomAppBar中设置shape: const CircularNotchedRectangle()

Scaffold(extendBody: true,//body是否延伸脚手架底部,在底部导航栏的边缘添加了凹口时,确保能看到body内容body: _body(),floatingActionButton: FloatingActionButton(backgroundColor: Colors.transparent,onPressed: () {isLogin().then((value) {if (value == true) {Utils().postDialog(context);} else {NavigatorUtil.push(LoginPage());}});},child: Image.asset(PathConfig.iconPublishGreen,width: 112.w,height: 112.w),),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,bottomNavigationBar: _bottomNavigationAppBar(),);//中间凸出的底部导航栏(和floatingActionButton配合使用)_bottomNavigationAppBar(){return SizedBox(height: 110.w,child: BottomAppBar(color: Colors.white,shape: const CircularNotchedRectangle(),//添加一个凹口的形状child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [// 首页底部图标Expanded(child: GestureDetector(child: _currentIndex == 0? Image.asset(PathConfig.iconLogoRound,width: 64.w,height: 64.w): Container(color: Colors.transparent,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: 40.w,height: 40.w,margin: EdgeInsets.only(bottom: 4.w),child: Image(image: AssetImage(PathConfig.iconUnselectAtui),),),Text(S.of(context).atui,style: TextStyle(fontSize: 20.sp,color: _currentIndex == 0 ? Color(0xffe63850) : Color(0xffD2D5D4)))],),),onTap: (){_changePage(0);})),// 商城底部图标Expanded(child: GestureDetector(child: Container(color: Colors.transparent,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: 40.w,height: 40.w,margin: EdgeInsets.only(bottom: 4.w),child: Image(image: AssetImage(_currentIndex == 1 ? PathConfig.iconSelectedMarket : PathConfig.iconUnselectMarket),),),Text(S.of(context).market,style: TextStyle(fontSize: 20.sp, color: _currentIndex == 1 ? JadeColors.green_2 : Color(0xffD2D5D4)))],),),onTap: (){_changePage(1);})),// 发布图标Expanded(child: GestureDetector(child: Column(children: <Widget>[Container(width: 40.w,height: 40.w,),/*Text(S.of(context).publish,style: TextStyle(fontSize: 13,color: JadeColors.green_2),)*/],),onTap: (){//_changePage(2);})),// 消息底部图标Expanded(child: GestureDetector(child: Container(color: Colors.transparent,// alignment: Alignment.center,child: Stack(alignment: Alignment.center,children: <Widget>[Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(width: 40.w,height: 40.w,margin: EdgeInsets.only(bottom: 4.w),child: Image(image: AssetImage(_currentIndex == 3 ? PathConfig.iconSelectedMessage : PathConfig.iconUnselectMessage),),),Text(S.of(context).xiaoxi,style: TextStyle(fontSize: 20.sp,color: _currentIndex == 3 ? JadeColors.green_2 : Color(0xffD2D5D4)),)],),Positioned(right: 40.w,top: 6.w,child: _messageCountView())],),),onTap: (){_changePage(3);},)),// 我的底部图标Expanded(child: GestureDetector(child: Container(color: Colors.transparent,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: 40.w,height: 40.w,margin: EdgeInsets.only(bottom: 4.w),child: Image(image: AssetImage(_currentIndex == 4 ? PathConfig.iconSelectedMine : PathConfig.iconUnselectMine),),),Text(S.of(context).wode,style: TextStyle(fontSize: 20.sp,color: _currentIndex == 4 ? JadeColors.green_2 : Color(0xffD2D5D4)),)],)),onTap: (){_changePage(4);},))],),),);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/62745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

108.【C语言】数据结构之二叉树查找值为x的节点

目录 1.题目 代码模板 2.分析 分类讨论各种情况 大概的框架 关键部分(继续递归)的详解 递归调用展开图 3.测试结果 其他写法 4.结论 5.注意事项 不推荐的写法 1.题目 查找值为x的节点并返回节点的地址 代码模板 typedef int BTDataType; typedef struct BinaryT…

算法刷题Day1

BM47 寻找第k大 第一天就随便记录吧&#xff0c;万事开头难&#xff0c;我好不容易开的头&#xff0c;就别难为自己&#xff0c;去追求高质量了。嘿嘿嘿 题目 传送门 解题思路一&#xff1a;维护一个大小为k的最小堆。最后返回堆顶元素。 代码&#xff1a; # # 代码中的类名…

十五、linux之搭建JavaEE环境

1 概述 如果需要在 Linux 下进行 JavaEE 的开发&#xff0c;我们需要安装如下软件 2 安装 JDK 安装步骤 mkdir /opt/jdk mkdir /opt/jdk通过 xftp6 上传到 /opt/jdk 下 cd /opt/jdk 解压 tar -zxvf jdk-8u261-linux-x64.tar.gz tar -zxvf jdk-8u261-linux-x64.tar.…

基于PHP的音乐网站的设计与实现

摘 要 本系统采用PHP编程语言和MySQL数据库技术搭载了Apache服务器&#xff0c;完成了基于PHP的音乐网站设计&#xff0c;通过此次毕 业论文的撰写我明白了对于论文的选题要精确&#xff0c;要明确&#xff0c;要有明确的见解&#xff0c;要有足够的论证和创意&#xff0c;必须…

mysql 触发器进入历史

一、触发器 MySQL 触发器&#xff08;Triggers&#xff09;是一种数据库对象&#xff0c;它与表关联&#xff0c;能在特定的事件&#xff08;如插入、更新或删除&#xff09;发生时自动执行一些指定的操作。使用触发器可以帮助我们自动维护数据库的完整性、一致性&#xff0c;…

Re-squiggle算法

Re-squiggle算法 从纳米孔读取产生的电流信号水平数据被称为“squiggle”。基于这种squiggle信息进行碱基调用通常会与参考序列存在一些错误。Re-squiggle算法定义了一种新的从squiggle到参考序列的分配,因此称为re-squiggle。 Re-squiggle算法是Tombo框架的基础。该算法以包…

Springboot项目搭建(8)-用户登出与个人中心修改

1.提要信息 1.1 catch和then方法 then和catch是JavaScript中Promise对象的两个方法&#xff0c;用于处理异步操作的成功&#xff08;成功回调&#xff09;和失败&#xff08;失败回调&#xff09;情况。这两个方法通常与async/await语法一起使用&#xff0c;但也可以单独使用…

【2024】使用Docker搭建redis sentinel哨兵模式集群全流程(包含部署、测试、错误点指正以及直接部署)

目录&#x1f4bb; 前言**Docker Compose介绍**最终实现效果 一、搭建集群1、创建文件结构2、创建redis节点3、验证节点4、创建sentinel哨兵5、验证Sentinel功能 二、spring连接1、添加依赖2、添加配置3、启动测试 三、直接部署流程1、拉取配置2、修改端口创建 前言 本篇文章主…

Python毕业设计选题:基于django+vue的智慧社区可视化平台的设计与实现+spider

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 养老机构管理 业主管理 社区安防管理 社区设施管理 车位…

webpack 项目访问静态资源

使用 webpack dev serve 启动 react 项目后&#xff0c;发现无法使用 http://localhost:8080/1.png 访问到项目的 /static 目录下的 1.png 文件。我的 webpack-dev.js 配置如下&#xff1a; const webpack require(webpack) const webpackMerge require(webpack-merge) cons…

shell(2) 变量

定义变量 中间不需要加空格&#xff0c;末尾也不需要分号。 name1jth #不加引号定义 name2jth #单引号定义 name3"jth" #双引号定义 这三种都表示字符串变量。 使用变量 使用$符号&#xff0c;或者${}。加花括号主要是帮助解释器识别变量边界。 echo $name #输出jth…

React的Fiber小记 ⏰

写在最前&#xff1a;绝对是错漏百出的一篇博文&#xff0c;很多内容还没有写demo去验证&#xff0c;特别是浏览器的帧渲染那一块&#xff0c;权当小记。至于为什么想写Fiber&#xff0c;问就是Shopee面试的时候被问惨了&#xff0c;之前实习上班摸鱼的时候看过稀土掘金上一篇感…

JavaScript 前端开发:从入门到精通的奇幻之旅

目录 一、引言 二、JavaScript 基础 &#xff08;一&#xff09;变量与数据类型 &#xff08;二&#xff09;运算符 &#xff08;三&#xff09;控制结构 三、函数 &#xff08;一&#xff09;函数定义与调用 &#xff08;二&#xff09;函数作用域 &#xff08;三&am…

安装Fcitx5输入框架和输入法自动部署脚本(来自Mark24)-Ubuntu通用

在Ubuntu22.04上安装rime中文输入法的基本教程 上述文章接近废弃。 使用新逻辑配置基本的Fcitx5的输入法。 安装 第一步&#xff0c;下载相关组件 sudo nala install vim sudo nala install ruby sudo nala install fcitx5-rime第二步&#xff0c;设置语言为Fcitx5 而非 默认…

【FAQ】使用Node.js 镜像 构建本地项目

在nodejs官方并没有提供使用node.js构建本地项目的方法&#xff0c;但是通过阅读官方文档&#xff0c;可以发现&#xff0c;官方在包管理器界面提供了如下语句 所以node.js容器是可以执行语句的 下面通过docker 的 -w 、-v 参数设置容器工作目录和目录映射&#xff08;实现本…

C/C++语言基础--C++智能指针(unique_ptr、shared_ptr、week_ptr)

本专栏目的 更新C/C的基础语法&#xff0c;包括C的一些新特性 前言 在C、C语言中&#xff0c;最经典的特性就是指针&#xff0c;他和内存相关&#xff0c;但是我们常常申请内存后忘记释放而导致内存泄漏&#xff0c;C提供了智能指针去解决这个内存泄漏问题&#xff1b;C语言…

Nature Methods | 人工智能在生物与医学研究中的应用

Nature Methods | 人工智能在生物与医学研究中的应用 生物研究中的深度学习 随着人工智能&#xff08;AI&#xff09;技术的迅速发展&#xff0c;尤其是深度学习和大规模预训练模型的出现&#xff0c;AI在生物学研究中的应用正在经历一场革命。从基因组学、单细胞组学到癌症生…

队列-链式描述(C++)

定义 使用链表描述队列时&#xff0c;通常包含以下几个基本要素&#xff1a; 队头指针&#xff08;Front Pointer&#xff09;&#xff1a;指向队列中第一个&#xff08;即最早进入队列的&#xff09;元素的节点。队尾指针&#xff08;Rear Pointer&#xff09;&#xff1a;指…

Flutter 之 InheritedWidget

InheritedWidget 是 Flutter 框架中的一个重要类&#xff0c;用于在 Widget 树中共享数据。它是 Flutter 中数据传递和状态管理的基础之一。通过 InheritedWidget&#xff0c;你可以让子 Widget 在不需要显式传递数据的情况下&#xff0c;访问祖先 Widget 中的数据。这种机制对…

Python 深度学习框架介绍

Python 是深度学习领域的主流编程语言&#xff0c;拥有许多强大的深度学习框架&#xff0c;广泛用于学术研究、工业应用和生产环境中。以下是一些最流行的 Python 深度学习框架&#xff0c;它们各自具有独特的功能和特点&#xff1a; 1. TensorFlow 开发公司&#xff1a;Google…