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中间按钮悬浮的效果

学习记录,每天不停进步。

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

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

相关文章

@z-utils组 重构和自动化实现

highlight: monokai theme: github 包简介 z-utils组 是一个可以在vue/react/pure js 中使用的工具包&#xff0c;它包含三个子类&#xff0c;分别为 z-utils/base, z-utils/react, z-utils/vue 三个分别在不同区域使用。 他是原 zzy-javascript-devtools 的重构版本&#xf…

仅操作一台设备,如何实现本地访问另一个相同网段的私网?

正文共&#xff1a;1034 字 8 图&#xff0c;预估阅读时间&#xff1a;4 分钟 书接上文&#xff08;地址重叠时&#xff0c;用户如何通过NAT访问对端IP网络&#xff1f;&#xff09;&#xff0c;我们已经通过两台设备的组合配置实现了通过IP地址进行访问。但一般场景中&#xf…

实习课知识整理4:点击某个商品如何跳转到并展示出商品详情页

项目情景&#xff1a;当我们点击某个商品时&#xff0c;我们需要查看商品的具体的信息并进行购买的操作 简单理解以下就是&#xff0c;当我们点击一个url链接时&#xff0c;该链接需要携带一个参数到后端&#xff0c;一般设为商品的Id&#xff0c;然后后端通过Id从数据库中查找…

【小白攻略】php 小数转为百分比,保留两位小数的函数

php 小数转为百分比 首先&#xff0c;最简单直观的方法是利用PHP内置的number_format函数。该函数可以对一个数字进行格式化&#xff0c;并可以设置小数点后的精度。通过将小数乘以100&#xff0c;再用number_format函数将结果格式化为百分比形式&#xff0c;即可达到将小数转为…

CentOs 安装MySQL

1、拉取安装包 wget --no-check-certificate dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm 成功拉取 2、安装 yum install mysql-community-release-el6-5.noarch.rpm 过程中可能需要你同意一些东西&#xff0c;y 即可 然后稍微检查一下 yum repolist enabled…

Kioptrix-3

靶场下载地址 https://download.vulnhub.com/kioptrix/KVM3.rar 信息收集 # Nmap 7.94 scan initiated Thu Dec 21 21:52:25 2023 as: nmap -sn -oN live.nmap 192.168.1.0/24 Nmap scan report for 192.168.1.1 (192.168.1.1) Host is up (0.00048s latency). MAC Address:…

持续集成交付CICD:Jira 远程触发 Jenkins 实现更新 GitLab 分支

目录 一、实验 1.环境 2.GitLab 查看项目 3.Jira新建模块 4. Jira 通过Webhook 触发Jenkins流水线 3.Jira 远程触发 Jenkins 实现更新 GitLab 分支 二、问题 1.Jira 配置网络钩子失败 2. Jira 远程触发Jenkins 报错 一、实验 1.环境 &#xff08;1&#xff09;主机 …

柔性数组(结构体成员)

目录 前言&#xff1a; 柔性数组&#xff1a; 给柔性数组分配空间&#xff1a; 调整柔性数组大小&#xff1a; 柔性数组的好处&#xff1a; 前言&#xff1a; 柔性数组&#xff1f;可能你从未听说&#xff0c;但是确实有这个概念。听名字&#xff0c;好像就是柔软的数…

Web前端 ---- 【Vue】vue路由守卫(全局前置路由守卫、全局后置路由守卫、局部路由path守卫、局部路由component守卫)

目录 前言 全局前置路由守卫 全局后置路由守卫 局部路由守卫之path守卫 局部路由守卫之component守卫 前言 本文介绍Vue2最后的知识点&#xff0c;关于vue的路由守卫。也就是鉴权&#xff0c;不是所有的组件任何人都可以访问到的&#xff0c;需要权限&#xff0c;而根据权限…

深度学习中的池化

1 深度学习池化概述 1.1 什么是池化 池化层是卷积神经网络中常用的一个组件&#xff0c;池化层经常用在卷积层后边&#xff0c;通过池化来降低卷积层输出的特征向量&#xff0c;避免出现过拟合的情况。池化的基本思想就是对不同位置的特征进行聚合统计。池化层主要是模仿人的…

