flutter聊天界面-加号【➕】更多展开相机、相册等操作Panel

flutter聊天界面-加号【➕】更多展开相机、相册等操作Panel
在之前实现了flutter聊天界面的自定义表情的展示，这里记录一下更多操作展开的相机、相册等操作功能实现。

一、查看效果

更多操作展开的相机、相册等操作功能实现。

在这里插入图片描述

二、代码实现

展开的操作按钮可能比较多，一页显示8个、多个可以左右滑动，这里就用到的flutter_swiper插件
这里使用的swpier插件是

  # 轮播图flutter_swiper_null_safety: ^1.0.2

Swiper左右滑动的元素为GridView。
GridView网格布局是一种常见的布局类型，GridView 组件正是实现了网格布局的组件，
SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，
每个GridView包括多个相机、相册等操作按钮

按钮如下

// 每个option的大小
class ChatMoreOptionButton extends StatelessWidget {const ChatMoreOptionButton({Key? key,required this.commMoreOption,required this.onMoreOptionPressed,}) : super(key: key);final CommMoreOption commMoreOption;final Function(CommMoreOption commMoreOption) onMoreOptionPressed;@overrideWidget build(BuildContext context) {EdgeInsets viewPadding = MediaQuery.of(context).viewPadding;Size screenSize = MediaQuery.of(context).size;double aWidth = (screenSize.width - (kOptionSperate * 5)) / 4;double aHeight = (kMorePanelHeight -(kOptionSperate * 3) -viewPadding.bottom -kSwiperPaginationHeight) /2;double aMin = min(aWidth, aHeight);double marginSpace = kOptionSperate / 2;return ButtonWidget(margin: EdgeInsets.symmetric(vertical: marginSpace,horizontal: marginSpace,),width: aMin,height: aMin,borderRadius: 6.0,bgColor: ColorUtil.hexColor(0xffffff),bgHighlightedColor: ColorUtil.hexColor(0xf0f0f0),onPressed: () {onMoreOptionPressed(commMoreOption);},child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [buildButtonIcon(context),SizedBox(height: 5.0,),Text("${commMoreOption.name}",textAlign: TextAlign.left,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w500,fontStyle: FontStyle.normal,color: ColorUtil.hexColor(0x333333),decoration: TextDecoration.none,),),],),);}Widget buildButtonIcon(BuildContext context) {if (CommMoreOptionIconType.commMoreOptionIconFile ==commMoreOption.iconType) {// 本地图片String imageUrl = "${commMoreOption.icon ?? ""}";String start = "file://";if (imageUrl.startsWith(start)) {String imageAssetFile = imageUrl.substring(start.length);return ImageHelper.wrapAssetAtImages("icons/${imageAssetFile}",fit: BoxFit.cover,width: 26.0,height: 26.0,);}} else if (CommMoreOptionIconType.commMoreOptionIconUrl ==commMoreOption.iconType) {// 网络图片String imageUrl = "${commMoreOption.icon ?? ""}";return ImageHelper.imageNetwork(imageUrl: imageUrl,fit: BoxFit.cover,width: 40.0,height: 40.0,);}return Container();}
}

GridView实现排列展示

// 一个swiper的容器
class ChatMoreOptionSwiperContainer extends StatefulWidget {const ChatMoreOptionSwiperContainer({Key? key,required this.moreOptions,required this.onMoreOptionPressed,}) : super(key: key);final List<CommMoreOption> moreOptions;final Function(CommMoreOption commMoreOption) onMoreOptionPressed;@overrideState<ChatMoreOptionSwiperContainer> createState() =>_ChatMoreOptionSwiperContainerState();
}class _ChatMoreOptionSwiperContainerStateextends State<ChatMoreOptionSwiperContainer> {@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.symmetric(horizontal: 10.0),child: GridView.builder(gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: kGridCrossAxisCount, //每行三列childAspectRatio: 1.0, //显示区域宽高相等),itemCount: widget.moreOptions.length,itemBuilder: (context, index) {CommMoreOption commMoreOption = widget.moreOptions[index];return ChatMoreOptionButton(onMoreOptionPressed: widget.onMoreOptionPressed,commMoreOption: commMoreOption,);},),);}
}

最后使用Swiper实现左右滑动的效果，代码如下

// 中间间隔
const double kOptionSperate = 15.0;
const double kSwiperPaginationHeight = 10.0;const int kGridCrossAxisCount = 4;
const int kGridCrossAxisRow = 2;// 更多操作
class ChatMoreOptionPanel extends StatefulWidget {const ChatMoreOptionPanel({Key? key,required this.morePanelHeight,required this.chatInputBarController,required this.moreOptionEntries,}) : super(key: key);final double morePanelHeight;final ChatInputBarController chatInputBarController;final List<CommMoreOption> moreOptionEntries;@overrideState<ChatMoreOptionPanel> createState() => _ChatMoreOptionPanelState();
}class _ChatMoreOptionPanelState extends State<ChatMoreOptionPanel> {List<CommMoreOption> allOptionList = [];List<List<CommMoreOption>> optionSwiperList = [];@overridevoid initState() {// TODO: implement initStatesuper.initState();CommMoreOption commMoreOption = CommMoreOption();commMoreOption.icon = "file://ic_toolbar_camera.png";commMoreOption.name = "相机";commMoreOption.iconType = CommMoreOptionIconType.commMoreOptionIconFile;commMoreOption.type = 0;commMoreOption.linkUrl = kOptionCamera;allOptionList.add(commMoreOption);CommMoreOption commMoreOption1 = CommMoreOption();commMoreOption1.icon = "file://ic_toolbar_ablum.png";commMoreOption1.name = "相册";commMoreOption1.iconType = CommMoreOptionIconType.commMoreOptionIconFile;commMoreOption1.type = 0;commMoreOption1.linkUrl = kOptionAlbum;allOptionList.add(commMoreOption1);CommMoreOption commMoreOption2 = CommMoreOption();commMoreOption2.icon = "file://ic_toolbar_coupon.png";commMoreOption2.name = "卡券";commMoreOption2.iconType = CommMoreOptionIconType.commMoreOptionIconFile;commMoreOption2.type = 0;commMoreOption2.linkUrl = kOptionCoupon;allOptionList.add(commMoreOption2);if (widget.moreOptionEntries.isNotEmpty) {allOptionList.addAll(widget.moreOptionEntries);}handlerSwiperList();}void handlerSwiperList() {List<List<CommMoreOption>> tmpOptionSwiperList = [];int aPageNum = kGridCrossAxisCount * kGridCrossAxisRow;int swiperCount = (allOptionList.length % aPageNum == 0? allOptionList.length / aPageNum: (allOptionList.length / aPageNum + 1)).toInt();for (int i = 0; i < swiperCount; i++) {int location = 0;int length = 0;location = i * aPageNum;if (i == 0) {length =aPageNum > allOptionList.length ? allOptionList.length : aPageNum;} else {length = (1 + i) * aPageNum > allOptionList.length? (allOptionList.length - i * aPageNum): aPageNum;}List<CommMoreOption> swiperItems =allOptionList.sublist(location, (location + length));tmpOptionSwiperList.add(swiperItems);}optionSwiperList = tmpOptionSwiperList;setState(() {});}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}// 点击不同的操作Optionvoid onMoreOptionPressed(CommMoreOption commMoreOption) {// 点击不同的操作Option// 发送eventBus事件CommEventBusModel eventBusModel = CommEventBusModel(commEventBusType: CommEventBusType.commEventBusTypeMoreOption,data: commMoreOption,);kCommEventBus.fire(eventBusModel);}@overrideWidget build(BuildContext context) {Size screenSize = MediaQuery.of(context).size;return Container(width: screenSize.width,height: widget.morePanelHeight,decoration: BoxDecoration(color: ColorUtil.hexColor(0xf7f7f7),),padding: EdgeInsets.only(left: 0.0,right: 0.0,bottom: 0.0,top: 0.0,),child: Column(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: [Expanded(child: Swiper(// 横向scrollDirection: Axis.horizontal,// 布局构建itemBuilder: (BuildContext context, int index) {List<CommMoreOption> optionList = optionSwiperList[index];return ChatMoreOptionSwiperContainer(moreOptions: optionList,onMoreOptionPressed: (CommMoreOption commMoreOption) {onMoreOptionPressed(commMoreOption);},);},//条目个数itemCount: optionSwiperList.length,// 自动翻页autoplay: false,// 分页指示pagination: SwiperPagination(//指示器显示的位置 Alignment.bottomCenter 底部中间alignment: Alignment.bottomCenter,// 距离调整margin: const EdgeInsets.only(bottom: 0.0),// 指示器构建builder: DotSwiperPaginationBuilder(// 点之间的间隔space: 3,// 没选中时的大小size: 6,// 选中时的大小activeSize: 6,// 没选中时的颜色color: ColorUtil.hexColor(0xDCDCDC),//选中时的颜色activeColor: ColorUtil.hexColor(0xff462e),),),// pagination: _buildSwiperPagination(),// pagination: _buildNumSwiperPagination(),//点击事件onTap: (index) {print(" 点击 " + index.toString());},// 相邻子条目视窗比例viewportFraction: 1,// 用户进行操作时停止自动翻页autoplayDisableOnInteraction: true,// 无限轮播loop: false,//当前条目的缩放比例scale: 1,),),buildAreaBottom(context),],),);}Widget buildAreaBottom(BuildContext context) {EdgeInsets viewPadding = MediaQuery.of(context).viewPadding;Size screenSize = MediaQuery.of(context).size;return Container(decoration: BoxDecoration(color: ColorUtil.hexColor(0xf7f7f7),),height: viewPadding.bottom,width: screenSize.width,);}
}

三、小结

flutter聊天界面-加号【➕】更多展开相机、相册等操作Panel菜单，主要Swiper和GridView排列相机、相册等按钮，点击按钮时候发送事件，使用EventBus来处理后续的逻辑实现。

学习记录，每天不停进步。

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

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

相关文章

嵌入式基础知识-总线带宽

嵌入式基础知识-总线带宽

带宽&#xff0c;最容易想到的是上网用的网络带宽&#xff0c;在嵌入式软件开发中&#xff0c;也会用到带宽&#xff0c;这个带宽的含义就不一样了&#xff0c;区别是什么&#xff1f;本篇就来介绍一下&#xff0c;并通过一些例子来进行带宽的计算。 先来简单看下不同领域的带…
阅读更多...
第二节 给SpringBootAdmin的server端加入spring security安全控制

第二节 给SpringBootAdmin的server端加入spring security安全控制

前言 本来想用一节就写完SpringBootAdmin的&#xff0c;但随着研究的深入发现一节应该是不够的&#xff0c;网上的资料也不会非常系统&#xff0c;官网的例子有些已经好几年没更新了&#xff0c;所以接下来还是系统性的来写下吧 第一节 完成基础配置&#xff0c;暴露所有端点…
阅读更多...
有AI助手帮你，刷任何题都不吃力！

有AI助手帮你，刷任何题都不吃力！

Rider如何配置AI助手&#xff1f; 前言&#xff1a;一、选择AI助手二、如何在Rider中配置CodeWhisperer三、使用方法四、分享你的AI解决方案 明明自觉学会了不少知识&#xff0c;可真正开始做题时&#xff0c;却还是出现了“一支笔&#xff0c;一双手&#xff0c;一道力扣&…
阅读更多...
html案例2

html案例2

效果 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initia…
阅读更多...
计算机网络 day4 IP地址的两部分-A、B、C、D、E五类IP地址-私有地址-子网掩码-DNA服务器-域名解析服务

计算机网络 day4 IP地址的两部分-A、B、C、D、E五类IP地址-私有地址-子网掩码-DNA服务器-域名解析服务

目录 三创网络拓扑结构图&#xff1a; 普通家庭网络拓扑结构图&#xff1a;&#xff08;也可以直接使用 子母路由器 &#xff08;母&#xff1a;无线路由器&#xff09;&#xff08;子&#xff1a;信号放大器、中继器&#xff09;&#xff09; 网络层&#xff1a;&#xff0…
阅读更多...
用颜色表示数据的第三个维度

用颜色表示数据的第三个维度

横纵坐标显示时间和空间后&#xff0c;第三个数据的特征有时就不好表示了&#xff0c;3d图有的时候看起来更复杂。对于某些情况&#xff0c;用颜色来表示更加简洁。 这里展示的效果图有点像烟花&#xff0c;所以选了这张&#xff0c;但是换其他的cmap才能使得数据展示更加直观 …
阅读更多...
DDR3 控制器 MIG IP 详解完整版 （nativeVIVADOVerilog）

DDR3 控制器 MIG IP 详解完整版 （nativeVIVADOVerilog）

文章目录 前言一、MIG IP 核的配置二、MIG 交互的接口三、常用IP例化值四、小实验传图 前言 本节主要是介绍 Xilinx DDR 控制器 IP 的创建流程、IP 用户使用接口 native 协议介绍和IP 对应的 Example Design 的仿真和上板验证。。 提示&#xff1a;以下是本篇文章正文内容&…
阅读更多...
如果遇到洪灾导致网络瘫痪，对讲机能起到什么作用？

如果遇到洪灾导致网络瘫痪，对讲机能起到什么作用？

当我们遇到洪灾这种突发事件时&#xff0c;网络基本就会处于瘫痪状态&#xff0c;人们的安全和生命也将面临着极大的威胁。而在这种时候&#xff0c;一种看似普通的通讯工具&#xff0c;却能够成为拯救生命的关键&#xff0c;它就是——对讲机&#xff01; 网络已经成为我们生…
阅读更多...
关于深度学习图像数据增广

关于深度学习图像数据增广

数据增广方法在广义上可以按照产生新数据的方式分为数据变形和数据过采样。由于操作简单&#xff0c;同时数据量上的需求远比现在要低得多&#xff0c;早期对数据增广的应用多是数据变形类方法。对于图像数据&#xff0c;基本的图像变换操作都属于数据变形类增广方法&#xff0…
阅读更多...
MySQL复合查询

MySQL复合查询

目录 多表查询 自连接 子查询 合并查询 多表查询 实际开发中往往数据来自不同的表&#xff0c;所以需要多表查询。本节我们用一个简单的公司管理系统&#xff0c;有三张表EMP,DEPT,SALGRADE来演示如何进行多表查询。 案例&#xff1a; 显示雇员名、雇员工资以及所在部门的…
阅读更多...
MybatisPlus逆向生成实体类等

MybatisPlus逆向生成实体类等

面试中遇到的一道机操题&#xff0c;so simple。 这是里SpringBoot项目&#xff0c;注意你的数据表中只有一个id字段是会生成失败的&#xff01; 添加maven依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter…
阅读更多...
DataFun:数据基础架构

DataFun:数据基础架构

翼支付 数据向量化 经营范围是否相同 背景特征提取器 质量过滤通用背景过滤预制场景标记 虚假地址风险分析 CCKS地址解析标签体系 FaissMilvus余弦相似度 Zilliz 大模型幻觉问题 极限科技
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023