flutter开发实战-设置bottomNavigationBar中间按钮悬浮效果
flutter开发实战-设置bottomNavigationBar中间按钮悬浮的效果
在使用tabbar时候,可以使用bottomNavigationBar来设置中间凸起的按钮,如下
一、效果图
中间按钮凸起的效果图如下

二、实现代码
我们使用BottomAppBar
一个容器,通常与[Sscaffold.bottomNavigationBar]一起使用。
使用的示例代码
Scaffold(bottomNavigationBar: BottomAppBar(color: Colors.white,child: bottomAppBarContents,),floatingActionButton: const FloatingActionButton(onPressed: null),)
设置中间的凸起按钮,可以设置BottomAppBar的shape为:CircularNotchedRectangle,中间悬浮按钮嵌入BottomAppBar
设置notchMargin缺口边距。
设置floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,//放在中间
完整代码如下
import 'package:flutter/material.dart';class TabDemoPage extends StatefulWidget {const TabDemoPage({super.key});@overrideState<TabDemoPage> createState() => _TabDemoPageState();
}class _TabDemoPageState extends State<TabDemoPage> {List<String> pageTitles = [];List<Widget> pageChildren = [];int currentIndex = 0;@overridevoid initState() {// TODO: implement initStatepageTitles = ["首页","我的"];pageChildren = [Container(color: Colors.lightBlueAccent,),Container(color: Colors.pinkAccent,)];super.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(pageTitles[currentIndex]),///导航栏标题centerTitle: true,///导航栏标题居中显示(IOS默认居中,Android默认靠左)),body: pageChildren[currentIndex],bottomNavigationBar: BottomAppBar(shape: CircularNotchedRectangle(), ///中间悬浮按钮嵌入BottomAppBarnotchMargin: 10,///缺口边距child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [IconButton(icon: Icon(Icons.home),onPressed: (){setState(() {currentIndex = 0;});}),IconButton(icon: Icon(Icons.person),onPressed: (){setState(() {currentIndex = 1;});}),],),),floatingActionButton: FloatingActionButton(foregroundColor: Colors.white,elevation: 10.0,///阴影onPressed: (){},child: Icon(Icons.add),),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//放在中间);}
}
三、小结
flutter开发实战-设置bottomNavigationBar中间按钮悬浮的效果
学习记录,每天不停进步。
相关文章:
flutter开发实战-设置bottomNavigationBar中间按钮悬浮效果
flutter开发实战-设置bottomNavigationBar中间按钮悬浮的效果 在使用tabbar时候,可以使用bottomNavigationBar来设置中间凸起的按钮,如下 一、效果图 中间按钮凸起的效果图如下 二、实现代码 我们使用BottomAppBar 一个容器,通常与[Sscaf…...
不同参数规模大语言模型在不同微调方法下所需要的显存总结
原文来自DataLearnerAI官方网站: 不同参数规模大语言模型在不同微调方法下所需要的显存总结 | 数据学习者官方网站(Datalearner)https://www.datalearner.com/blog/1051703254378255 大模型的微调是当前很多人都在做的事情。微调可以让大语言模型适应特定领域的任…...
Crow:Middlewares 庖丁解牛6 middleware_call_helper
Crow:http请求到Rule绑定的handler_的调用链-CSDN博客 介绍了handler_的调用顺序,其中的一个调用过程是Connection::->handle void handle() {...ctx_ = detail::context<Middlewares...>();req_.middleware_context = static_cast<void*>(&ctx_);req_.m…...
MyBatis:Generator
MyBatis Generator附批量操作分页查询存储过程 Generator 介绍网址:Introduction to MyBatis Generator Generator ,一个用于 MyBatis 的代码生成工具,可以根据数据库表结构自动生成对应的实体类、DAO 接口和 SQL 映射文件,提高…...
rabbitmq的事务实现、消费者的事务实现
RabbitMQ提供了事务机制,可以确保消息在发送和确认过程中的一致性。使用事务机制可以将一系列的消息操作(发送、确认、回滚)作为一个原子操作,要么全部执行成功,要么全部回滚。 下面是使用RabbitMQ事务的一般步骤&…...
龙芯杯个人赛串口——做一个 UART串口——RS-232
文章目录 Async transmitterAsync receiver1. RS-232 串行接口的工作原理DB-9 connectorAsynchronous communicationHow fast can we send data? 2.波特率时钟生成器Parameterized FPGA baud generator 3.RS-232 transmitter数据序列化完整代码: 4.RS-232 receiver…...
验证码服务使用指南
验证码服务使用指南 1 部署验证码服务 1.1 基础环境 Java 1.8 Maven3.3.9 1.2 安装Redis 参考“Redis安装指南” 1.3 部署验证码服务 1.3.1 下载源码 使用git从远程下载验证码服务代码(开源)。 1.3.2 使用idea打开项目 使用idea打开上一步下载的sailing目录…...
js中Math.min(...arr)和Math.max(...arr)的注意点
当arr变量为空数组时,这两个函数和不传参数时的结果是一样的 Math.max() // -Infinity Math.max(...[]) // -InfinityMath.min() // Infinity Math.min(...[]) // Infinity...
【zookeeper特点和集群架构】
文章目录 1. Zookeeper介绍2、ZooKeeper数据结构3、Zookeeper集群架构 1. Zookeeper介绍 ZooKeeper 是一个开源的分布式协调框架,是Apache Hadoop 的一个子项目,主要用来解决分 布式集群中应用系统的一致性问题。Zookeeper 的设计目标是将那些复杂且容易…...
MySQL集群架构搭建以及多数据源管理实战
MySQL集群架构搭建以及多数据源管理实战 数据库的分库分表操作,是互联网大型应用所需要面对的最核心的问题。因为数据往往是一个应用最核心的价值所在。但是,在最开始的时候,需要强调下,在实际应用中,对于数据库&a…...
C# WPF上位机开发(从demo编写到项目开发)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 C# WPF编程,特别是控件部分,其实学起来特别快。只是后面多了多线程、锁、数据库、网络这部分稍微复杂一点,不过…...
微信小程序引入 vant组件(详细步骤)
vant官方地址 https://vant-contrib.gitee.io/vant-weapp/#/quickstart 步骤一、 通过 npm 安装 # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production步骤二 修改 app.js…...
Django之按钮(actions)
开篇就是道歉,哈哈哈哈,托更了好久好久,最近太忙了没啥时间更新,各位看官有催更的阔以给我私信哇,希望各位看官给个三连!!!😍😍😍😍 …...
从YOLOv1到YOLOv8的YOLO系列最新综述【2023年4月】
作者:Juan R. Terven 、Diana M. Cordova-Esparaza 摘要:YOLO已经成为机器人、无人驾驶汽车和视频监控应用的核心实时物体检测系统。我们对YOLO的演变进行了全面的分析,研究了从最初的YOLO到YOLOv8每次迭代的创新和贡献。我们首先描述了标准…...
浙江大唐乌沙山电厂选择ZStack Cloud打造新一代云基础设施
浙江大唐乌沙山电厂选择云轴科技ZStack Cloud云平台为其提供高性能、高可用的云主机、云存储和云网络,构建了简单、稳定、安全、高效的云基础设施;通过ZStackCloud为其提供可视化服务编排、多租户自服务等模块,帮助电厂提高IT资源利用率&…...
电脑开机快捷启动,启动菜单没有u盘怎么办
电脑开机快捷启动键找不到u盘怎么办 对于快捷启动键找不到u盘的问题,小编很了解其中的门道,因为开机找不到u盘是我们使用电脑时候的常见问题。那么我们到底要如何解决开机找不到u盘的问题呢?其实方法还是蛮简单的,下面小编就来教大家电脑开…...
线程的同步与互斥
抢票的例子 竞争过程 进程A被切走 进程B被切走 结论: 互斥 int pthread_mutex_init(pthread_mutex_t *mutex, const pthread_mutexattr_t *attr); mutex: 指向要初始化的互斥锁的指针。attr: 用于设置互斥锁属性的指针,通常可以传入 NULL 以使用默认属性…...
低代码实施复杂应用的实践方法
内容来自演讲:韦有炬 | 柳州知行远企业管理咨询有限公司 | 总经理 摘要 本文探讨了在全民开发时代如何使用低代码实施复杂应用并降低上线风险。文章分析了复杂系统实施失败的风险,包括项目规划不周、人员变动、企业基础管理不足等,并对比了低…...
算法学习系列(十一):KMP算法
目录 引言一、算法概念二、题目描述三、思路讲解三、代码实现四、测试 引言 这个KMP算法就是怎么说呢,就是不管算法竞赛还是找工作笔试面试,都是非常爱问爱考的,其实也是因为这个算法比较难懂,其实就是很难,所以非常个…...
****Linux下Mysql的安装和配置
1、安装mysql 1.1、安装mysql sudo aptitude search mysql sudo apt-get install mysql-server mysql-client1.2、启动停止mysql: service mysql stop service mysql restart mysql -u debian-sys-maint -p mysql命令详细解释如下: 一、 启动方式 1、使用 service 启动…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