C# 使用Socket进行简单的通讯

目录 写在前面 代码实现 服务端部分 客户端部分 运行示例 总结 写在前面 在.Net的 System.Net.Sockets 命名空间中包含托管的跨平台套接字网络实现。 System.Net 命名空间中的所有其他网络访问类均建立在套接字的此实现之上。 其中的Socket 类是基于与 Linux、macOS 或 W…

SpringBoot 3 集成Hive 3

前提条件: 运行环境&#xff1a;Hadoop 3.* Hive 3.* MySQL 8 &#xff0c;如果还未安装相关环境&#xff0c;请参考&#xff1a;Hive 一文读懂 Centos7 安装Hadoop3 单机版本&#xff08;伪分布式版本&#xff09; SpringBoot 2 集成Hive 3 pom.xml <?xml ver…

【SpringCloud】-GateWay源码解析

GateWay系列 【SpringCloud】-GateWay网关 一、背景介绍 当一个请求来到 Spring Cloud Gateway 之后&#xff0c;会经过一系列的处理流程&#xff0c;其中涉及到路由的匹配、过滤器链的执行等步骤。今天我们来说说请求经过 Gateway 的主要执行流程和原理是什么吧 二、正文 …

Bwapp学习笔记

1.基本sql语句 #求绝对值 select abs(-1) from dual; #取余数 select mod(10,3); #验证show databases结果是取之于schemata表的 show databases; select schema_name from information_schema.schemata; #查询当前的数据库 select database(); -- 查询数据库版本 s…

HTML5刷题笔记

在 HTML5 中&#xff0c;onblur 和 onfocus 是&#xff1a;事件属性 onblur 和 onfocus 属于焦点事件&#xff1a; onblur&#xff1a;失去焦点 onfocus&#xff1a;获取焦点 HTML5事件window 事件属性 针对 window 对象触发的事件&#xff1a; onafterprint script 文档…

Python入门学习篇(六)——for循环while循环

1 for循环 1.1 常规for循环 1.1.1 语法结构 for 变量名 in 可迭代对象:# 遍历对象时执行的代码 else:# 当for循环全部正常运行完(没有报错和执行break)后执行的代码1.1.2 示例代码 print("----->学生检查系统<------") student_lists["张三",&qu…

Python运算符函数化模块

文章目录 标准运算符替代函数实用工具itemgetterattrgettermethodcaller 刷完这60个标准库模块&#xff0c;成为Python骨灰级玩家 作为编程语言&#xff0c;如果无法做到Lisp的括号风格&#xff0c;那么必然羞于承认自己是函数式。python的lambda表达式以及各种生成式&#xf…

网络基础知识制作网线了解、集线器、交换机与路由器

目录 一、网线的制作 1.1、材料 1.2、网线的标准类别 二、集线器、交换机介绍 2.1、概念&#xff1a; 2.2、OSI七层模型 2.3、TCP/IP四层 三、路由器的配置 3.1、概念 3.2、四个模块 1、 网络状态 2、设备管理 3、应用管理 无人设备接入控制 无线桥接 信号调节…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)ChannelMap 模块的实现

&#xff08;三&#xff09;ChannelMap 模块的实现 这个模块其实就是为Channel来服务的&#xff0c;前面讲了Channel这个结构体里边它封装了文件描述符。假如说我们得到了某一个文件描述符&#xff0c;需要基于这个文件描述符进行它对应的事件处理&#xff0c;那怎么办呢&…

面试官:看你简历了解过并发,我们简单聊一聊

前言&#xff1a; 今天和大家探讨最近的面试题&#xff0c;好久没有面试了&#xff0c;所以在此记录一下。本篇文章主要讲解CyclicBarrier和CountDownLatch的知识。该专栏比较适合刚入坑Java的小白以及准备秋招的大佬阅读。 如果文章有什么需要改进的地方欢迎大佬提出&#xf…