chat_bubbles包的用法

2024-06-15 23:28
文章标签 用法 chat bubbles

本文主要是介绍chat_bubbles包的用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 1. 概念介绍
  • 2. 思路与方法
    • 2.1 组件及属性
    • 2.2 实现方法
    • 2.3 功能扩展
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"buble包"相关的内容,本章回中将介绍chat_bubbles包.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的chat_bubbles包是一个三方插件,它用来实现类似聊天窗口的功能,常见的使用场景就是微信聊天窗口。通常我们使用Container组件实现窗
口,然后通过修改Container组件的属性来实现带有圆角,背景,边框粗细等效果的窗口。不过如果想在窗口边上加一个箭头,实现类似聊天窗口的效果,Container
组件就无能为力了,因此我们决定到pub库中找一些三方插件,于是便找到了chat_bubbles包,该包在pub上的评价不错。我们将在本章回中详细介绍该包的功能和用
法,以及如何通过该包实现聊天窗口功能。

2. 思路与方法

2.1 组件及属性

包中提供了BubbleSpecialThree组件,我们可以通过该组件的属性来实现聊天窗口功能,下面是常用的属性:

  • color属性:用来控制是否聊天窗口的背景颜色;
  • tail属性:该属性是bool类型,用来控制是否显示箭头;
  • text属性:用来控制聊天窗口的内容,注意它是String类型;
  • sent属性:该属性是boo类型,用来控制是否在窗口最右侧显示一个对号;
  • seen属性:该属性是boo类型,用来控制是否在窗口最右侧显示一个对号;
  • delivered属性:该属性是boo类型,用来控制是否在窗口最右侧显示一个对号;
    上面介绍的这些属性中最后三个属性都可以控制对号,不过它们控制的对号表达的含义不同,比如sent表示聊天消息已经发送成功,seen表示已经阅读聊天内容。

2.2 实现方法

上面的小节中介绍了包中的组件及其属性,那么如何实现聊天窗口功能呢?其实很简单,只要把文本内容赋值给BubbleSpecialThree组件的text属性就可以,它就是
聊天窗口中的内容,BubbleSpecialThree组件会在该文本周围绘制一个聊天窗口,至于窗口的背景颜色,箭头位置等可以通过BubbleSpecialThree组件的属性来
控制,不过我们无法修改聊天窗口的形状和边框风格(比如边框颜色,边框粗细等)。

2.3 功能扩展

实现聊天窗口只是chat_bubbles包的一部分功能,该包还可以在聊天窗口中添加图片和声音。为此包中还提供了其它的组件,比如BubbleNormalImage组件,我们只
需要把Image组件赋值给它的image属性就可以看到图片周围环绕了一个聊天窗口。添加声音的方法也类似,我们在这里就不做详细介绍了,大家可以参考官方文档。

3. 示例代码

 const BubbleSpecialThree(///是否显示箭头niptail: true,///会在最右侧显示一个对号sent:false ,delivered: true,seen: true,///窗口的背景颜色color: Colors.yellow,text: "chat_bubble window"),///可以在图片,audio外层嵌套bubble,并且对它们进行控制,
BubbleNormalImage(id: "001", image: const Icon(Icons.favorite),tail: true,color: Colors.lightGreenAccent,onTap: (){},
),

上面的示例代码演示了如何创建一个聊天窗口,我们在代码中添加了详细的注释,这样方便大家理解代码。我建议大家自己动手编写代码,至少修改一下代码中的属性值,
这样可以真正体会到如何配置聊天窗口。此外,我们还创建了一个聊天风格的图片,下面是聊天窗口的效果图,图中第五个聊天窗口就是示例代码运行生成的效果图,第六
个聊天窗口就是带有聊天风格的图片,不过我们没有放图片,而是使用一个Icon组件来代替。目前为止,我们已经介绍了效果图中所有的聊天窗口。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • chat_bubbles包提供了BubbleSpecialThree组件来实现聊天窗口功能;
  • 聊天窗口由组件来实现,窗口中的内容通过该组件的text属性来实现;
  • chat_bubbles包还提供了其它组件,用来实现聊天式的图片和声音;
    看官们,与"chat_bubbles包简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

这篇关于chat_bubbles包的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》:本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式(以 G1 为例)1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面:本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Mysql中isnull,ifnull,nullif的用法及语义详解

《Mysql中isnull,ifnull,nullif的用法及语义详解》MySQL中ISNULL判断表达式是否为NULL,IFNULL替换NULL值为指定值,NULLIF在表达式相等时返回NULL,用... 目录mysql中isnull,ifnull,nullif的用法1. ISNULL(expr) → 判

Java中的for循环高级用法

《Java中的for循环高级用法》本文系统解析Java中传统、增强型for循环、StreamAPI及并行流的实现原理与性能差异,并通过大量代码示例展示实际开发中的最佳实践,感兴趣的朋友一起看看吧... 目录前言一、基础篇:传统for循环1.1 标准语法结构1.2 典型应用场景二、进阶篇:增强型for循环2.