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.mzph.cn/pingmian/53592.shtml

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

相关文章

使用豆包MarsCode 编写 Node.js 全栈应用开发实践

以下是「豆包MarsCode 体验官」优秀文章,作者狼叔。 欢迎更多用户使用豆包MarsCode 并分享您的产品使用心得及反馈、创意项目开发等,【有奖征集|人人都是豆包MarsCode 测评官!】活动正在火热进行中,欢迎大家投稿参加&a…

跨部门SOP与统一知识库:打破信息孤岛,促进团队协作

引言: 在当今这个快速变化且高度竞争的商业环境中,企业面临着前所未有的挑战,其中之一便是如何高效地跨越部门界限,实现无缝协作。传统的组织结构往往导致信息孤岛的出现,不同部门间流程不一致、信息不共享&#xff0…

【车载开发系列】ParaSoft单元测试环境配置(一)

【车载开发系列】ParaSoft单元测试环境配置(一) ParaSoft单元测试环境配置 【车载开发系列】ParaSoft单元测试环境配置(一)一. 什么是bdf文件二. bdf文件构成三. 新规做成bdf文件四. 导入bdf文件创建测试工程五. 获取编译器信息六. 新增自定义编译器Step1:打开向导Step2:…

JAVA一键下单新鲜到家同城生鲜物流系统小程序源码

一键下单,新鲜到家 —— 探索同城生鲜物流系统的魅力 🚚 一键下单,轻松享受便捷生活 在这个快节奏的时代,谁不想在忙碌之余还能轻松享受美食呢?😋 "一键下单新鲜到家"的同城生鲜物流系统&#…

HTML5中IndexedDB前端本地数据库

一、indexedDB为何替代了Web SQL Database? 跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样,在前端领域,也不是哪来先出来哪个就在日后引领风骚的。 HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Da…

关于axios同步获取数据的问题

axios同步获取数据 Axios介绍问题代码修改 总结 Axios介绍 Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 X…

Spring Boot 集成 Redisson 实现消息队列

包含组件内容 RedisQueue:消息队列监听标识RedisQueueInit:Redis队列监听器RedisQueueListener:Redis消息队列监听实现RedisQueueService:Redis消息队列服务工具 代码实现 RedisQueue import java.lang.annotation.ElementTyp…

第2章 方法

本书作者起初以为仅靠研究命令行工具和指标就能提高性能。他认为这样不对。他从头到尾读了一遍手册,看懂了缺页故障、上下文切换和其他各种系统指标的定义,但不知道如何处理它们:如何从发现信号到找到解决方案。 他注意到,每当出…

18、公司信贷管理|贷款额度的测算|贷款期限及其定价的设定逻辑!

银行在综合权衡贷款的第一还款来源和第二还款来源、风险和收益的基础上,应明确提出贷与不贷的意见。经调查审查同意的贷款,应提出最终的融资方案。 合理的融资方案既要有利于提升本行的竞争力,又要有利于控制贷款风险。完整的融资方案一般包…

计算机网络 --- 【2】计算机网络的组成、功能

目录 一、计算机网络的组成 1.1 从组成部分看 1.2 从工作方式看 1.3 从逻辑功能看 1.4 总结 二、计算机网络的功能 2.1 数据通信 2.2 资源共享​编辑 2.3 分布式处理 2.4 提高可靠性 2.5 负载均衡 一、计算机网络的组成 1.1 从组成部分看 我们举例分析计算机网络从…

【人工智能学习笔记】4_4 深度学习基础之生成对抗网络

生成对抗网络(Generative Adversarial Network, GAN) 一种深度学习模型,通过判别模型(Discriminative Model)和生成模型(Generative Model)的相互博弈学习,生成接近真实数据的数据分…

​ArcGIS Pro和ArcGIS的10大区别

本文来源:水经注GIS公众号 如果你经常使用ArcGIS 进行制图和分析,那么你一定听说过ArcGIS Pro,这款软件是Esri未来主打的一款桌面GIS软件,那么这款软件和ArcGIS相比有什么不同呢,这里为你列举了两款软件的10大区别&am…

文本分类场景下微调BERT

How to Fine-Tune BERT for Text Classification 论文《How to Fine-Tune BERT for Text Classification?》是2019年发表的一篇论文。这篇文章做了一些实验来分析了如何在文本分类场景下微调BERT,是后面网上讨论如何微调BERT时经常提到的论文。 结论与思路 先来看…

Sqoop 数据迁移

Sqoop 数据迁移 一、Sqoop 概述二、Sqoop 优势三、Sqoop 的架构与工作机制四、Sqoop Import 流程五、Sqoop Export 流程六、Sqoop 安装部署6.1 下载解压6.2 修改 Sqoop 配置文件6.3 配置 Sqoop 环境变量6.4 添加 MySQL 驱动包6.5 测试运行 Sqoop6.5.1 查看Sqoop命令语法6.5.2 测…

【数学建模】2024数学建模国赛经验分享

文章目录 一、关于我二、我的数模历程三、经验总结: 一、关于我 我的CSDN主页:https://gxdxyl.blog.csdn.net/ 2020年7月(大二结束的暑假)开始在CSDN写作: 阿里云博客专家: 接触的领域挺多的&#xff…

【Linux】常用指令(中)(附带基础指令的详细讲解、Linux的一些附加知识)

文章目录 前言1. Linux基础常用指令1.1 通配符 "*"1.2 man指令(重要)1.2.1 man指令的语法 1.3 何为"指令"?(附带知识)1.4 echo指令1.5 cat指令1.6 Linux下一切皆文件!1.6.1 ">" 输出重定向1.6.2…

Qt篇——Qt使用C++获取Windows电脑上所有外接设备的名称、物理端口位置等信息

我之前有发过一篇文章《Qt篇——获取Windows系统上插入的串口设备的物理序号》,文章中主要获取的是插入的USB串口设备的物理序号;而本篇文章则进行拓展,可以获取所有外接设备的相关信息(比如USB摄像头、USB蓝牙、USB网卡、其它一些…

分布式技术概览

文章目录 分布式技术1. 分布式数据库(Distributed Databases)2. 分布式文件系统(Distributed File Systems)3. 分布式哈希表(Distributed Hash Tables, DHTs)4. 分布式缓存(Distributed Caching…

面试必问:Java 类加载过程

java 类加载过程主要分为加载、链接和初始化三个阶段,六个关键步骤:加载、验证、准备、解析、初始化。 加载阶段(Loading) 加载时类加载的第一个过程,在这个阶段,将完成以下三件事情: 1&#…

基于Springboot的鲜花销售网站的设计与实现

项目描述 这是一款基于Springboot的鲜花销售网站的系统 模块描述 鲜花销售系统 1、用户 登录 在线注册 浏览商品 鲜花搜索 订购商品 查询商品详情 水果分类查看 水果加购物车 下单结算 填写收货地址 2、管理员 登录 用户管理 商品管理 订单管理 账户管理 截图