当前位置: 首页 > news >正文

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);},))],),),);}

相关文章:

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

关键代码: Scaffold中设置floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked和extendBody: true&#xff0c; BottomAppBar中设置shape: const CircularNotchedRectangle() Scaffold(extendBody: true,//body是否延伸脚手架底部&#xff0c;在底部导航…...

<项目代码>YOLOv8 红绿灯识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…...

HTMLHTML5革命:构建现代网页的终极指南 - 4. 使用元素

HTML&HTML5革命&#xff1a;构建现代网页的终极指南 4. 使用元素 大家好&#xff0c;我是莫离老师。 到目前为止&#xff0c;我们已经了解了 HTML 和 HTML5 的基础概念&#xff0c;并且选择了适合自己的开发工具。 今天&#xff0c;我们将迈出实际开发的第一步&#xff0c…...

使用 Selenium 和 Python 爬取腾讯新闻:从基础到实践

使用 Selenium 和 Python 爬取腾讯新闻&#xff1a;从基础到实践 在这篇博客中&#xff0c;我们将介绍如何利用 Selenium 和 Python 爬取腾讯新闻的内容&#xff0c;并将结果保存到 CSV 文件中。本教程包含以下内容&#xff1a; 项目简介依赖安装实现功能的代码实现中的关键技…...

CAD深度清理工具-AVappsDrawingPurge9.0.0(2024.8.27版本) 支持版本CAD2022-2025-供大家学习研究参考

图形文件DWG体积很大&#xff1a;通常没有明显的数据。同时&#xff0c;还其他症状包括&#xff1a; &#xff08;1&#xff09;无法复制和粘贴图元。 &#xff08;2&#xff09;悬挂较长时间选择文本与 “特性”选项板上打开。 &#xff08;3&#xff09;图形文件需要很长时间…...

vue3+vite使用vite-plugin-electron-renderer插件和script-loader插件有冲突

报错信息&#xff1a;Error: Dynamic require of "path" is not supported 报错问题是在使用vite-plugin-electron-renderer插件不支持import动态引入&#xff0c;该报错信息并不准确&#xff0c;实际原因是vite-plugin-electron-renderer插件和script-loader插件有…...

领养我的宠物:SpringBoot开发指南

第2章 开发环境与技术 本章节对开发宠物领养系统需要搭建的开发环境&#xff0c;还有宠物领养系统开发中使用的编程技术等进行阐述。 2.1 Java语言 Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始的诞生&#xff0c;不仅仅是创造者感觉C语言在编…...

直击高频编程考点:聚焦新版综合编程能力考查汇总

目录 一、业务性编程和广度能力考查 &#xff08;一&#xff09;基本定义 &#xff08;二&#xff09;必要性分析 二、高频考查样题&#xff08;编程扩展问法&#xff09; 考题1: 用java 代码实现一个死锁用例&#xff0c;说说怎么解决死锁问题&#xff1f;&#xff08;高…...

【EI会议征稿 | ACM出版 】第六届计算机信息和大数据应用国际学术会议(CIBDA 2025)

大会官网&#xff1a;www.ic-cibda.org 大会时间&#xff1a;2025年3月14-16日 大会地点&#xff1a;中国-武汉 收录检索&#xff1a;EI Compendex&#xff0c;Scopus 接受/拒稿通知&#xff1a;投稿后约3~8天 大会简介 第六届计算机信息和大数据应用国际学术会议&#xff…...

淘宝商品数据获取:Python爬虫技术的应用与实践

引言 随着电子商务的蓬勃发展&#xff0c;淘宝作为中国最大的电商平台之一&#xff0c;拥有海量的商品数据。这些数据对于市场分析、消费者行为研究、商品推荐系统等领域具有极高的价值。然而&#xff0c;如何高效、合法地从淘宝平台获取这些数据&#xff0c;成为了一个技术挑…...

