Flutter组件————FloatingActionButton

FloatingActionButton 是Flutter中的一个组件,通常用于显示一个圆形的按钮,它悬浮在内容之上,旨在吸引用户的注意力,并代表屏幕上的主要动作。这种按钮是Material Design的一部分,通常放置在页面的右下角,但也支持自定义位置。

参数

参数名类型描述
onPressedVoidCallback用户点击按钮时触发的回调函数;如果为null,则按钮将被禁用。
childWidget按钮内部的widget,通常是图标或文本。
tooltipString当长按按钮时显示的提示信息。
backgroundColorColor按钮的背景颜色,默认使用主题色。
foregroundColorColor按钮内图标或文本的颜色。
elevationdouble设置按钮的阴影大小,默认值根据Material Design规范设置。
focusColorColor按钮获得焦点时的颜色。
hoverColorColor鼠标悬停在按钮上时的颜色。
shapeShapeBorder定义按钮的形状,默认是一个圆形,可以通过 CircleBorder 或其他 ShapeBorder 类来自定义。
minibool一个布尔值,用于创建更小版本的浮动操作按钮。
isExtendedbool表示是否是扩展版的浮动按钮,适用于 FloatingActionButton.extended 构造函数。
materialTapTargetSizeMaterialTapTargetSize定义了按钮可点击区域的大小,对于无障碍性很重要。
autofocusbool指定此按钮是否应该自动聚焦。默认值为false。
clipBehaviorClip定义如何裁剪子部件,例如是否允许内容溢出边界。
enableFeedbackbool是否启用触觉反馈(如震动),默认为true。
splashFactoryInteractiveInkFeatureFactory定义了点击时产生的涟漪效果类型,默认为 InkRipple.splashFactory

enableFeedback有情况会无法触发,建议手动在回调方法中调用HapticFeedback.vibrate();得到震动

示例代码:

