You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
18 KiB
438 lines
18 KiB
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 'package:im_flutter_sdk/im_flutter_sdk.dart';
|
|
|
|
import '../../controller/message/chat_controller.dart';
|
|
import '../../controller/message/voice_player_manager.dart';
|
|
import '../../generated/assets.dart';
|
|
import '../../../widget/message/chat_input_bar.dart';
|
|
import '../../../widget/message/message_item.dart';
|
|
import 'chat_settings_page.dart';
|
|
|
|
class ChatPage extends StatefulWidget {
|
|
final String userId;
|
|
|
|
const ChatPage({required this.userId, super.key});
|
|
|
|
@override
|
|
State<ChatPage> createState() => _ChatPageState();
|
|
}
|
|
|
|
class _ChatPageState extends State<ChatPage> {
|
|
final ScrollController _scrollController = ScrollController();
|
|
bool _isLoadingMore = false;
|
|
late ChatController _controller;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// 初始化 controller
|
|
_controller = Get.put(ChatController(userId: widget.userId));
|
|
|
|
// 监听滚动，当滚动到顶部时加载更多消息
|
|
_scrollController.addListener(() {
|
|
if (_scrollController.hasClients &&
|
|
_scrollController.position.pixels <=
|
|
_scrollController.position.minScrollExtent + 100 &&
|
|
!_isLoadingMore &&
|
|
_controller.messages.isNotEmpty &&
|
|
_controller.hasMoreMessages()) {
|
|
_loadMoreMessages();
|
|
}
|
|
});
|
|
|
|
// 监听消息列表变化，自动滚动到底部（跳过用户信息卡片）
|
|
_controller.messages.listen((_) {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (_scrollController.hasClients && _controller.messages.isNotEmpty) {
|
|
// 滚动到消息列表的底部（跳过顶部的用户信息卡片）
|
|
_scrollController.animateTo(
|
|
_scrollController.position.maxScrollExtent,
|
|
duration: Duration(milliseconds: 300),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_scrollController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GetBuilder<ChatController>(
|
|
init: _controller,
|
|
builder: (controller) {
|
|
return WillPopScope(
|
|
onWillPop: () async {
|
|
// 退出页面时停止播放并销毁播放器
|
|
await VoicePlayerManager.instance.stop();
|
|
return true;
|
|
},
|
|
child: Scaffold(
|
|
backgroundColor: Color(0xffF5F5F5),
|
|
appBar: AppBar(
|
|
title: Text(controller.userInfo.value?.nickName ?? ''),
|
|
centerTitle: true,
|
|
actions: [
|
|
Container(
|
|
padding: EdgeInsets.only(right: 16.w),
|
|
child: Image.asset(Assets.imagesMore, width: 16.w),
|
|
).onTap(() {
|
|
// 跳转到聊天设置页面
|
|
Get.to(() => ChatSettingsPage(userId: widget.userId));
|
|
}),
|
|
],
|
|
leading: IconButton(
|
|
icon: Icon(Icons.arrow_back_ios),
|
|
onPressed: () {
|
|
Get.back();
|
|
},
|
|
),
|
|
),
|
|
body: Column(
|
|
children: [
|
|
// 消息列表区域
|
|
Expanded(
|
|
child: Container(
|
|
color: Color(0xffF5F5F5),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
// 点击消息区域收起键盘
|
|
FocusManager.instance.primaryFocus?.unfocus();
|
|
},
|
|
behavior: HitTestBehavior.opaque,
|
|
child: ListView.builder(
|
|
controller: _scrollController,
|
|
reverse: false,
|
|
padding: EdgeInsets.only(
|
|
top: 16.w,
|
|
left: 16.w,
|
|
right: 16.w,
|
|
bottom: 16.w,
|
|
),
|
|
itemCount: controller.messages.length + 1, // 添加用户信息卡片
|
|
// 🚀 性能优化：添加缓存范围，减少重建
|
|
cacheExtent: 500, // 缓存屏幕外500像素的内容
|
|
itemBuilder: (context, index) {
|
|
// 第一个是用户信息卡片
|
|
if (index == 0) {
|
|
return _buildUserInfoCard(controller);
|
|
}
|
|
|
|
final message = controller.messages[index - 1];
|
|
final isSentByMe =
|
|
message.direction == MessageDirection.SEND;
|
|
|
|
final previousMessage = index > 1
|
|
? controller.messages[index - 2]
|
|
: null;
|
|
|
|
// 🚀 性能优化：为每个消息项设置唯一的 key
|
|
return MessageItem(
|
|
key: ValueKey(message.msgId),
|
|
message: message,
|
|
isSentByMe: isSentByMe,
|
|
previousMessage: previousMessage,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// 使用抽离的聊天输入栏组件
|
|
ChatInputBar(
|
|
onSendMessage: (message) async {
|
|
await controller.sendMessage(message);
|
|
},
|
|
onImageSelected: (imagePaths) async {
|
|
// 为每个图片路径调用控制器的方法发送图片消息
|
|
for (var imagePath in imagePaths) {
|
|
await controller.sendImageMessage(imagePath);
|
|
}
|
|
},
|
|
onVoiceRecorded: (filePath, seconds) async {
|
|
// 处理语音录音完成，回传文件路径和秒数
|
|
await controller.sendVoiceMessage(filePath, seconds);
|
|
},
|
|
onVideoRecorded: (filePath, duration) async {
|
|
print('🎬 [ChatPage] 收到视频录制/选择回调');
|
|
print('文件路径: $filePath');
|
|
print('时长: $duration 秒');
|
|
|
|
// 检查是否正在发送
|
|
if (controller.isSendingVideo.value) {
|
|
print('⚠️ [ChatPage] 视频正在发送中，忽略新的发送请求');
|
|
return;
|
|
}
|
|
|
|
// 处理视频录制/选择完成，回传文件路径和时长
|
|
await controller.sendVideoMessage(filePath, duration);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
// 构建用户信息卡片
|
|
Widget _buildUserInfoCard(ChatController controller) {
|
|
final userInfo = controller.userInfo.value;
|
|
|
|
// 如果用户信息还未加载，显示占位符
|
|
if (userInfo == null) {
|
|
return SizedBox.shrink();
|
|
}
|
|
|
|
return Container(
|
|
margin: EdgeInsets.only(bottom: 16.w),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(16.w),
|
|
),
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
// 计算按710:351比例的高度
|
|
// 宽度需要考虑 ListView 的 padding（左右各16.w）
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final availableWidth = screenWidth - 32.w; // 减去左右 padding
|
|
final width = availableWidth;
|
|
final height = width * (351 / 710);
|
|
return Container(
|
|
height: height,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(16.w),
|
|
image: DecorationImage(
|
|
image: AssetImage(Assets.imagesChatUserBg),
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
// 顶层背景图（chat_user_bg_bottom，按710x351比例覆盖整个卡片）
|
|
Positioned.fill(
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(16.w),
|
|
child: Image.asset(
|
|
Assets.imagesChatUserBgBottom,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
// 内容
|
|
Padding(
|
|
padding: EdgeInsets.all(16.w),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 头部：名称、标签、箭头
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 名称和标签
|
|
Wrap(
|
|
spacing: 8.w,
|
|
runSpacing: 4.w,
|
|
crossAxisAlignment: WrapCrossAlignment.center,
|
|
children: [
|
|
Text(
|
|
userInfo.nickName ?? '用户',
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
// 实名认证标签（和主页一样）
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 8.w,
|
|
vertical: 2.h,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFF3E9FF),
|
|
borderRadius: BorderRadius.circular(12.w),
|
|
border: Border.all(
|
|
width: 1,
|
|
color: Color.fromRGBO(117, 98, 249, 0.32),
|
|
),
|
|
),
|
|
constraints: BoxConstraints(
|
|
minWidth: 40.w,
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesVerifiedIcon,
|
|
width: 14.w,
|
|
height: 12.w,
|
|
),
|
|
SizedBox(width: 4.w),
|
|
Text(
|
|
'实名',
|
|
style: TextStyle(
|
|
fontSize: 9.sp,
|
|
color: Color.fromRGBO(160, 92, 255, 1),
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// 在线状态标签（和主页一样）
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 8.w,
|
|
vertical: 2.h,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Color.fromRGBO(234, 255, 219, 1),
|
|
borderRadius: BorderRadius.circular(12.w),
|
|
border: Border.all(
|
|
width: 1,
|
|
color: Color.fromRGBO(117, 98, 249, 0.32),
|
|
),
|
|
),
|
|
child: Text(
|
|
'在线',
|
|
style: TextStyle(
|
|
fontSize: 9.sp,
|
|
color: Color.fromRGBO(38, 199, 124, 1),
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 8.h),
|
|
// 用户信息：性别图标、年龄、位置、身高
|
|
Row(
|
|
children: [
|
|
// 性别图标（默认显示女性图标，可以根据实际数据调整）
|
|
Image.asset(
|
|
Assets.imagesFemale,
|
|
width: 14.w,
|
|
height: 14.w,
|
|
),
|
|
SizedBox(width: 4.w),
|
|
Text(
|
|
'19',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
SizedBox(width: 12.w),
|
|
Text(
|
|
'北京',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
SizedBox(width: 12.w),
|
|
Text(
|
|
'160cm',
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// 右侧箭头
|
|
Container(
|
|
width: 32.w,
|
|
height: 32.w,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[200],
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
Icons.arrow_forward_ios,
|
|
size: 16.w,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 8.h), // 减小间距
|
|
// 个人简介（单行）
|
|
Text(
|
|
'喜欢在广州的早茶里抢最后一个虾饺,也能在深夜的猎德大桥...',
|
|
style: TextStyle(
|
|
fontSize: 13.sp,
|
|
color: Colors.grey[800],
|
|
height: 1.4,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
SizedBox(height: 8.h), // 减小间距
|
|
// 图片画廊
|
|
Row(
|
|
children: List.generate(4, (index) {
|
|
return Expanded(
|
|
child: Container(
|
|
margin: EdgeInsets.only(
|
|
right: index < 3 ? 8.w : 0,
|
|
),
|
|
height: 50.w, // 进一步减小高度避免被裁剪
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(8.w),
|
|
image: DecorationImage(
|
|
image: AssetImage(Assets.imagesAvatarsExample),
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
// 加载更多消息
|
|
Future<void> _loadMoreMessages() async {
|
|
if (_isLoadingMore) return;
|
|
|
|
setState(() {
|
|
_isLoadingMore = true;
|
|
});
|
|
|
|
try {
|
|
await _controller.fetchMessages(loadMore: true);
|
|
} finally {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isLoadingMore = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|