113 lines
3.6 KiB
Dart
113 lines
3.6 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
|
|||
|
|
class IconBadgeButton extends StatelessWidget {
|
|||
|
|
final String iconPath;
|
|||
|
|
final String title;
|
|||
|
|
final int unreadCount;
|
|||
|
|
final VoidCallback onTap;
|
|||
|
|
final double width; // 可选：按钮宽度（默认 80）
|
|||
|
|
|
|||
|
|
const IconBadgeButton({
|
|||
|
|
Key? key,
|
|||
|
|
required this.iconPath,
|
|||
|
|
required this.title,
|
|||
|
|
required this.onTap,
|
|||
|
|
this.unreadCount = 0,
|
|||
|
|
this.width = 80,
|
|||
|
|
}) : super(key: key);
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
// badge 文本，超过 99 展示 99+
|
|||
|
|
final String badgeText = unreadCount.toString();
|
|||
|
|
|
|||
|
|
// 文字两行的高度估算（可按需微调）
|
|||
|
|
const double titleLineHeight = 18.0;
|
|||
|
|
const double titleMaxLines = 2;
|
|||
|
|
final double titleHeight = titleLineHeight * titleMaxLines + 2; // +2 兜底 padding
|
|||
|
|
|
|||
|
|
return GestureDetector(
|
|||
|
|
behavior: HitTestBehavior.opaque,
|
|||
|
|
onTap: onTap,
|
|||
|
|
child: SizedBox(
|
|||
|
|
width: width,
|
|||
|
|
child: Column(
|
|||
|
|
mainAxisSize: MainAxisSize.min,
|
|||
|
|
children: [
|
|||
|
|
// 图标 + 角标（固定高度容器）
|
|||
|
|
SizedBox(
|
|||
|
|
width: 50,
|
|||
|
|
height: 50,
|
|||
|
|
child: Stack(
|
|||
|
|
clipBehavior: Clip.none,
|
|||
|
|
children: [
|
|||
|
|
// 圆形背景图标（始终居中）
|
|||
|
|
Container(
|
|||
|
|
width: 50,
|
|||
|
|
height: 50,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: const Color(0xFFE8F4FD),
|
|||
|
|
borderRadius: BorderRadius.circular(25),
|
|||
|
|
),
|
|||
|
|
child: Center(
|
|||
|
|
child: Image.asset(
|
|||
|
|
iconPath,
|
|||
|
|
width: 30,
|
|||
|
|
height: 30,
|
|||
|
|
fit: BoxFit.contain,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
|
|||
|
|
// 角标（只有 unreadCount > 0 时显示）
|
|||
|
|
if (unreadCount > 0)
|
|||
|
|
Positioned(
|
|||
|
|
top: -6,
|
|||
|
|
right: -6,
|
|||
|
|
child: Container(
|
|||
|
|
padding: const EdgeInsets.symmetric(horizontal: 5),
|
|||
|
|
constraints: const BoxConstraints(minWidth: 18, minHeight: 18),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.red,
|
|||
|
|
borderRadius: BorderRadius.circular(9),
|
|||
|
|
border: Border.all(color: Colors.white, width: 1.5),
|
|||
|
|
),
|
|||
|
|
alignment: Alignment.center,
|
|||
|
|
child: Text(
|
|||
|
|
badgeText,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
color: Colors.white,
|
|||
|
|
fontSize: 10,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
textAlign: TextAlign.center,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
|
|||
|
|
// 固定高度的文字区域（最多两行），保持图标位置不变
|
|||
|
|
SizedBox(
|
|||
|
|
height: titleHeight,
|
|||
|
|
child: Center(
|
|||
|
|
child: Text(
|
|||
|
|
title,
|
|||
|
|
style: const TextStyle(
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: Colors.black87,
|
|||
|
|
),
|
|||
|
|
textAlign: TextAlign.center,
|
|||
|
|
maxLines: 2,
|
|||
|
|
overflow: TextOverflow.ellipsis,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|