Browse Source

feat(message): 实现聊天页面基础UI与输入栏组件

-组件ChatInputBar 添加聊天输入栏
- 重构聊天页面布局,使用Column替代Container
- 设置聊天背景色为#F5F5F5
- 添加消息列表展示区域,包含头像与消息气泡
- 实现消息时间戳展示
- 添加IM管理器用户信息获取方法
- 优化ChatPage构造函数为常量构造函数
- 导入聊天输入栏组件文件
ios
Jolie 4 months ago
parent
commit
b150d62d92
2 changed files with 82 additions and 4 deletions
  1. 6
      lib/im/im_manager.dart
  2. 80
      lib/pages/message/chat_page.dart

6
lib/im/im_manager.dart

@ -228,6 +228,12 @@ class IMManager {
return cursor.data;
}
///
Future<EMUserInfo?> getUserInfo(String userId) async {
var data = await EMClient.getInstance.userInfoManager.fetchUserInfoById([userId]);
return data[userId];
}
///
void dispose() {
try {

80
lib/pages/message/chat_page.dart

@ -4,12 +4,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../generated/assets.dart';
import '../../../widget/message/chat_input_bar.dart';
class ChatPage extends StatefulWidget {
String userId;
final String userId;
ChatPage({required this.userId, super.key});
const ChatPage({required this.userId, super.key});
@override
State<ChatPage> createState() => _ChatPageState();
@ -19,6 +20,7 @@ class _ChatPageState extends State<ChatPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffF5F5F5),
appBar: AppBar(
title: Text("Chat"),
centerTitle: true,
@ -37,8 +39,78 @@ class _ChatPageState extends State<ChatPage> {
},
),
),
body: Container(
body: Column(
children: [
//
Expanded(
child: SingleChildScrollView(
reverse: true,
padding: EdgeInsets.all(16.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//
Text(
"昨天下午14:46",
style: TextStyle(
fontSize: 12.sp,
color: Colors.grey,
),
textAlign: TextAlign.center,
),
SizedBox(height: 16.h),
//
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//
Container(
width: 40.w,
height: 40.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.w),
image: DecorationImage(
image: AssetImage(Assets.imagesAvatarsExample),
fit: BoxFit.cover,
),
),
),
SizedBox(width: 8.w),
//
Container(
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(12.w),
bottomLeft: Radius.circular(12.w),
bottomRight: Radius.circular(12.w),
),
),
child: Text(
"你好",
style: TextStyle(
fontSize: 14.sp,
color: Colors.black,
),
),
),
],
),
],
),
),
),
// 使
ChatInputBar(
onSendMessage: (message) {
//
if (Get.isLogEnable) {
Get.log("接收到消息: $message");
}
},
),
],
),
);
}

Loading…
Cancel
Save