Flutter中自定义气泡框效果的实现

在用户界面的设计中,气泡框(Bubble)是一种非常有效的视觉工具,它可以用来突出显示信息或提示用户。气泡框广泛应用于聊天应用、通知提示等场景。在 Flutter 中,虽然有很多现成的气泡框组件,但如果你想要更多的自定义控制,使用 CustomPainter 是一个非常好的选择。在这篇博客中,我们将介绍如何使用 CustomPainter 自定义绘制气泡框,并将其应用到 Flutter 中。
具体效果如下:
在这里插入图片描述
在这里插入图片描述绘制气泡框

绘制气泡框

我们首先需要创建一个自定义的 CustomPainter 来绘制气泡框。以下是一个简单的 BubblePainter 类,它使用 Path 和 Paint 来绘制气泡框及其箭头。

import 'package:flutter/material.dart';class BubblePainter extends CustomPainter {final Color bubbleColor;final Color borderColor;final double arrowSize;BubblePainter({required this.bubbleColor,required this.borderColor,required this.arrowSize,});void paint(Canvas canvas, Size size) {final paint = Paint()..color = bubbleColor..style = PaintingStyle.fill;final borderPaint = Paint()..color = borderColor..style = PaintingStyle.stroke..strokeWidth = 1.0;final path = Path()..moveTo(10, 0)..lineTo(size.width - 6, 0)..quadraticBezierTo(size.width, 0, size.width, 6)..lineTo(size.width, size.height - 6)..quadraticBezierTo(size.width, size.height, size.width - 6, size.height)..lineTo(6, size.height)..quadraticBezierTo(0, size.height, 0, size.height - 6)..lineTo(0, 14)..lineTo(-arrowSize, 14 - (arrowSize / 2))..lineTo(0, 14 - arrowSize)..quadraticBezierTo(0, 0, 6, 0)..close();canvas.drawPath(path, paint);canvas.drawPath(path, borderPaint);}bool shouldRepaint(covariant CustomPainter oldDelegate) {return false;}
}

在 BubblePainter 类中,我们定义了气泡框的颜色、边框颜色和箭头大小。paint 方法负责绘制气泡框的实际内容。我们使用 Path 类绘制气泡框的形状,并通过 Paint 类设置绘制的颜色和样式。

创建自定义气泡组件

接下来,我们创建一个 CustomBubble 组件,将 BubblePainter 应用到 Flutter 的 CustomPaint 小部件中,并为气泡框添加文本内容。

class CustomBubble extends StatelessWidget {final String text;final TextStyle style;final Color bubbleColor;final Color borderColor;final double arrowSize;const CustomBubble({required this.text,required this.style,required this.bubbleColor,required this.borderColor,required this.arrowSize});Widget build(BuildContext context) {return CustomPaint(painter: BubblePainter(bubbleColor: bubbleColor,borderColor: borderColor,arrowSize: arrowSize),child: Padding(padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 4),child: Text(text,style: style,),),);}
}

使用自定义气泡框

在实际应用中,你可以像下面这样使用 CustomBubble 组件:

            CustomBubble(text: 'Hello Flutter',style: TextStyle(fontSize: 12),bubbleColor: Colors.white,borderColor: Colors.red,arrowSize: 8)

以上代码创建了一个白色背景、红色边框的气泡框,文本内容为 “Hello Flutter”,箭头的大小为 8。

扩展和定制

以上示例提供了一种实现气泡框效果的方法,但你可以根据需要进行更多的定制和扩展。比如,你可以调整箭头的位置、改变气泡框的形状或添加渐变色效果。通过修改 BubblePainter 类中的绘制逻辑,你可以实现更加复杂和个性化的气泡框效果。

总结

通过使用 Flutter 的 CustomPainter,你可以灵活地创建自定义气泡框,并在应用中实现各种视觉效果。这种方法不仅可以用于聊天应用,还可以在提示框、通知等场景中发挥作用。希望这篇博客能帮助你理解如何使用 CustomPainter 绘制气泡框,并鼓励你在项目中应用和扩展这一技术。

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

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

相关文章

c# checkbox的text文字放到右边

checkbox的text文字放到右边 实现方法如下图 特此记录 anlog 2024年9月2日

[数据集][目标检测]石油泄漏检测数据集VOC+YOLO格式6633张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):6633 标注数量(xml文件个数):6633 标注数量(txt文件个数):6633 标注…

提前购|基于SSM+vue的创新型产品提前购平台(源码+数据库+文档)

创新型产品提前购平台 基于SSMvue的创新型产品提前购平台 一、前言 二、系统设计 三、系统功能设计 系统功能实现 后台模块实现 管理员模块实现 发布企业管理实现 个体管理实现 投资企业管理实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选…

剪映剪辑影视视频字幕声音批量自动对齐教程

一款智能软件,用它结合剪映或CapCut 你就可以快速将一个视频翻译为另一种语言,非常适合做TikTok中视频的用户,无论是英语区法语区还是日语区,这款名为谷哥剪映助手的软件都能成倍提升你的剪辑效率。 让我来给大家介绍它的使用方法…

C++中的一个标准输出流——cout

