FloatingActionBar组件的用法

文章目录

  • 1 概念介绍
  • 2 使用方法
  • 3 示例代码

我们在上一章回中介绍了如何使用BottomNavigationBar切换页面,本章回中将介绍浮动按钮:FloatingActionBar。闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

浮动按钮就是悬浮在屏幕上的按钮,通常们于屏幕右下角或者底部中央位置,因此它经常和BottomNavitationBar配合使用,本章回中将详细介绍它的使用方法。

2 使用方法

和其它的Widget一样,浮动按钮提供了相关的属性来控制自己,下面是常用的属性:
backgroundColor属性用来控制浮动按钮的背景颜色,如果不设置默认为蓝色;
shape属性用来控制浮动按钮的形状,如果不设置默认为圆形;
child属性用来控制浮动按钮上的文字或者图标,默认什么也不显示;建议设置此属性;
onPressed属性用来响应浮动按钮的点击事件,该属性必须设置,不然会报编译错误;
注意:浮动按钮是Scaffold Widget的属性,我们给它的floatingActionButton属性赋值后才可以显示浮动按钮,还有一个floatingActionButtonLocation
属性也建议修改,该属性主要用来控制浮动按钮的显示位置,如果不赋值,默认在屏幕右下角显示。常用的值是FloatingActionButtonLocation.centerFloat,
该值表示在屏幕中间,底部导航栏上方显示浮动按钮。

3 示例代码