【C++】getchar() 与 putchar() 的深入解析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;函数原型及头文件包含&#x1f4af; getchar() 和 putchar() 的基本概念2.1 getchar() 函数2.2 putchar() 函数 &#x1f4af;输入输出的关系与返回值的解释3.1 getchar() …...

Centos7安装MySQL8.0详细教程(压缩包安装方式)

本章教程&#xff0c;主要介绍如何在Centos7上安装MySQL8.0版本数据库&#xff08;压缩包安装方式&#xff09; 一、卸载系统自带的 Mariadb 1、查询 rpm -qa|grep mariadb2.、卸载 如果有查询结果&#xff0c;就进行卸载&#xff0c;没有就跳过该步骤。 rpm -e --nodeps mar…...

深度学习的python基础(1)

一.tensor创建 1.张量的定义 张量在形式上就是多维数组&#xff0c;例如标量就是0维张量&#xff0c;向量就是一维张量&#xff0c;矩阵就是二维张量&#xff0c;而三维张量就可以想象RGB图片&#xff0c;每个channel是一个二维的矩阵&#xff0c;共有三个channel&#xff0…...

拥抱 OpenTelemetry:阿里云 Java Agent 演进实践

作者&#xff1a;陈承 背景 在 2018 年的 2 月&#xff0c;ARMS Java Agent 的第一个版本正式发布&#xff0c;为用户提供无侵入的的可观测数据采集服务。6 年后的今天&#xff0c;随着软件技术的迅猛发展、业务场景的逐渐丰富、用户规模的快速增长&#xff0c;我们逐渐发现过…...

003 MATLAB基础计算

01 方程组的求解 多项式及其运算 多项式在MATLAB中以向量形式存储。 即n次多项式用一个长度为n1的系数向量来表示&#xff0c;且按降幂&#xff0c;缺少的幂次对应的向量元素为0。 多项式的运算主要包括多项式的四则运算、求导、求值和求根运算 多项式的四则运算&#xff1a…...

安卓逆向之Android-Intent介绍

Intent是各个组件之间交互的一种重要方式&#xff0c;它不仅可以指明当前组件想要执行的动作&#xff0c;而且还能在各组件之间传递数据。Intent一般可用于启动Activity、启动Service、发送广播等场景。Intent有多个构造函数的重载。 显式intent 显式 Intent 明确指定要启动的…...

数据库日期时间用什么类型?

数据库中的日期时间类型主要包括DATE、TIME、DATETIME和TIMESTAMP等&#xff0c;它们在存储、格式和范围等方面有所不同。以下是这些类型的详细说明和异同比较&#xff1a; 1. DATE类型 用途&#xff1a;用于存储日期值&#xff0c;不包含时间部分。格式&#xff1a;YYYY-MM-…...

Python中字符串和正则表达式

Python中字符串和正则表达式 在Python编程中&#xff0c;字符串是最常用的数据类型之一。字符串用于表示文本数据&#xff0c;而正则表达式则是一种强大的工具&#xff0c;用于处理和匹配字符串中的模式。本文将介绍Python中的字符串操作、字符串格式化以及如何使用正则表达式…...

