Flutter 自定义弹幕展示样式

定义弹幕样式

barrage_view_util.dart

class BarrageViewUtil {/// 定义弹幕的样式static barrageView(BarrageModel model) {switch (model.type) {case 1:return _barrageType1(model);break;}return Text(model.content, style: TextStyle(color: Colors.white));}static _barrageType1(BarrageModel model) {return Center(child: Container(child: Text(model.content,style: TextStyle(color: Colors.deepOrangeAccent)),decoration: BoxDecoration(border: Border.all(color: Colors.white),borderRadius: BorderRadius.circular(15)),),);}
}

添加弹幕

hi_barrage.dart

将发送的消息封装成弹幕Widget

 void addBarrage(BarrageModel temp) {// 默认弹幕所占的高度double perRowHeight = 30;var line = _barrageIndex % widget.lineCount;_barrageIndex++;var top = line * perRowHeight + widget.top;// 生成弹幕idString id = '${_random.nextInt(10000)}:${temp.content}';// 封装弹幕Widgetvar item = BarrageItem(id: id,top: top,child: BarrageViewUtil.barrageView(temp),onComplete: _onComplete(id));// 添加弹幕_barrageItemList.add(item);// 刷新界面setState(() {});}/// 弹幕播放完毕,移除对应id的弹幕_onComplete(String id) {print('Done:$id');_barrageItemList.removeWhere((element) => element.id == id);}

显示弹幕

barrage_item.dart

class BarrageItem extends StatelessWidget {final String id;final double top;final Widget child;final ValueChanged onComplete;final Duration duration;const BarrageItem({Key key,this.id,this.top,this.child,this.onComplete,this.duration = const Duration(milliseconds: 9000)}): super(key: key);@overrideWidget build(BuildContext context) {return Padding(padding: EdgeInsets.only(top: top),child: Container(child: child,),);}
}

Flutter 自定义弹幕展示样式相关推荐

Vue - 超详细 “横向滚动“ 弹幕效果功能组件源码，类似视频与直播间的发言弹幕（支持自定义弹幕样式 / 开启暂停弹幕播放 / 清空弹幕 / 修改弹幕移动速度 / 发送插入自己的弹幕并高亮显示等）
前言网上的教程都太乱了,并且全是 BUG 根本无法改造到自己的项目中去. 本文实现了在 Vue / Nuxt 项目中,实现弹幕飘过的效果,支持网络请求数据 / 自定义弹幕样式 / 开启暂停弹幕播放 ...
flutter自定义分页器
使用flutter自定义一个分页器最近在写flutter项目,项目刚好需要一个分页器,对数据进行分页处理,一开始想要在网上找有没有已经写好的插件,搜寻一会后还是想着自己写一个. 先看看效果图思路 ...
【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
文章目录一.Flutter 自定义字体 1.ttf 字体文件 2.ttf 字体资源配置 3.获取字体 4.全局使用字体 5.局部使用字体二.完整代码示例三.相关资源一.Flutter 自定义字 ...
uniapp 实现微信小程序全局分享及自定义分享按钮样式
uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的全局混入概念. 下面直接上实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文 ...
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...
Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
百度地图 Api v3.0 自定义信息窗体样式
一.效果图二.代码注意要先引入: <script src="http://api.map.baidu.com/api?v=3.0&ak=IN43cyju8PVLGfSNwl ...
android ratingbar样式,自定义RatingBar的样式
写星座运势,难免要写RatingBar. 用法: 1.属性 android:numStars : 星星个数 android:rating : 默认点亮的星星星星个数 android:stepSize ...
flutter 自定义日历
在项目中需要实现一个日历展示我发布过的动态,效果如图,同时需要左右滑动翻页尝试使用组件发现可自定义的范围比较小,且无法实现需求,看到这篇Flutter自定义日历,实现日期底部不同颜色的日历事件_ap ...
支付宝小程序 | 上传图片组件（添加默认样式以及自定义上传样式）
使用my.uploadFile. my.chooseImage 的方式实现图片上传注意: 使用该方式上传文件,后端也需要参照官方文档进行修改 https://opendocs.alipay.com/ ...

Flutter 自定义弹幕展示样式

定义弹幕样式

添加弹幕

显示弹幕

Flutter 自定义弹幕展示样式相关推荐

最新文章

热门文章