当前位置: 首页 > 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);},))],),),);}
http://www.lryc.cn/news/495464.html

相关文章:

  • <项目代码>YOLOv8 红绿灯识别<目标检测>
  • HTMLHTML5革命:构建现代网页的终极指南 - 4. 使用元素
  • 使用 Selenium 和 Python 爬取腾讯新闻:从基础到实践
  • CAD深度清理工具-AVappsDrawingPurge9.0.0(2024.8.27版本) 支持版本CAD2022-2025-供大家学习研究参考
  • vue3+vite使用vite-plugin-electron-renderer插件和script-loader插件有冲突
  • 领养我的宠物:SpringBoot开发指南
  • 直击高频编程考点:聚焦新版综合编程能力考查汇总
  • 【EI会议征稿 | ACM出版 】第六届计算机信息和大数据应用国际学术会议(CIBDA 2025)
  • 淘宝商品数据获取:Python爬虫技术的应用与实践
  • 【C++】getchar() 与 putchar() 的深入解析
  • Centos7安装MySQL8.0详细教程(压缩包安装方式)
  • 深度学习的python基础(1)
  • 拥抱 OpenTelemetry:阿里云 Java Agent 演进实践
  • 003 MATLAB基础计算
  • 安卓逆向之Android-Intent介绍
  • 数据库日期时间用什么类型?
  • Python中字符串和正则表达式
  • Leecode刷题C语言之N皇后
  • 即时通讯| IM+RTC在AI技术加持下的社交体验
  • repo仓库转移到自己本地的git服务器
  • 微服务即时通讯系统的实现(服务端)----(2)
  • 人工智能-深度学习-神经网络-激活函数
  • vue3+ts+uniapp微信小程序顶部导航栏
  • IAR中编译下载未下载问题
  • springboot(20)(删除文章分类。获取、更新、删除文章详细)(Validation分组校验)
  • 英语系统语法书面记载:高级语法 8 的状语从句
  • C语言:深入理解指针(1)
  • priority_queue--优先队列
  • Paper -- 建筑物高度估计 -- 基于深度学习、图像处理和自动地理空间分析的街景图像建筑高度估算
  • 开发一套ERP 第八弹 RUst 插入数据