Leecode刷题C语言之N皇后

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; int solutionsSize;char** generateBoard(int* queens, int n) {char** board (char**)malloc(sizeof(char*) * n);for (int i 0; i < n; i) {board[i] (char*)malloc(sizeof(char) * (n 1))…...

即时通讯| IM+RTC在AI技术加持下的社交体验

即时通讯作为互联网的重要应用之一&#xff0c;见证了中国互联网30年发展的辉煌历程。 它从最初的文字交流&#xff0c;发展到如今的语音、视频通话&#xff0c;甚至是虚拟现实社交&#xff0c;已经渗透到生活的社交、娱乐、商务等方方面面&#xff0c;成为现代社会不可或缺的一…...

手把手教你用YOLOv5训练自己的交通标志数据集(从LabelImg标注到模型部署)

从零构建YOLOv5交通标志检测器的实战指南 在自动驾驶和智能交通系统快速发展的今天&#xff0c;准确识别道路标志已成为计算机视觉领域的重要应用场景。不同于传统图像处理方法&#xff0c;基于深度学习的目标检测技术能够适应复杂环境变化&#xff0c;而YOLOv5以其卓越的速度-…...

UEFI安全启动恢复流程文档:详细操作指南与故障排除

UEFI安全启动恢复流程文档&#xff1a;详细操作指南与故障排除 【免费下载链接】edk2 EDK II 项目地址: https://gitcode.com/gh_mirrors/ed/edk2 UEFI安全启动是现代计算机系统的重要安全功能&#xff0c;它通过数字签名验证确保只有受信任的操作系统和引导加载程序能够…...

Vision-Agents:构建下一代实时视觉AI代理的终极指南

Vision-Agents&#xff1a;构建下一代实时视觉AI代理的终极指南 【免费下载链接】Vision-Agents Open Vision Agents by Stream. Build Vision Agents quickly with any model or video provider. Uses Streams edge network for ultra-low latency. 项目地址: https://gitco…...

Qwen3-0.6B-FP8快速上手:无需CUDA环境的CPU友好型大模型对话工具指南

Qwen3-0.6B-FP8快速上手&#xff1a;无需CUDA环境的CPU友好型大模型对话工具指南 想体验大模型对话&#xff0c;但被动辄几十GB的模型和昂贵的显卡劝退&#xff1f;今天给大家介绍一个“小钢炮”——Qwen3-0.6B-FP8对话工具。它只有6亿参数&#xff0c;经过FP8量化后体积小巧&…...

【数据结构实战】循环队列FIFO 特性生成六十甲子(天干地支纪年法),实现传统文化里的 “时间轮回”

前言天干地支纪年法是中国传统文化的重要组成部分&#xff0c;十天干与十二地支依次相配&#xff0c;组成六十甲子。本文将使用循环队列这一数据结构完成六十甲子的生成&#xff0c;严格遵循题目要求&#xff1a;定义两个循环队列&#xff0c;分别存储十天干、十二地支队列空则…...

3分钟掌握Umi-OCR插件:打造你的专属文字识别工具箱

3分钟掌握Umi-OCR插件&#xff1a;打造你的专属文字识别工具箱 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins 还在为不同场景下的文字识别需求而烦恼吗&#xff1f;Umi-OCR插件库为你提供了完美的解决…...

变压器绕组类型 | 高频变压器绕制要点

注&#xff1a;本文为 “变压器绕制” 相关合辑。 英文引文&#xff0c;机翻未校。 如有内容异常&#xff0c;请看原文。 图片清晰度受引文原图所限。 变压器绕组类型&#xff1a;圆筒式、螺旋式、交叉式与饼式绕组 Types of Transformer Windings: Cylindrical, Helical, Cro…...

C# 操作XML

https://blog.csdn.net/2609_95039045/article/details/157469812?fromshareblogdetail&sharetypeblogdetail&sharerId157469812&sharereferPC&sharesourcem0_68206177&sharefromfrom_link 这个写的好 https://blog.csdn.net/lizhenxiqnmlgb/article/det…...

在单细胞测序数据分析中,barcodes、features和matrix是三个最核心的基础文件,它们共同构成了所有分析的基石。

在GEO&#xff08;Gene Expression Omnibus&#xff09;数据库中下载单细胞数据时&#xff0c;最常见的数据存储和提供形式主要有以下四种类型&#xff1a;10x Genomics 标准格式&#xff08;最主流&#xff09;在GEO的数据集中&#xff0c;我们通常会找到一个包含以下三个核心…...

STM32 RTC硬件自检工具CheckRTC:轻量级实时时钟可信度验证

1. 项目概述CheckRTC 是一个面向 STM32 系列微控制器的轻量级 RTC&#xff08;实时时钟&#xff09;模块自检与功能验证程序。其核心目标并非提供通用 RTC 驱动&#xff0c;而是作为嵌入式底层开发中关键的硬件可信度验证工具——在系统启动早期、固件升级后、或长期运行出现时…...