Flutter仿朋友圈多行文字展开收起

最新推荐文章于 2024-04-19 09:53:30 发布
VIP文章 最新推荐文章于 2024-04-19 09:53:30 发布
阅读量2.1k 收藏 3
点赞数 2
分类专栏： Flutter 文章标签： flutter Text展开收起
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carterrao/article/details/102505765
版权

Flutter实现类似朋友圈文字显示控件功能：1.文字较少时，直接显示原文本。2.文字超过指定的最大行数时，默认只显示这几行文本，后面...结尾，并且在文本下方有一个“全文”展开按钮；点击“全文”按钮后文本全部显示完整，按钮变成“收起”；点击“收起”按后又恢复成只显示部分行数内容。

 

测试页面效果图如下：

  

 

实现原理：

使用LayoutBuilder控件，实现控件延迟加载。先用TextPainter判断文本内容是否超过指定的行数（例如3行），如果未超过，直接以普通的Text控件显示；如果超过，则显示一个Column控件，其内容分别为Text文本控件和展开/收起按钮控件，并根据

最低0.47元/天 解锁文章
carterrao
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
高仿微信朋友圈
03-01
微信朋友圈界面实现，以及浏览朋友圈图片的相关功能实现
仿抖音播放微信小程序1.0
06-28
功能说明 1、提取抖音、快手作品链接并生成无水印小视频直接播放，无需下载和转存。 2、可自由打赏视频，在线支付费用。 3、可付费针对视频投放广告。 4、可以实现在线充值，提现，打赏记录等功能。 5、自带微信过审模式，开启后，可快速通过因为要播放视频需要提供广播节目经营许可证的烦恼。 6、后台自动刷新抖音作品链接失效机制。 使用说明 1、如果对本套系统感兴趣的朋友可以扫微信小程序二维码进行体验（或者微信小程序里搜索：黔都有趣）。因为没有后台，你可能无法下载后直接使用。前端代码是开源了的，但后端不是。 2、本次上传的插件和你通过小程序体验到的功能和效果是一样的，如果我发布过的小程序已更新的话，这里也会同步更新的。 3、你体验完如果需要购买的话可以联系QQ:506121200,白天比较忙，回复得慢，如果看到消息会第一时间回复你的。 4、也支持在这个功能的基础上进行你需要的改进或功能定制开发。 PS：这里只有前端代码，供学习参考用，要想完整一套可上线代码请前往Ucloud插件市场 https://ext.dcloud.net.cn/plugin?id=8603
flutter仿微信底部图标渐变功能的实现代码
01-03
先给大家展示下效果图，感觉不错请参考实例代码。 实现思路 在flutter中，如果想实现上面的页面切换效果，必然会想到pageView。pageView的controller可以监听到pageView的滚动事件，也可以获取pageView滚动的位置，所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了。 改变图标颜色 图标是从微信中提取出来的，都是webp格式的图片。要改变图片颜色可以使用ImageIcon这个组件。 ImageIcon会把一张图片变成单色图片，所以只要图片没有多色的要求，就可以用这个组件。 既然能改变颜色了，我们也需要知道pageView滚动的时候究竟要改什么颜色。
Flutter 仿微信长按发送语音
09-04
引用 package： 文件路径：path_provider 录制与振幅：audio_waveforms
eyepetizer_flutter:Flutter仿开眼短视频App
05-06
项目介绍 本项目是一款用flutter实现的仿开眼短视频项目的App，项目具有比较完整的结构，代码整洁规范，结构清晰。 页面展示 页面结构 项目结构 相关
flutter 多行文本展开收起伸缩功能 组件
qq_44143906的博客
11-23 652
flutter 多行文本展开收起伸缩功能 组件
flutter文本展开收起
androidhyf的博客
02-15 536
flutter文本展开收起
flutter 文字的展开以及收起
weixin_40570474的博客
11-17 1171
flutter 文字的展开以及收起
flutter仿微信界面.zip
05-13
初学flutter，写了一个仿微信UI界面 详细链接 https://blog.csdn.net/Lazy_Goat/article/details/116754679
Flutter高仿好奇心日报
08-10
Flutter高仿好奇心日报
全网最全flutter学习案例仿闲鱼开源版
08-10
全网最全flutter 学习案例 仿闲鱼（开源版）
flutter_plugin_record:flutter 仿微信录制语音功能 支持android和ios
05-02
[TOC] 使用Flutter实现 仿微信录音的插件 插件支持android 和IOS 插件提供的功能 录制 录制语音, 播放录音, 录制声音大小的监听 提供录制时长的监听 提供类似微信的录制组件 提供播放音频结束的监听 提供根据传递的路径进行语音录制 提供录制wav,mp3格式 具体可参考example 播放 提供播放指定路径的音频文件 提供播放指定Url地址的wav,MP3格式文件 提供播放完成的回调监听 提供暂停和继续播放的功能 提供停止播放的功能 1,引入 在pubspec.yaml 文件上引入如下配置 引入方式1(引入最新的版本) flutter_plugin_record: git: url: https://github.com/yxwandroid/flutter_plugin_record.git 引入方式2 (引入指定某次commit) flutt
flutter仿网易云_Cordova还是flutter
01-06
如果下载了运行报错删掉.gradle文件即可
flutter高仿微信项目实战
06-11
Flutter案例视频教程，从入门到具体项目实战，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生...flutter高仿微信项目实战是一个使用flutter技术仿微信界面开发的完整案例,同时提供代码下载。
在Flutter中实现的简单折叠单元格小部件
08-10
在Flutter中实现的简单折叠单元格小部件。 它是一个小部件，所以将其作为子项添加到任何容器小部件。
flutter 二维数组赋值问题
最新发布
androidhyf的博客
04-19 248
问题描述：给二维数组批量赋值后，再进行单个对象的深度赋值后。打印出来却是整个数组的deepSize参数都被赋值了；
flutter 实现表单的封装包含下拉框和输入框
weixin_40466351的博客
04-18 355
【代码】flutter 实现表单的封装包含下拉框和输入框。
flutter 展开收起动画
05-25
Flutter 中可以使用动画库`flutter_animation_set`来实现展开收起动画。具体步骤如下： 1. 导入依赖库：在 `pubspec.yaml` 文件中添加以下依赖库： ``` dependencies: flutter_animation_set: ^1.2.0 ``` 2. 创建动画组件：使用 `AnimationSet` 组件创建动画效果，可以设置动画的类型、方向、持续时间等参数。例如： ```dart AnimationSet( child: Container( height: 200, child: Text('Hello, World!'), ), animations: [ AnimationItem( tween: Tween<double>(begin: 0, end: 1), duration: Duration(milliseconds: 500), delay: Duration(milliseconds: 0), curve: Curves.easeInOut, builder: (context, child, value) => Opacity( opacity: value, child: Transform.translate( offset: Offset(0, 100 - 100 * value), child: child, ), ), ), ], ) ``` 以上代码实现了一个在垂直方向上从上往下展开的动画效果，持续时间为 500 毫秒，使用了 `easeInOut` 曲线。 3. 添加交互事件：使用 `GestureDetector` 组件监听用户的手势事件，触发动画效果。例如： ```dart bool _expanded = false; GestureDetector( onTap: () { setState(() { _expanded = !_expanded; }); }, child: _expanded ? AnimationSet( child: Container( height: 200, child: Text('Hello, World!'), ), // ... ) : Container( height: 50, child: Text('Hello, World!'), ), ) ``` 以上代码实现了一个点击展开或收起的交互效果，根据 `_expanded` 变量的值来判断当前应该展开还是收起。当 `_expanded` 为 `true` 时，展示动画组件；否则展示一个高度为 50 的简单组件。 通过以上步骤，就可以实现一个简单的展开收起动画了。需要注意的是，动画效果的具体实现可以根据需求进行调整，例如可以使用 `Tween` 设置不同的动画属性，使用不同的曲线来调整动画速度等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值