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), // //按钮内部组件
      ),
    );
  }
}

效果

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

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

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

相关文章

python rabbitmq实现简单/持久/广播/组播/topic/rpc消息异步发送可配置Django

windows首先安装rabbitmq 点击参考安装 1、环境介绍 Python 3.10.16 其他通过pip安装的版本(Django、pika、celery这几个必须要有最好版本一致) amqp 5.3.1 asgiref 3.8.1 async-timeout 5.0.1 billiard 4.2.1 celery 5.4.0 …

【Verilog】期末复习

数字逻辑电路分为哪两类&#xff1f;它们各自的特点是什么&#xff1f; 组合逻辑电路&#xff1a;任意时刻的输出仅仅取决于该时刻的输入&#xff0c;而与电路原来的状态无关 没有记忆功能&#xff0c;只有从输入到输出的通路&#xff0c;没有从输出到输入的回路 时序逻辑电路&…

光伏电站无人机巡检都有哪些功能?

焱图慧云光伏智能巡检系统主要依托于先进的无人机技术、传感器技术、图像处理技术和智能分析技术。 一、无人机自主飞行与航迹控制 全自主飞行&#xff1a;无人机能够按照预设的飞行路线自主飞行&#xff0c;完成指定的巡检任务&#xff0c;无需人工干预&#xff0c;大大提高了…

图书馆管理系统(三)基于jquery、ajax

任务3.4 借书还书页面 任务描述 这部分主要是制作借书还书的界面&#xff0c;这里我分别制作了两个网页分别用来借书和还书。此页面&#xff0c;也是通过获取books.txt内容然后添加到表格中&#xff0c;但是借还的操作没有添加到后端中去&#xff0c;只是一个简单的前端操作。…

如何使用 WebAssembly 扩展后端应用

1. WebAssembly 简介 随着互联网的发展&#xff0c;越来越多的应用借助 Javascript 转到了 Web 端&#xff0c;但人们也发现&#xff0c;随着移动互联网的兴起&#xff0c;需要把大量的应用迁移到手机端&#xff0c;随着手端的应用逻辑越来越复杂&#xff0c;Javascript 的解析…

《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》简介

《鸿蒙HarmonyOS应用开发从入门到精通&#xff08;第2版&#xff09;》已于近日上市&#xff0c;该书由北京大学出版社出版。距离第1版上市已经过去二年半多。本文希望与读者朋友们分享下这本书里面的大致内容。 封面部分 首先是介绍封面部分。 《鸿蒙HarmonyOS应用开发从入门…

Linux -- 线程控制相关的函数

目录 pthread_create -- 创建线程 参数 返回值 代码 -- 不传 args&#xff1a; 编译时带 -lpthread 运行结果 为什么输出混杂&#xff1f; 如何证明两个线程属于同一个进程&#xff1f; 如何证明是两个执行流&#xff1f; 什么是LWP&#xff1f; 代码 -- 传 args&a…

VTK知识学习(26)- 图像基本操作(一)

1、前言 图像处理离不开一些基本的图像数据操作&#xff0c;例如获取和修改图像的基本信息、访问和修改图像像素值、图像显示、图像类型转换等。熟练掌握这些基本操作有助于使用 VTK进行图像处理应用程序的快速开发。 2、图像信息的访问与修改 1&#xff09;利用vtkIamgeData…

【WPF】把DockPanel的内容生成图像

要在WPF中将一个 DockPanel 的内容生成为图像并保存&#xff0c;可以按照与之前类似的步骤进行&#xff0c;但这次我们将专注于 DockPanel 控件而不是整个窗口。 DockPanel的使用 WPF&#xff08;Windows Presentation Foundation&#xff09;中的 DockPanel 是一种布局控件&…

【Linux】处理用户输入

