Flutter组件————FloatingActionButton

server/2024/12/25 21:52:16/

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();得到震动

示例代码:

dart">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.ppmy.cn/server/153151.html

相关文章

JavaScript查缺补漏

文章目录 一、JavaScript是什么&#xff1f;1. JavaScript2.数组的使用3.函数默认参数4.对象中查找属性的另外写法 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、JavaScript是什么&#xff1f; 1. JavaScript 是一种运行在客户端&#xff08;浏…

便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析

系统架构选择的综合考虑 前端使用uniapp可跨平台开发&#xff0c;基于Vue.js的跨平台开发框架&#xff0c;允许开发者使用同一套代码基础构建面向iOS、Android、以及各种小程序&#xff08;如微信小程序&#xff09;、H5等多个平台的应用。 后端使用易于学习且免费开源的thin…

停车管理系统:构建安全、便捷的停车环境

Tomcat 简介 只要学习Java Web项目就不得不学习Tomcat。Tomcat是一种免费的开源的一种Java Web项目的容器&#xff0c;完美继承了 Apache服务器的特性&#xff0c;并且里面添加可以自动化运行的Java Web组件&#xff0c;让Java Web项目可以完全的运行到Tomcat里面。对于特大型项…

【JetPack】Navigation知识点总结

Navigation的主要元素&#xff1a; 1、Navigation Graph&#xff1a; 一种新的XML资源文件,包含应用程序所有的页面&#xff0c;以及页面间的关系。 <?xml version"1.0" encoding"utf-8"?> <navigation xmlns:android"http://schemas.a…

web的五个Observer API

IntersectionObserver&#xff1a; 一个元素从不可见到可见&#xff0c;从可见到不可见 ??IntersectionObserver是一种浏览器提供的 JavaScript API&#xff0c;用于监测元素与视窗的交叉状态。它可以告诉开发者一个元素是否进入或离开视窗&#xff0c;以及两者的交叉区域的…

英威腾变频器切换频率命令来源的具体方法示例

英威腾变频器切换频率命令来源的具体方法示例 功能: 常用在本地与远程控制切换 本次示例: 面板数字键盘设定频率与外部模拟量设定频率之前切换 具体操作方法可参考以下内容: 首先,进入参数组,如下图所示,找到P00基本功能组,按下选择键进入, 如下图所示,找到P00.06 (…

devops和ICCID简介

Devops DevOps&#xff08;Development 和 Operations 的组合&#xff09;是一种软件开发和 IT 运维的哲学&#xff0c;旨在促进开发、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。它强调自动化流程&#xff0c;持续集成&#xff08;CI&#xf…

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之分支结构(实战项目二)

一、最值问题 利用分支结构可以依据具体条件去做决策&#xff0c;通过两个数的比较可以确定这两个数的大小关系&#xff0c;那么三个数也可以通过比较确定其大小关系。 实战训练1—输出最小数 问题描述&#xff1a; 输入三个整数&#xff0c;输出最小的数。 输入格式&…