class MyHomePage extends StatefulWidget {const MyHomePage({super.key});State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {//所有下方行为按钮List<Widget> actionList = const [Icon(Icons.social_distance),SizedBox(width: 30,),Icon(Icons.cyclone),SizedBox(width: 30,),Icon(Icons.manage_accounts),SizedBox(width: 40,)];void floatBtnFunc () {debugPrint("点击了悬浮按钮");HapticFeedback.vibrate();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(// 顶部栏代码。。。。。。。。。。。。。), //顶部栏body: Center(child: ListView(padding: const EdgeInsets.only(top: 15),children: const [Row(children: [Text("按钮示例")],)],),),floatingActionButton: FloatingActionButton(onPressed: floatBtnFunc, //点击事件tooltip: "悬浮按钮", //长按提示信息backgroundColor: Colors.blue, //背景颜色foregroundColor: Colors.white, // 内部组件颜色elevation: 10,  //阴影shape: ShapeBorder.lerp(const CircleBorder(),const CircleBorder(),0.5),  //按钮形状mini: false, //是否小尺寸hoverColor: Colors.green, //悬浮颜色splashColor: Colors.yellow, //点击颜色focusColor: Colors.red, //获取焦点颜色autofocus: true,  //是否自动获取焦点clipBehavior: Clip.hardEdge, //裁剪方式child: const Icon(Icons.info), // //按钮内部组件),);}
}

效果

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

关于Unity VFX 在Spawn状态的一些笔记

以下全为个人理解,爱看不看 一. periodic burst 和 single burst 的区别 1. Single Burst 定义:Single Burst 是一次性发射粒子,只在粒子系统启动时触发一次。 它是一个瞬时的发射行为,适合单次效果。 特性: 只触发一次。发射时间通常是粒子系统启动时。不会重复发射,除…

#{ }和${ } 、参数处理

目录 #{ }和${ } 参数处理 入参-parameterType 使用Map 使用Bean / List<Bean> 使用多参数 Param注解&#xff08;命名参数&#xff09; 出参-resultType 返回Map / List<Map> 返回Map<String,Map> 属性名不一致-resultMap结果映射 #{ }和${ }…

MySQL数据库——门诊管理系统数据库数据表

门诊系统数据库his 使用图形化工具或SQL语句在简明门诊管理系统数据库his中创建数据表&#xff0c;数据表结构见表2-3-9&#xff5e;表2-3-15所示。 表2-3-9 department&#xff08;科室信息表&#xff09; 字段名称 数据类型 长度 是否为空 说明 dep_ID int 否 科室…

方正畅享全媒体新闻采编系统 screen.do SQL注入漏洞复现

0x01 产品简介 方正畅享全媒体新闻生产系统是以内容资产为核心的智能化融合媒体业务平台,融合了报、网、端、微、自媒体分发平台等全渠道内容。该平台由协调指挥调度、数据资源聚合、融合生产、全渠道发布、智能传播分析、融合考核等多个平台组成,贯穿新闻生产策、采、编、发…

Gin-vue-admin(4):项目创建前端一级页面和二级页面

目录 创建一级页面创建二级页面 创建一级页面 view目录下新建一个my&#xff0c;Index.vue <template></template><script> export default {name:My, } </script><script setup> import {ref} from vue const myNameref("name") &…

ABAP SQL 取日期+时间最新的一条数据

我们在系统对接的时候&#xff0c;外部系统可能会推送多个数据给到我们。 我们 SAP 系统的表数据中日期和时间是作为主键的&#xff0c;那么如果通过 ABAP SQL 取到最新日期的最新时间呢。 解决方案&#xff1a; 方式 1&#xff1a;SELECT MAX 可以通过两个 SELECT MAX 来取…

【面试 - 遇到的问题】Vue 里 router-view 使用 key + 关闭页面后重新打开页面-获取的数据赋值到旧组件问题(钩子执行顺序)

目录 【1】问题描述【2】问题排查前 - 页面渲染、tag 页签渲染 逻辑梳理页面渲染【借用别人的描述】<router-view :key"key" />1. 不设置key 属性2. 设置 key 属性值为 $route.path/page/1 > /page/2/page?id1 > /page?id2, 3. 设置 key 属性值为 $rou…

ilqr算法原理推导及代码实践

目录 一. ilqr原理推导1.1 ilqr问题描述1.2 ilqr算法原理1.3 ilqr算法迭代过程 二. ilqr实践代码 一. ilqr原理推导 1.1 ilqr问题描述 本文参考知乎博主: LQR与iLQR&#xff1a;从理论到实践【详细】 基础LQR只能处理线性系统 (指可以使用 x ( k 1 ) A x ( k ) B u ( k )…

UDP系统控制器_音量控制、电脑关机、文件打开、PPT演示、任务栏自动隐藏

UDP系统控制器(ShuiYX) 帮助文档 概述 本程序设计用于通过UDP协议接收指令来远程控制计算机的音量、执行特定命令和其他功能。为了确保程序正常工作&#xff0c;请确认防火墙和网络设置允许UDP通信&#xff0c;并且程序启动后会最小化到托盘图标。 命令格式及说明 音量控制…

应该连续学一个科目,还是多学科切换?

https://www.zhihu.com/question/333420829https://www.zhihu.com/question/333420829

MySQL中EXPLAIN详细讲解

好的&#xff0c;我会进一步详细讲解 EXPLAIN 语句的每个字段&#xff0c;并深入说明它们的意义和作用&#xff0c;帮助你更全面地理解 MySQL 查询的执行计划。 EXPLAIN 语句的字段详解&#xff1a; 1. id&#xff1a;查询标识符 作用&#xff1a;id 表示查询计划中的唯一标识…

excel 使用vlook up找出两列中不同的内容

当使用 VLOOKUP 函数时&#xff0c;您可以将其用于比较两列的内容。假设您要比较 A 列和 B 列的内容&#xff0c;并将结果显示在 C 列&#xff0c;您可以在 C1 单元格中输入以下公式&#xff1a; 这个公式将在 B 列中的每个单元格中查找是否存在于 A 列中。如果在 A 列中找不到…

2024159读书笔记|《南山册页:齐白石果蔬册鱼虫册》节选

2024159读书笔记|《南山册页&#xff1a;齐白石果蔬册&鱼虫册》节选 1. 《南山册页&#xff1a;齐白石鱼虫册》2. 《南山册页&#xff1a;齐白石果蔬册》 1. 《南山册页&#xff1a;齐白石鱼虫册》 《南山册页&#xff1a;齐白石鱼虫册》南山书画&#xff0c;大家之作&…

【AI驱动的数据结构:包装类的艺术与科学】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 包装类装箱和拆箱阿里巴巴面试题 包装类 在Java中基本数据类型不是继承来自Object&#xff0c;为了…

Nginx 双向链表 ngx_queue_t

目录 一、基本概述 二、数据结构 三、接口描述与实现 1、相关宏接口 2、ngx_queue_middle 3、ngx_queue_sort 四、使用案例 整理自 nginx 1.9.2 源码 和 《深入理解 Nginx&#xff1a;模块开发与架构解析》 一、基本概述 双向链表的优势是可以快速进行数据插入、删除与…

亚信安全春节14天双倍假期通告

亚信安全14天双倍假期来袭 “网安福利王”再次实至名归 2024年 8773小时&#xff0c;31582680秒 亚信安全一直驰骋于云网安世界 奋战在“安全 数智化”的壮阔征途上 如今&#xff0c;新春的脚步渐近 长达14天的春节长假 能让我们暂且放下忙碌的工作 去除班味&#xff0c…

【时间之外】IT人求职和创业应知【71】-专利费

目录 2025 ICT产业趋势年会召开&#xff0c;2024年度ICT十大新闻重磅揭晓 海纳致远数字科技申请定制化插件驱动的数据分析专利 阿波罗智联取得语音数据的处理方法、装置、设备和存储介质专利 心勿贪&#xff0c;贵知足。 感谢所有打开这个页面的朋友。人生不如意&#xff0…

游戏《姆吉拉的假面》启动时提示“xinput1_3.dll丢失”怎么办?“xinput1_3.dll丢失”要怎么解决?

《姆吉拉的假面》报错&#xff1a;xinput1_3.dll丢失&#xff1f;这里有解决之道&#xff01; 在畅游《姆吉拉的假面》这款经典游戏时&#xff0c;你是否遇到过“xinput1_3.dll丢失”的报错信息&#xff1f;这个错误不仅会影响你的游戏体验&#xff0c;还可能让你陷入无法继续…

数据分析实战—鸢尾花数据分类

1.实战内容 (1) 加载鸢尾花数据集(iris.txt)并存到iris_df中,使用seaborn.lmplot寻找class&#xff08;种类&#xff09;项中的异常值&#xff0c;其他异常值也同时处理 。 import pandas as pd from sklearn.datasets import load_iris pd.set_option(display.max_columns, N…

hive注释comment中文乱码解决

问题描述 当使用以下命令查看表的元数据信息时出现中文乱码&#xff08;使用的是idea连接hive&#xff09; desc formatted test.t_archer; 解决 连接保存hive元数据的MySQL数据库&#xff0c;执行以下命令&#xff1a; use hive3; show tables;alter table hive3.COLUMNS_…