目录 开头1.什么是cout?2.C中的一个标准输出流——cout的实际应用打印“Hello, world!”打印大方块打印一个变量 下一篇博客要说的东西 开头 大家好,我叫这是我58。今天,我们要学一下关于C中的一个标准输出流——cout的一些知识。 1.什么是cout? cou…

小阿轩yx-Kubernertes日志收集

小阿轩yx-Kubernertes日志收集 前言 在 Kubernetes 集群中如何通过不同的技术栈收集容器的日志,包括程序直接输出到控制台日志、自定义文件日志等 有哪些日志需要收集 日志收集与分析很重要,为了更加方便的处理异常 简单总结一些比较重要的需要收集…

无需更换摄像头,无需施工改造,降低智能化升级成本的智慧工业开源了

智慧工业视觉监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒,省去繁琐重复的适配流程,实现芯片、算法、应用的全流程组合,从而大大减少企业级应用约95%的开发成本。用户只需在界面上…

ffmpeg 视频编码及基本知识

理论 H264编码原理(简略) 1. 视频为什么需要进行编码压缩 降低视频数据大小,方便存储和传输 2. 为什么压缩的原始数据采用YUV格式 彩色图像的格式是 RGB 的,但RGB 三个颜色是有相关性的。 采用YUV格式,利用人对图像的…

网络安全入门教程(非常详细)从零基础入门到精通,看完这一篇你就是网络安全高手了。

关于我 我算是“入行”不久的一个新人安全工作者,为什么是引号呢,因为我是个“半个野路子”出身。早在13年的时候,我在初中时期就已经在90sec、wooyun等社区一直学习、报告漏洞。后来由于升学的压力,我逐渐淡出了安全圈子&#x…

攻防世界--->回复 1

开学水题笔记(不是,水题。找点,自信心 T^T )。 下载解压查壳。 32ida打开。 进入main函数。 如下: 关键部分: v5的值未知,说明存在于内存中,直接动调就好了。 DUTCTF{We1c0met0DUTCTF}

综合案例-数据可视化-折线图

一、json数据格式 1.1 json数据格式的定义与功能 json是一种轻量级的数据交互格式,可以按照json指定的格式去组织和封装数据,json数据格式本质上是一个带有特定格式的字符串。 功能:json就是一种在各个编程语言中流通的数据格式&#xff0…

MFC工控项目实例之十一板卡测试信号输入界面

承接专栏《MFC工控项目实例之十添加系统测试对话框》 相关代码 1、在BoardTest.h文件中添加代码 class CBoardTest : public CDialog { // Construction public:CBoardTest(CWnd* pParent NULL); // standard constructorCButtonST m_btnStart[16];CWinThread* pThread…

深入FastAPI:掌握使用多个关联模型的高级用法[Union类型]

在FastAPI中,响应模型可以声明为Union类型,这允许你为同一个端点定义多种可能的响应模型。这种灵活性使得API可以根据不同的情况返回不同类型的数据结构。 例如,根据请求中的查询参数或数据库中的数据,一个API端点可能有时返回一…

数学建模_数据预处理流程(全)

数据预处理整体流程图 一般数据预处理流程 处理缺失值:填补或删除缺失值。处理异常值:检测并处理异常值。数据编码:将分类变量进行标签编码或独热编码。数据标准化/归一化:对数据进行标准化或归一化处理。连续变量离散化&#xff…

微信小程序页面制作——个人信息

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

在Unity环境中使用UTF-8编码

为什么要讨论这个问题 为了避免乱码和更好的跨平台 我刚开始开发时是使用VS开发,Unity自身默认使用UTF-8 without BOM格式,但是在Unity中创建一个脚本,使用VS打开,VS自身默认使用GB2312(它应该是对应了你电脑的window版本默认选取了国标编码,或者是因为一些其他的原因)读取脚本…

代码执行漏洞-Log4j2漏洞 vulhub CVE-2021-44228

步骤一:执行以下命令启动靶场环境并在浏览器访问!!! 查看端口 浏览器访问 可以发现 /solr/admin/cores?action 这⾥有个参数可以传,可以按照上⾯的原理 先构造⼀个请求传过去存在JNDI注⼊那么ldap服务端会执⾏我们传上去的payload JDNI项⽬地址 https://github.com…

git的使用和gdb工具

1.git的使用 首先现在gitee上新建一个仓库 然后复制克隆链接到本地仓库 在本地仓库中,我们可以用git status查看仓库状态 我们要提交代码就是要三步 git add 文件名 git commit -m "写提交的日志" git push 将代码上传到远端仓库 然后你就完成一次提…

uuid.js 使用

相关代码 import { NIL } from "uuid";/** 验证UUID* 为空 则返回 false* param uuid* returns {boolean}*/ export function MyUUIDValidate(uuid: any): boolean {if (typeof uuid "string" && uuid ! NIL) { //uuid ! NIL 判断是否是默认值00…

小白建立个人网站初步尝试

一、VScode 代码是在VScode上运行的&#xff0c;可以看作者另一篇文章&#xff1a;http://t.csdnimg.cn/mOmdF 二、代码基本框架 代码解释<!DOCTYPE html>声明为HTML5文档<html><head>头部元素&#xff0c;不显示在页面<meta charset"utf-8"…