Flutter 气泡效果 centerSlice 实现点9图

最新推荐文章于 2024-05-21 10:03:30 发布
最新推荐文章于 2024-05-21 10:03:30 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： Flutter 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhjali123/article/details/125567766
版权

背景

点9图，作为控件背景时，用于缩放图片指定区域，而不是默认对整图进行缩放。
一般用于聊天气泡，这种内容会变更的场景。

举例

UI最终效果如下图
需求： 内容可变，顶部三角不可拉伸，其他区域可以拉伸。
在这里插入图片描述
实际图片是105*71的图
在这里插入图片描述

Android使用.9图实现该功能

该需求用.9图 在AndroidStudio创建时：
在这里插入图片描述

  • 左侧黑线：上下的拉伸区域。
  • 顶部黑线：左右的拉伸区域
  • 右部黑线：填充内容区域的上下限制（如 文本组件的文字）
  • 底部黑线：填充内容区域的左右限制

右部、底部的黑线可以拉满，然后用组件的 padding 属性达到同样的效果。

Flutter实现该效果

Flutter 设置上图的 粉色四边形区域，来描述拉伸区域。

坐标的数值可以通过 AndroidStudio，移动光标 获取右下角的X、Y数值确

最低0.47元/天 解锁文章
鸡蛋卷啊卷
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Flutter轮播图效果的实现步骤
08-18
"Flutter轮播图效果的实现步骤" Flutter轮播图效果的实现步骤主要介绍了Flutter轮播图效果的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值。Flutter中的动画组件主要...
bubble:Flutter的讲话泡泡
05-06
气泡 Flutter小部件，用于聊天，就像Whatsapp和其他应用程序中的气泡一样。 例子 参见。 用法 Bubble ( child : Text ( 'Hello, World!' ), ), • 颜色 Bubble ( color : Color . fromRGBO ( 212 , 234 , 244 , 1.0 ), child : Text ( 'TODAY' , textAlign : TextAlign .center, style : TextStyle (fontSize : 11.0 )), ), Bubble ( margin : BubbleEdges . only (top : 10 ), color : Color . fromRGBO ( 225 , 255 , 199 , 1.0 ), child : Text ( 'Hello
Flutter学习日记之centerSlice实现.9图聊天气泡
qq_40785165的博客
09-05 3399
本文地址：https://blog.csdn.net/qq_40785165/article/details/119082024，转载需附上此链接 学而不化，非学也。 大家好，我是小黑，一个还没秃头的程序员~~~ 最近想做一个Flutter版的简易聊天交友软件，可以当成是自己的Flutter实战经验，说到聊天软件肯定涉及聊天气泡，原生中的气泡背景一般都直接使用.9图，那么Flutter中如何实现缩放背景呢，这就是这次要介绍的centerSlice组件了，效果如下： 以下是我找的背景（113x48）
Flutter开发 9.Widget-图片加载及展示详解(Image、Container、Decoration、Clip)
xuanwenchao的专栏
03-28 1746
爪爪
探索 Flutter 完美弹窗解决方案 - `flutter_custom_dialog`
最新发布
gitblog_00062的博客
05-21 382
探索 Flutter 完美弹窗解决方案 - flutter_custom_dialog 项目地址:https://gitcode.com/YYFlutter/flutter-custom-dialog 想要在你的 Flutter 应用中创建美观且灵活的全局弹窗？那么，不妨试试这个强大的开源库——flutter_custom_dialog。它提供了一种语义化的方式来构造弹窗内容，并支持多种预定义组件...
Flutter如何使用类似9patch图的效果，看这篇就够了
籍金超的博客
05-11 555
Flutter中使用9Patch类似效果的实现方法,需要注意的是不要把padding和拉伸这两个维度弄混了，这两个其实是没有必然联系的，我刚开的时候调这些参数的时候也是很乱的，理清这两个维度的关系，这个效果就很容易实现了。
Flutter centerSlice .9图的理解
gaoyp的专栏
08-09 6043
1、第一步，图还未放大，原样显示时。 矩形5是centerSlice: Rect指定的矩形, 此矩形的四条边向外延伸，将图切成9块 ----------------- | 1 | 2 | 3 | ----------------- | 4 | 5 | 6 | ----------------- | 7 | 8 | ...
Flutter中centerSlice的一些应用
HuberCui的博客
07-05 9437
centerSlice的作用是把普通的图片设置成类似于安卓中的.9图，用于图片拉伸，比如聊天的气泡。 至于什么是.9图，自行百度 这里只讲一下我个人的一些使用，先上用到的图片 这里方块是气泡主体，三角是左上角的拼接，这里方块是48x48 先上代码跟效果图 //气泡 _bubbleBody() { return Container( align...
flutter聊天界面-消息气泡展示实现Flexible
一名开发者
07-07 1290
flutter聊天界面-消息气泡展示实现Flexible，主要Flexible实现展示，使用CustomPainter实现自定义绘制效果。
flutter 点九设置
weixin_44911775的博客
04-19 503
拉伸区域：可以单纯的理解为对某块像素进行拉伸，那块像素自然就变得很大了，为满足内容需要的空间，就会不断拉伸那一块地方，让内容放得下。应该可以简单的理解：centerSlice是设置拉伸的区域 ，四个角就不会被拉伸了。四个数值，就是伸缩区域的 top、left、right、button。内容填充区域：即内容可以显示的地方。
贝塞尔曲线与计算规则（实现QQ气泡效果）
Lbsssss的博客
07-17 174
贝塞尔曲线与计算规则（实现QQ气泡效果）
flutter 自适应宽高气泡框，聊天气泡框
qq_35629609的博客
07-18 633
还有的就是通过算child 然后动态计算气泡框宽高，脱裤子💨，放到listview 刷新数据还会丢ui，因为要算某一个widget 的大小，必须是已经加载过，然后你再刷新listview然后更新大小。不管是text内容，还是布局大小你要计算那就GG。Container 红色正方形 然后 你剪切绘制成 气泡框的样子，然后 夹角长， 你直接Container padding 个夹角长度 ，内容不就显示全了么？看看我发表时间，我真的潦草一下博客吧。网上好多气泡框，都让写固定宽高，无法自适应文本内容。
center_slice-master.zip
08-09
Flutter centerSlice .9图的理解。用一个图在缩放前和缩放后的效果，演示Flutter中.9图的使用。
Flutter 实现酷炫的3D效果示例代码
08-18
Flutter 实现酷炫的3D效果示例代码 本文主要介绍了 Flutter 实现酷炫的 3D 效果，通过实例代码给大家介绍了非常详细，对大家的学习或工作具有一定的参考借鉴价值。以下是对标题、描述、标签和部分内容的详细解释： ...
Flutter实现可循环轮播图效果
08-25
Flutter实现可循环轮播图效果 Flutter是一个跨平台的移动应用框架，使用Dart语言编写，可以快速构建高性能的移动应用程序。今天，我们将讨论如何使用Flutter实现可循环轮播图效果。 一、控件分解 要实现可循环...
Flutter Tween实现抖动效果
03-29
抖动效果实现起来并不难，主要是使用动画时定义一个摇摆的曲线。可应用于错误反馈等。
如何优雅的从网络加载点九图？
吴延宝
07-28 2820
如何处理从网络加载点九的图 我们开发Android应用的时候，当需要适配可拉伸的背景，我们会使用.9.png的图。通常我们是放在res目录下的，这种方式我们很容易做到。但是如果需要我们去网络获取.9的图该如何做呢？ 1 背景 1.1 什么是点九图 其实点九图和我们用的其他格式的图没有什么大的不同，只不过是在图片的四周各增加了1px的纯黑（#FF000000）的线进行标记。例如：...
Flutter基础（九）资源和图片
weixin_30670965的博客
07-17 507
本文首发于公众号「刘望舒」 ReactNative入门系列 React Native组件 Flutter基础系列 和Android开发一样，Flutter也有asset这一概念，asset是打包到程序安装包中的，可在运行时访问。常见的asset类型包括静态数据（例如JSON文件）、配置文件、图标和图片（JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP）。本文会通...
Flutter实战一Flutter聊天应用（九）
咖啡花园
06-14 8682
在这篇文章中，我们将允许用户在聊天消息中发送图像，从设备检索图像文件，并将文本和图像数据存储在Google云端存储Bucket中。由于我们使用Firebase云储存，应用程序将变得更加健壮和可扩展。它能够在上传和下载期间处理网络中断，安全地存储数据，并在用户群扩展时保持相同的性能。要将数据（如文本和照片）从移动设备上传到云端，我们需要使用firebase_storage插件。在main.dart文件
flutter 图片跑马灯效果怎么实现
05-14
要实现 Flutter 中的图片跑马灯效果，可以使用 `ListView` 和 `PageView` 两种方式。 ## 使用 ListView 使用 `ListView` 组件来实现图片的跑马灯效果，只需要将 `ListView` 的 `scrollDirection` 属性设置为 `Axis.horizontal`，然后将列表项设置为横向排列即可。 示例代码： ```dart ListView.builder( scrollDirection: Axis.horizontal, itemCount: images.length, itemBuilder: (BuildContext context, int index) { return Container( margin: EdgeInsets.all(8.0), child: Image.network(images[index]), ); }, ); ``` ## 使用 PageView 使用 `PageView` 组件来实现图片的跑马灯效果，通过设置 `PageView` 的 `scrollDirection` 属性为 `Axis.horizontal` 来实现横向滑动，同时可以设置 `PageView` 的 `pageSnapping` 属性为 `true` 来实现滑动后自动对齐到页面边缘。 示例代码： ```dart PageView.builder( scrollDirection: Axis.horizontal, itemCount: images.length, itemBuilder: (BuildContext context, int index) { return Container( margin: EdgeInsets.all(8.0), child: Image.network(images[index]), ); }, pageSnapping: true, ); ``` 注意：这两种方式的实现方式不同，`ListView` 会根据内容的大小自动计算滚动范围，而 `PageView` 则需要指定页面数量。另外，如果需要实现循环滚动，可以将 `PageView` 的 `controller` 属性设置为 `PageController(initialPage: images.length)`，并在页面到达边缘后重新跳转到第一张图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值