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…

十五、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;…

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…

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

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

MySQL技巧之跨服务器数据查询:进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中

MySQL技巧之跨服务器数据查询&#xff1a;进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中 基础篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MyS…

Flutter 指纹识别

在这篇博客中&#xff0c;我们将介绍如何使用 Flutter 的 local_auth 插件在 Android 和 iOS 设备上实现指纹识别功能。通过这一步一步的实现&#xff0c;我们将学习如何检查设备是否支持生物识别、如何触发指纹验证&#xff0c;并处理可能出现的错误。 效果图&#xff08;因为…

CentOS 9 配置静态IP

文章目录 1_问题原因2_nmcli 配置静态IP3_使用配置文件固定IP4_重启后存在的问题5_nmcli 补充 1_问题原因 CentOS 7 于 2014年6月发布&#xff0c;基于 RHEL 7&#xff0c;并在 2024年6月30日 结束维护。 CentOS 9 作为目前的最新版本&#xff0c;今天闲来闲来无事下载下来后…

面阵相机的使用和注意事项

引言 面阵相机&#xff08;Area Scan Camera&#xff09;是一种广泛应用于工业视觉、医学成像、安防监控以及科研领域的图像采集设备。与线扫相机不同&#xff0c;面阵相机的传感器包含多行像素&#xff08;例如1280x1024、1920x1080等&#xff09;&#xff0c;能够在一个曝光…

损失函数分类

1. NLLLoss&#xff08;负对数似然损失&#xff09; 定义&#xff1a; 直接对预测的概率 p(yi) 的负对数求平均。通常配合 Softmax 使用&#xff0c;输入为对数概率。 优点&#xff1a; 对离散分类问题效果良好。更灵活&#xff0c;用户可以自行计算 Softmax。 缺点&#x…

python冒号是什么意思

例如&#xff1a; user: User User.objects.filter(iddata.get(uid)).first() 变量名后面的冒号是&#xff1a;类型注解&#xff0c;3.6以后加入的&#xff0c;冒号右边是类型&#xff0c;仅仅是注释&#xff0c;有些鸡肋。 变量注释的语法&#xff1a;注释变量类型,明确指出…

打字指法和键盘按键功能简介

打字指法和键盘按键功能简介 一、打字指法简介&#xff08;附视频演示&#xff09; 基本要领和练习步骤&#xff1a; 手指位置&#xff1a;正常情况下&#xff0c;大拇指放在空格键上&#xff0c;其余四个手指分别放在 ASDF 和 JKL; 键上。 打字姿势&#xff1a;打字时手指…

H3C ACL实验

实验拓扑 实验需求 按照图示配置 IP 地址全网路由互通在 SERVER1 上配置开启 TELNET 和 FTP 服务配置 ACL 实现如下效果 192.168.1.0/24网段不允许访问 192.168.2.0/24 网段&#xff0c;要求使用基本 ACL 实现 PC1 可以访问 SERVER1 的 TELNET 服务&#xff0c;但不能访问 FTP…

【热门主题】000077 物联网智能项目:开启智能未来的钥匙

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…

AIGC时代 | 如何从零开始学网页设计及3D编程

文章目录 一、网页设计入门1. 基础知识2. 学习平台与资源3. 示例代码&#xff1a;简单的HTMLCSSJavaScript网页 二、3D编程入门1. 基础知识2. 学习平台与资源3. 示例代码&#xff1a;简单的Unity 3D游戏 《编程真好玩&#xff1a;从零开始学网页设计及3D编程》内容简介作者简介…

Java并发07之ThreadLocal

文章目录 1 ThreadLocal原理2 内部结构3 内存泄露问题4 entry的key为什么被设计为弱引用 1 ThreadLocal原理 ThreadLocal类用来提供线程内部的局部变量。这种变量在多线程环境下访问时能保证各个线程的变量相对独立于其他线程内的变量。ThreadLocal实例通常来说都是private st…