feat: 添加消息中心及顶栏未读角标功能
新增消息中心页面,实现未读消息轮询与展示 为各 Tab 页面顶栏添加通知图标及未读数角标 新增通知 API 接口与未读数状态管理 实现消息标记已读、全部已读及下拉刷新功能
This commit is contained in:
1 parent
66013ee069
commit
7ad604ff8b
9 files changed
+575
-5
No files matched your search
@@ -26,6 +26,7 @@ class XTopBar extends StatelessWidget {
|
||||
String trailingIcon = 'notification',
|
||||
Color trailingColor = AppColors.onSurfaceVariant,
|
||||
VoidCallback? onTrailingTap,
|
||||
int trailingBadge = 0,
|
||||
}) {
|
||||
return XTopBar._(
|
||||
title: title,
|
||||
@@ -46,7 +47,18 @@ class XTopBar extends StatelessWidget {
|
||||
trailing: GestureDetector(
|
||||
onTap: onTrailingTap,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: XIcon(trailingIcon, size: 22, color: trailingColor),
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
XIcon(trailingIcon, size: 22, color: trailingColor),
|
||||
if (trailingBadge > 0)
|
||||
Positioned(
|
||||
top: -6,
|
||||
right: -8,
|
||||
child: _TrailingBadge(count: trailingBadge),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
titleStyle: AppTypography.headlineMdMobile,
|
||||
titleAlign: TextAlign.left,
|
||||
@@ -135,4 +147,35 @@ class XTopBar extends StatelessWidget {
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 顶栏图标右上角的未读角标:红底白字胶囊,超过 99 显示 `99+`。
|
||||
class _TrailingBadge extends StatelessWidget {
|
||||
const _TrailingBadge({required this.count});
|
||||
|
||||
final int count;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
constraints: const BoxConstraints(minWidth: 16),
|
||||
height: 16,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.statusError,
|
||||
borderRadius: BorderRadius.circular(9999),
|
||||
border: Border.all(color: AppColors.surface, width: 1.5),
|
||||
),
|
||||
child: Text(
|
||||
count > 99 ? '99+' : '$count',
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
height: 1,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.surface,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user