426 lines
13 KiB
Dart
426 lines
13 KiB
Dart
import 'package:flutter/cupertino.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter/widgets.dart';
|
||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||
import 'package:get/get.dart';
|
||
import 'package:starwork_flutter/base/app_permission.dart';
|
||
|
||
import 'messages_controller.dart';
|
||
import 'messages_model.dart';
|
||
|
||
class MessagesView extends GetView<MessagesController> {
|
||
const MessagesView({super.key});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
backgroundColor: const Color(0xFFF6F7FB),
|
||
body: SafeArea(
|
||
child: Container(
|
||
width: 1.sw,
|
||
padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 4.h),
|
||
child: Column(
|
||
children: [
|
||
// 固定的上半部分
|
||
_buildPageHead(context),
|
||
_buildSystemNotificationPermissionRow(),
|
||
Obx(
|
||
() => Visibility(
|
||
visible: controller
|
||
.homeController.isOpenNotificationPermission.value,
|
||
child: SizedBox(
|
||
height: 10.h,
|
||
),
|
||
),
|
||
),
|
||
// 消息列表
|
||
Expanded(
|
||
child: _buildRefreshableMessageList(),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
_buildPageHead(BuildContext context) {
|
||
return Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
// 左侧标题区域
|
||
Expanded(
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
controller.mainController.scaffoldKey.currentState?.openDrawer();
|
||
},
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Flexible(
|
||
child: Text(
|
||
'19104656的互12312联',
|
||
style: TextStyle(
|
||
fontSize: 18.sp,
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.black87,
|
||
),
|
||
overflow: TextOverflow.ellipsis,
|
||
maxLines: 1,
|
||
),
|
||
),
|
||
Icon(
|
||
Icons.arrow_right_rounded,
|
||
size: 22.sp,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
// 右侧功能按钮区域
|
||
Expanded(
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// 清除未读按钮
|
||
Flexible(
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
// 处理清除未读点击事件
|
||
controller.clearAllUnread();
|
||
print('清除未读被点击');
|
||
},
|
||
child: Container(
|
||
padding: EdgeInsets.symmetric(
|
||
horizontal: 6.w, // 减小内边距
|
||
vertical: 3.h,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFF0F0F0),
|
||
borderRadius: BorderRadius.circular(12.r),
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Flexible(
|
||
child: Text(
|
||
'清除未读',
|
||
style: TextStyle(
|
||
fontSize: 12.sp, // 减小字体
|
||
color: Colors.black54,
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
overflow: TextOverflow.ellipsis,
|
||
maxLines: 1,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
// 分隔线
|
||
Container(
|
||
height: 16.h, // 减小高度
|
||
width: 1.w,
|
||
color: Colors.grey.withOpacity(0.3),
|
||
),
|
||
// 通知设置按钮
|
||
Flexible(
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
// 处理通知设置点击事件
|
||
print('通知设置被点击');
|
||
},
|
||
child: Text(
|
||
'通知设置',
|
||
style: TextStyle(
|
||
fontSize: 14.sp, // 减小字体
|
||
color: Colors.black,
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
overflow: TextOverflow.ellipsis,
|
||
maxLines: 1,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
_buildSystemNotificationPermissionRow() {
|
||
return Obx(
|
||
() => Visibility(
|
||
visible: !controller.homeController.isOpenNotificationPermission.value,
|
||
child: Container(
|
||
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFFEF2E5),
|
||
borderRadius: BorderRadius.all(
|
||
Radius.circular(8.r),
|
||
),
|
||
),
|
||
margin: EdgeInsets.symmetric(vertical: 8.h),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
crossAxisAlignment: CrossAxisAlignment.center,
|
||
children: [
|
||
Text(
|
||
'系统通知未开启,报警消息无法通知'.tr,
|
||
style: TextStyle(
|
||
color: const Color(0xFFEE9846),
|
||
fontSize: 12.sp,
|
||
),
|
||
),
|
||
const Spacer(),
|
||
GestureDetector(
|
||
onTap: () async {
|
||
controller.homeController.isOpenNotificationPermission.value =
|
||
await AppPermission.requestNotificationPermission();
|
||
},
|
||
child: Container(
|
||
padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 4.h),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.all(
|
||
Radius.circular(4.r),
|
||
),
|
||
),
|
||
child: Text(
|
||
'去开启'.tr,
|
||
style: TextStyle(
|
||
color: const Color(0xFFEE9846),
|
||
fontSize: 12.sp,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
SizedBox(
|
||
width: 14.w,
|
||
),
|
||
GestureDetector(
|
||
onTap: () {
|
||
controller.homeController.isOpenNotificationPermission.value =
|
||
true;
|
||
},
|
||
child: Icon(
|
||
Icons.cancel,
|
||
color: const Color(0xFFEE9846),
|
||
size: 18.sp,
|
||
),
|
||
)
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
_buildRefreshableMessageList() {
|
||
return RefreshIndicator(
|
||
onRefresh: _onRefresh,
|
||
// 基础样式配置
|
||
color: const Color(0xFF4A90E2),
|
||
// 刷新指示器颜色
|
||
backgroundColor: Colors.white,
|
||
// 背景颜色
|
||
|
||
// 控制下拉触发距离的关键属性
|
||
displacement: 60.0,
|
||
// 刷新指示器距离顶部的距离（默认40.0）
|
||
edgeOffset: 0.0,
|
||
// 边缘偏移量（默认0.0）
|
||
|
||
// 控制下拉幅度的关键属性
|
||
triggerMode: RefreshIndicatorTriggerMode.onEdge,
|
||
// 触发模式
|
||
// RefreshIndicatorTriggerMode.onEdge: 在边缘触发（默认）
|
||
// RefreshIndicatorTriggerMode.anywhere: 在任何位置都可以触发
|
||
|
||
// 描边宽度
|
||
strokeWidth: 2.5,
|
||
// 刷新指示器的描边宽度（默认2.0）
|
||
|
||
// 语义标签（用于无障碍功能）
|
||
semanticsLabel: '下拉刷新消息列表',
|
||
semanticsValue: '刷新中...',
|
||
|
||
child: SingleChildScrollView(
|
||
physics: const AlwaysScrollableScrollPhysics(
|
||
// 控制滚动物理特性
|
||
parent: BouncingScrollPhysics(), // 添加弹性滚动效果
|
||
),
|
||
child: Column(
|
||
children: [
|
||
_buildMessageList(),
|
||
SizedBox(height: 16.h),
|
||
_buildMessageTip(),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Future<void> _onRefresh() async {
|
||
// 调用controller的刷新方法
|
||
await controller.refreshMessages();
|
||
}
|
||
|
||
_buildMessageList() {
|
||
return Container(
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(8.r),
|
||
),
|
||
child: Obx(
|
||
() => Column(
|
||
children: [
|
||
// 动态生成消息列表项
|
||
...controller.messageList.asMap().entries.map((entry) {
|
||
int index = entry.key;
|
||
MessageItem message = entry.value;
|
||
|
||
return Column(
|
||
children: [
|
||
_buildMessageItem(
|
||
message: message,
|
||
onTap: () => _onMessageTap(index, message),
|
||
),
|
||
// 如果不是最后一项，显示分隔线
|
||
if (index < controller.messageList.length - 1)
|
||
_buildDivider(),
|
||
],
|
||
);
|
||
}).toList(),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
_buildMessageTip() {
|
||
return Container(
|
||
padding: EdgeInsets.symmetric(vertical: 10.h),
|
||
child: Text(
|
||
'只展示最近7天的消息',
|
||
style: TextStyle(
|
||
fontSize: 12.sp,
|
||
color: Colors.grey[500],
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
_buildMessageItem({
|
||
required MessageItem message,
|
||
VoidCallback? onTap,
|
||
}) {
|
||
return GestureDetector(
|
||
onTap: onTap ??
|
||
() {
|
||
// 默认点击事件
|
||
print('${message.title} 被点击');
|
||
},
|
||
child: Container(
|
||
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
|
||
child: Row(
|
||
children: [
|
||
// 左侧图标
|
||
Stack(
|
||
children: [
|
||
Container(
|
||
width: 40.w,
|
||
height: 40.w,
|
||
decoration: BoxDecoration(
|
||
color: message.iconBgColor,
|
||
borderRadius: BorderRadius.circular(8.r),
|
||
),
|
||
child: Icon(
|
||
message.icon,
|
||
color: message.iconColor,
|
||
size: 20.sp,
|
||
),
|
||
),
|
||
if (message.hasRedDot)
|
||
Positioned(
|
||
top: 0,
|
||
right: 0,
|
||
child: Container(
|
||
width: 8.w,
|
||
height: 8.w,
|
||
decoration: const BoxDecoration(
|
||
color: Colors.red,
|
||
shape: BoxShape.circle,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(width: 12.w),
|
||
// 中间内容
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
message.title,
|
||
style: TextStyle(
|
||
fontSize: 16.sp,
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.black87,
|
||
),
|
||
),
|
||
SizedBox(height: 4.h),
|
||
Text(
|
||
message.subtitle,
|
||
style: TextStyle(
|
||
fontSize: 14.sp,
|
||
color: Colors.grey[600],
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 右侧时间
|
||
if (message.time.isNotEmpty)
|
||
Text(
|
||
message.time,
|
||
style: TextStyle(
|
||
fontSize: 12.sp,
|
||
color: Colors.grey[400],
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// 处理消息项点击事件
|
||
void _onMessageTap(int index, MessageItem message) {
|
||
print('${message.title} 被点击，索引: $index');
|
||
// 这里可以添加具体的业务逻辑，比如跳转到详情页面
|
||
// 如果有未读标记，可以标记为已读
|
||
if (message.hasRedDot) {
|
||
// 可以在这里调用controller的方法标记为已读
|
||
}
|
||
}
|
||
|
||
_buildDivider() {
|
||
return Container(
|
||
margin: EdgeInsets.symmetric(horizontal: 16.w),
|
||
height: 1.h,
|
||
color: Colors.grey[200],
|
||
);
|
||
}
|
||
}
|