Browse Source
feat(message): 实现聊天页面基础功能
feat(message): 实现聊天页面基础功能
- 添加 ChatController 管理聊天逻辑 - 实现用户信息获取与消息发送功能 - 创建 ChatInputBar 组件处理消息输入 - 更新 ChatPage 使用 GetBuilder 构建界面 - 集成 IMManager 处理即时通讯逻辑 - 添加消息列表基础布局与空内容展示 - 实现发送按钮交互与文本输入控制ios
Jolie
4 months ago
3 changed files with 175 additions and 69 deletions
Split View
Diff Options
-
54lib/controller/message/chat_controller.dart
-
90lib/pages/message/chat_page.dart
-
100lib/widget/message/chat_input_bar.dart
@ -0,0 +1,54 @@ |
|||
import 'package:get/get.dart'; |
|||
|
|||
import '../../im/im_manager.dart'; |
|||
import 'package:im_flutter_sdk/im_flutter_sdk.dart'; |
|||
|
|||
class ChatController extends GetxController { |
|||
final String userId; |
|||
|
|||
// 用户信息 |
|||
final Rx<EMUserInfo?> userInfo = Rx<EMUserInfo?>(null); |
|||
|
|||
ChatController({required this.userId}); |
|||
|
|||
@override |
|||
void onInit() { |
|||
super.onInit(); |
|||
// 初始化时获取用户信息 |
|||
fetchUserInfo(); |
|||
} |
|||
|
|||
/// 获取用户信息 |
|||
Future<void> fetchUserInfo() async { |
|||
try { |
|||
final EMUserInfo? info = await IMManager.instance.getUserInfo(userId); |
|||
if (info != null) { |
|||
userInfo.value = info; |
|||
if (Get.isLogEnable) { |
|||
Get.log('获取用户信息成功: ${info.nickName}'); |
|||
} |
|||
} else { |
|||
if (Get.isLogEnable) { |
|||
Get.log('未找到用户信息: $userId'); |
|||
} |
|||
} |
|||
} catch (e) { |
|||
if (Get.isLogEnable) { |
|||
Get.log('获取用户信息失败: $e'); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/// 发送消息 |
|||
Future<bool> sendMessage(String content) async { |
|||
try { |
|||
final message = await IMManager.instance.sendTextMessage(content, userId); |
|||
return message != null; |
|||
} catch (e) { |
|||
if (Get.isLogEnable) { |
|||
Get.log('发送消息失败: $e'); |
|||
} |
|||
return false; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
import 'package:dating_touchme_app/extension/ex_widget.dart'; |
|||
import 'package:flutter/material.dart'; |
|||
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|||
import 'package:get/get.dart'; |
|||
|
|||
import '../../generated/assets.dart'; |
|||
|
|||
class ChatInputBar extends StatefulWidget { |
|||
final ValueChanged<String> onSendMessage; |
|||
|
|||
const ChatInputBar({required this.onSendMessage, super.key}); |
|||
|
|||
@override |
|||
State<ChatInputBar> createState() => _ChatInputBarState(); |
|||
} |
|||
|
|||
class _ChatInputBarState extends State<ChatInputBar> { |
|||
final TextEditingController _textController = TextEditingController(); |
|||
|
|||
void _handleSendMessage() { |
|||
if (_textController.text.isNotEmpty) { |
|||
// 使用GetX日志而不是print |
|||
if (Get.isLogEnable) { |
|||
Get.log("发送消息: ${_textController.text}"); |
|||
} |
|||
widget.onSendMessage(_textController.text); |
|||
_textController.clear(); |
|||
} |
|||
} |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return Container( |
|||
padding: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 16.w), |
|||
color: Colors.white, |
|||
child: Column( |
|||
children: [ |
|||
SizedBox(height: 10.h), |
|||
Row( |
|||
children: [ |
|||
Expanded( |
|||
child: Container( |
|||
height: 40.h, |
|||
decoration: BoxDecoration( |
|||
color: Color(0xffF5F5F5), |
|||
borderRadius: BorderRadius.circular(5.h), |
|||
), |
|||
padding: EdgeInsets.symmetric(horizontal: 16.w), |
|||
child: TextField( |
|||
controller: _textController, |
|||
decoration: InputDecoration( |
|||
border: InputBorder.none, |
|||
hintText: "请输入聊天内容~", |
|||
hintStyle: TextStyle(fontSize: 14.sp, color: Colors.grey), |
|||
), |
|||
style: TextStyle(fontSize: 14.sp, color: Colors.black), |
|||
), |
|||
), |
|||
), |
|||
SizedBox(width: 12.w), |
|||
// 发送按钮 |
|||
Container( |
|||
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h), |
|||
decoration: BoxDecoration( |
|||
color: Colors.blue, |
|||
borderRadius: BorderRadius.circular(5.h), |
|||
), |
|||
child: Text( |
|||
"发送", |
|||
style: TextStyle( |
|||
fontSize: 14.sp, |
|||
color: Colors.white, |
|||
fontWeight: FontWeight.w500, |
|||
), |
|||
), |
|||
).onTap(_handleSendMessage), |
|||
], |
|||
), |
|||
SizedBox(height: 12.h), |
|||
// 底部工具栏 |
|||
Row( |
|||
mainAxisAlignment: MainAxisAlignment.spaceAround, |
|||
children: [ |
|||
// 语音按钮 |
|||
Image.asset(Assets.imagesAudio, width: 24.w, height: 24.w), |
|||
// 视频按钮 |
|||
Image.asset(Assets.imagesVideo, width: 24.w, height: 24.w), |
|||
// 礼物按钮 |
|||
Image.asset(Assets.imagesGift, width: 24.w, height: 24.w), |
|||
// 表情按钮 |
|||
Image.asset(Assets.imagesEmoji, width: 24.w, height: 24.w), |
|||
// 更多按钮 |
|||
Image.asset(Assets.imagesAdd, width: 24.w, height: 24.w), |
|||
], |
|||
), |
|||
], |
|||
), |
|||
); |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save