下面是浮动按钮的代码,为了控制它的大小,我们把它放到了Container容器中,并且设置了容器的大小和边框。下面是详细的代码。

  final Widget _floatingActionButton = Container(
    width: 90.0,
    height: 90.0

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络习题( 第3章 物理层 第4章 数据链路层 )

第3章 物理层 一、单选题 1、下列选项中,不属于物理层接口规范定义范畴的是( )。 A、 接口形状 B、 引脚功能 C、 传输媒体 D、 信号电平 正确答案: C 2、在物理层接口特性中,用于描述完成每种功能的事件发…

SemiDrive E3 MCAL 开发系列(6)– Icu 模块的使用

一、 概述 本文将会介绍 SemiDrive E3 MCAL Icu 模块的简介以及基本配置,其中还会涉及到 Xtrg 模块的配置。此外会结合实际操作的介绍,帮助新手快速了解并掌握这个模块的使用,文中的 MCAL 是基于 PTG3.0 的版本,开发板是官方的 …

智慧地下采矿:可视化引领未来矿业管理

图扑智慧地下采矿可视化平台通过整合多源数据,提供实时 3D 矿井地图及分析,提升了矿产开采的安全性与效率,为矿业管理提供数据驱动的智能决策支持,推动行业数字化转型。

MySQL 服务器简介

通常所说的 MySQL 服务器指的是mysqld程序,当运⾏mysqld后对外提供MySQL 服务,这个专题的内容涵盖了以下关于MySQL 服务器以及相关配置的内容,包括: 服务器⽀持的启动选项。可以在命令⾏和配置⽂件中指定这些选项。 服务器系统变…

echarts没有map地图解决方案

在echarts4.9以后的版本中移除了map地图 使用命令npm install echarts --save它会下载最新版本 的echarts 所有我们要下载回echarts4.9版本中 如果已经下载了最新的可以卸载 // 卸载echarts运行: npm uninstall echarts然后再去下载4.9版本 // 安装4.9版本的ech…

Java高频面试之SE-06

hello啊,各位老6!!!本牛马baby今天又来了!哈哈哈哈哈嗝🐶 访问修饰符 public、private、protected的区别是什么? 在Java中,访问修饰符用于控制类、方法和变量的访问权限。主要的访…

pymysql中的问题

首先像代码所示: 正确输出了mysql版本,但是,在pycharm链接mysql成功后创建表时又出现报错内容: Traceback (most recent call last): File "D:\PycharmProjects\PythonProject0\pymysqllearning.py", line 13, in &…

VuePress搭建个人博客

VuePress搭建个人博客 官网地址: https://v2.vuepress.vuejs.org/zh/ 相关链接: https://theme-hope.vuejs.press/zh/get-started/ 快速上手 pnpm create vuepress vuepress-starter# 选择简体中文、pnpm等, 具体如下 .../19347d7670a-1fd8 | 69 .../19…

【DC简介--Part1】

DC简介-Part1 1 overview1.1 DC操作步骤1.2 Steps1.2.1 Develop HDL files1.2.2 Specify libraries1.2.3 Read design1.2.4 Define design environment1.2.5 Set design constraints1.2.6 Select compile strategy1.2.7 Synthesize and optimize the design1.2.8 Analyze and r…

【Unity3D】ECS入门学习(十二)IJob、IJobFor、IJobParallelFor

IJob&#xff1a;开启单个线程进行计算&#xff0c;线程内不允许对同一个数据进行操作&#xff0c;也就是如果你想用多个IJob分别计算&#xff0c;将其结果存储到同一个NativeArray<int>数组是不允许的&#xff0c;所以不要这样做&#xff0c;如下例子就是反面教材&#…

HCIA-Access V2.5_7_1_XG(S)原理_系统概述

近年来&#xff0c;随着全球范围内接入市场的飞快发展以及全业务运营的快速开展&#xff0c;已有的PON技术标准在带宽需求&#xff0c;业务支撑能力以及接入节点设备和配套设备的性能提升等方面都面临新的升级需求&#xff0c;而GPON已经向10G GPON演示&#xff0c;本章将介绍1…

imgproxy图像处理的高效与安全

摘要 imgproxy作为一个高效且安全的独立服务器,为图像处理提供了全新的解决方案。它不仅简化了图像调整和转换的过程,还极大地提升了处理速度,确保了整个流程的安全性。通过集成imgproxy,用户可以轻松优化网页上的图像,提高加载速度,改善用户体验。本文将深入探讨imgpro…

CPT203 Software Engineering 软件工程 Pt.4 软件设计(中英双语)

文章目录 6. 设计概念6.1 Principle6.2 Concepts6.2.1 General design concepts&#xff08;常见的设计概念&#xff09;6.2.1.1 Abstraction&#xff08;抽象&#xff09;6.2.1.2 Modularity&#xff08;模块化&#xff09;6.2.1.3 Functional independence&#xff08;功能独…

MultiDiff 论文解读

一、CameraCtrl AnimateDiff->MotionCtrl->CameraCtrl CameraCtrl将多帧图像的Plucker射线输入到Camera Encoder&#xff0c;Plucker射线可以表示每个像素对应的光线方向。 Camera Encoder包括ResNet block和Temporal Attention&#xff0c;来提取每一帧相机位姿的时序…

OpenCV-Python实战(4)——图像处理基础知识

一、坐标 在 OpenCV 中图像左上角坐标为&#xff08;0&#xff0c;0&#xff09;&#xff0c;竖直向下为 Y&#xff08;height&#xff09; &#xff1b;水平向右为 X&#xff08;width&#xff09;。 二、生成图像 2.1 灰度图像 img np.zeros((h,w), dtype np.uint8) i…

【Compose multiplatform教程18】多平台资源的设置和配置

要正确配置项目以使用多平台资源&#xff0c;请执行以下操作&#xff1a; 添加库依赖项。 为每种资源创建必要的目录。 为限定资源创建其他目录&#xff08;例如&#xff0c;深色 UI 主题或本地化字符串的不同图像&#xff09;。 依赖项和目录设置 要访问多平台项目中的资源…

html转PDF

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 在项目中会有一些需要页面转成PDF的情况&#xff0c;这里需要配合一些插件可以完成 使用html2canvas将使用canvas将页面转为base64图片流&#xff0c;并插入jspdf插件中&#xff0c;保存并下载pdf。…

32132132123

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

微服务保护-sentinel

为什么要有微服务保护&#xff1f; 微服务保护是为了避免微服务雪崩而出现的&#xff0c;每个微服务能处理的请求是有限的&#xff0c;如果一个微服务出现问题导致一个请求进入微服务的时间太久&#xff0c;就会导致大量去请求停滞在微服务内部&#xff0c;这样就会过分占用系统…