一、基本介绍 1、如何传递参数 向shell脚本传递数据的最基本方法就是通过命令行参数。如下&#xff0c;这条命令会向test.sh脚本传递10和20这两个参数。 ./test.sh 10 20 2、如何读取参数 bash shell会将所有的命令行参数都指派给称作位置参数&#xff08;positional parame…

SpringBoot+Vue3实现阿里云视频点播 实现教育网站 在上面上传对应的视频,用户开会员以后才能查看视频

要使用阿里云视频点播&#xff08;VOD&#xff09;实现一个教育网站&#xff0c;其中用户需要成为会员后才能查看视频&#xff0c;这个过程包括上传视频、设置权限控制、构建前端播放页面以及确保只有付费会员可以访问视频内容。 1. 视频上传与管理 创建阿里云账号&#xff…

POI-TL插件开发-表格分组插件

POI-TL版本&#xff1a;1.12.2 改造于&#xff1a;LoopRowTableRenderPolicy 模板设计&#xff1a; 分组之前&#xff1a; 分组之后&#xff1a; 代码实现&#xff1a; public class LoopRowGroupTableRenderPolicy implements RenderPolicy {private String prefix;privat…

发送webhook到飞书机器人

发送webhook到飞书机器人 参考链接 自定义机器人使用指南 创建自定义机器人 邀请自定义机器人进群。 进入目标群组&#xff0c;在群组右上角点击更多按钮&#xff0c;并点击 设置。 在右侧 设置 界面&#xff0c;点击 群机器人。 在 群机器人 界面点击 添加机器人。 在 添…

36. Three.js案例-创建带光照和阴影的球体与平面

36. Three.js案例-创建带光照和阴影的球体与平面 实现效果 知识点 Three.js基础 WebGLRenderer WebGLRenderer 是Three.js中最常用的渲染器&#xff0c;用于将场景渲染到网页上。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数&#…

Mybatis分页插件的使用问题记录

项目中配置的分页插件依赖为 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.7</version></dependency>之前的项目代码编写分页的方式为&#xff0c;通过传入的条件…

RIP---路由信息协议

动态路由 自治系统 ---AS 由单一的机构或组织所管理的一系列 IP 网络设备的集合 。 AS 编号&#xff1a; ASN----1-65535----IANA &#xff08;互联网数字分配机构&#xff09; AS 的通讯方式 AS 内部 ---- 运行相同的路由协议 ---- 内部网关协议&#xff08; IGP &#x…

NLP 分词技术浅析

一、NLP 分词技术概述 &#xff08;一&#xff09;定义 自然语言处理&#xff08;NLP&#xff09;中的分词技术是将连续的文本序列按照一定的规则切分成有意义的词语的过程。例如&#xff0c;将句子 “我爱自然语言处理” 切分为 “我”、“爱”、“自然语言处理” 或者 “我…

排序算法:冒泡排序

每一次顺序便遍历&#xff0c;比较相邻的两个元素&#xff0c;交换。 void bubbleSort(vector<int>&v) { int n v.size();//元素个数 //外层j控制的是待排序区间的长度 for (int j n;j > 1;j--) { bool flag 0;//提高效率&#xff0c;判断比较好了就结束 /…

抽象之诗:C++模板的灵魂与边界

引言 在计算机科学的浩瀚长河中&#xff0c;C模板如同一颗璀璨的星辰&#xff0c;以其独特的泛型编程方式为程序设计注入了灵魂。它是抽象的艺术&#xff0c;是类型的舞蹈&#xff0c;是效率与灵活性的交响乐。模板不仅是一种技术工具&#xff0c;更是一种哲学思考&#xff0c…

Linux通信System V:消息队列 信号量

Linux通信System V&#xff1a;消息队列 & 信号量 一、信号量概念二、信号量意义三、操作系统如何管理ipc资源&#xff08;2.36版本&#xff09;四、如何对信号量资源进行管理 一、信号量概念 信号量本质上就是计数器&#xff0c;用来保护共享资源。多个进程在进行通信时&a…