• Flutter高仿微信-第48篇-群聊-图片


     Flutter高仿微信系列共59篇,从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。

     详情请查看

    效果图:

     详情请参考Flutter高仿微信-第44篇-群聊, 这里只是群聊的图片实现代码。

    实现代码:

    /**
     * 显示群图片
     * @serverImageUrl 服务器图片地址
     * @localImageUrl 本地图片地址
     */
    static Widget showGroupChatImage(String serverImageUrl,String localImageUrl, {double width = 50, double height = 50, double angle = 4, final onPressed}){
    
      String defaultImageUrl = "assets/images/base/base_error.png";
      Widget childWidget;
    
      //本地图片为空
      if(localImageUrl.isEmpty){
        //服务器地址为空
        if(serverImageUrl.isEmpty){
          //显示默认图片
          childWidget = _getDefaultAssetWidget(defaultImageUrl, width, height);
        } else {
          //显示网络图片
          serverImageUrl = CommonUtils.BASE_URL_UPLOAD + serverImageUrl;
          childWidget = _getCachedNetworkImage(serverImageUrl, defaultImageUrl, width, height);
        }
      } else {
        //本地图片不为空,判断是否存在
        File file = File(localImageUrl);
        bool isExist = file.existsSync();
        if(isExist){
          //如果本地文件存在,在本地显示
          childWidget = _getFileImageWidget(localImageUrl, width, height);
        } else {
          //网络现实图片,要加载服务器地址
          serverImageUrl = CommonUtils.BASE_URL_UPLOAD + serverImageUrl;
          childWidget = _getCachedNetworkImage(serverImageUrl, defaultImageUrl, width, height);
        }
      }
    
      return ClipRRect(
          borderRadius: BorderRadius.circular(angle),
          child: childWidget
      );
    }

    //刷新多媒体(图片、语音、小视频) (先刷新本地,然后小视频压缩完成再慢慢发送)
    void _refreshMedia(int type, String mediaURL, String thumbnailFileName, {int mediaSecond=0, String messageId = "" }) async {
    
      bool isNetwork = await CommonNetwork.isNetwork();
      if(!isNetwork) {
        CommonUtils.showNetworkError(context);
        return;
      }
    
      String addTime = WnDateUtils.getCurrentTime();
    
      //先刷新本地聊天
      //ChatBean chatBean = ChatBean(fromAccount: widget.account, toAccount: widget.toGroupId,addTime:addTime,messageId: messageId,isRead: 1);
      GroupChatBean groupChatBean = GroupChatBean(account: widget.account, groupId: widget.toGroupId, addTime: addTime, messageId: messageId);
      LogUtils.d("群聊刷新:${type}");
      groupChatBean.contentType = type;
      groupChatBean.localMediaUrl = mediaURL;
      groupChatBean.content = thumbnailFileName;
      groupChatBean.second = mediaSecond;
      if(type == CommonUtils.CHAT_CONTENT_TYPE_IMG){
        //状态变更,向聊天记录中插入新记录
        setState(() {
          items.add(groupChatBean);
        });
        await GroupChatRepository.getInstance().insertGroupChat(groupChatBean);
      } 
    
      jumpToBottom(100);
    }
    //发送多媒体(图片、语音、小视频)
    void _sendMedia(int type, String mediaURL, {int mediaSecond = 0, String messageId = ""}) async {
    
      bool isNetwork = await CommonNetwork.isNetwork();
      if(!isNetwork) {
        return;
      }
    
      //上传文件
      GroupChatBean? serverChatBean;
      String message = "";
      String addTime = WnDateUtils.getCurrentTime();
      ChatSendBean chatSendBean = ChatSendBean();
      chatSendBean.fromAccount = SpUtils.getAccount();
      chatSendBean.contentType = type;
      chatSendBean.messageId = messageId;
      chatSendBean.addTime = addTime;
      if(type == CommonUtils.CHAT_CONTENT_TYPE_IMG){
        //图片
        serverChatBean = await UploadUtils.getInstance().uploadGroupChatImage(widget.account, widget.toGroupId, mediaURL, messageId, addTime);
    
      }
      chatSendBean.content = serverChatBean?.serverMediaUrl??"";
      GroupChatRepository.getInstance().updateGroupChatByMessageId(serverChatBean?.messageId??"", serverChatBean?.serverMediaUrl??"");
      message = jsonEncode(chatSendBean);
      _sendMessage(message);
    }

  • 相关阅读:
    Vue入门与介绍(初学必看)
    线性代数1:线性方程和系统
    常见的敏捷开发框架
    10 个关于 Promise 和 setTimeout 知识的面试题,通过图解一次说透彻
    倾听:情绪
    数据分析 第二周 (条形图,散点图,直方图,numpy运算和数组广播机制)笔记
    前端面试题JS篇(1)
    1211877-36-9,Z-L-DLeu-L-CHO
    【场景化解决方案】搭建数据桥梁,Dslink打通泛微系统连接流
    阿里云验证SSL证书
  • 原文地址:https://blog.csdn.net/maoning20080808/article/details/128042361