Initial commit: Flutter 无书应用项目
This commit is contained in:
Developer
606
lib/views/profile/per_card.dart
Normal file
606
lib/views/profile/per_card.dart
Normal file
@@ -0,0 +1,606 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'dart:ui';
|
||||
import 'dart:math';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
import '../../constants/app_constants.dart';
|
||||
import '../../services/network_listener_service.dart';
|
||||
|
||||
/// 时间: 2026-03-25
|
||||
/// 功能: 个人信息卡片组件
|
||||
/// 介绍: 可收起/张开的个人信息卡片，支持下拉张开，上滑收起
|
||||
/// 最新变化: 优化动画效果，添加毛玻璃背景，修复布局问题
|
||||
|
||||
class PersonalCard extends StatefulWidget {
|
||||
final Map<String, dynamic> userData;
|
||||
final bool? isExpanded;
|
||||
final ValueChanged<bool>? onExpandChanged;
|
||||
final int currentPage;
|
||||
final ValueChanged<int>? onPageChanged;
|
||||
|
||||
const PersonalCard({
|
||||
super.key,
|
||||
required this.userData,
|
||||
this.isExpanded,
|
||||
this.onExpandChanged,
|
||||
this.currentPage = 1,
|
||||
this.onPageChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
State<PersonalCard> createState() => _PersonalCardState();
|
||||
}
|
||||
|
||||
class _PersonalCardState extends State<PersonalCard> {
|
||||
late bool _isExpanded;
|
||||
late String _currentTip;
|
||||
bool _isOnline = true;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_isExpanded = widget.isExpanded ?? false;
|
||||
_currentTip = _getRandomTip();
|
||||
_loadOnlineStatus();
|
||||
}
|
||||
|
||||
Future<void> _loadOnlineStatus() async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
var isOnline = prefs.getBool('personal_card_online') ?? true;
|
||||
|
||||
// 检查网络连接状态
|
||||
try {
|
||||
final networkStatus = NetworkListenerService().currentStatus;
|
||||
// 如果网络处于错误状态，自动调整为离线状态
|
||||
if (networkStatus == NetworkStatus.error) {
|
||||
isOnline = false;
|
||||
await prefs.setBool('personal_card_online', false);
|
||||
}
|
||||
} catch (e) {
|
||||
// 网络检查失败时保持原状态
|
||||
}
|
||||
|
||||
setState(() {
|
||||
_isOnline = isOnline;
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _toggleOnlineStatus() async {
|
||||
// 如果当前是离线状态，要切换到在线状态，需要先检测网络
|
||||
if (!_isOnline) {
|
||||
// 检测网络状态
|
||||
try {
|
||||
final networkStatus = NetworkListenerService().currentStatus;
|
||||
if (networkStatus == NetworkStatus.error) {
|
||||
// 无网络，弹窗阻止用户打开
|
||||
if (mounted) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: const Text('网络不可用'),
|
||||
content: const Text('当前无网络连接，无法切换到在线状态。请检查网络设置后重试。'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('知道了'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
// 网络检测失败，阻止切换
|
||||
if (mounted) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: const Text('网络检测失败'),
|
||||
content: const Text('无法检测网络状态，请稍后重试。'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('知道了'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setState(() {
|
||||
_isOnline = !_isOnline;
|
||||
});
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setBool('personal_card_online', _isOnline);
|
||||
|
||||
// 显示气泡消息
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(_isOnline ? '已切换到在线状态' : '已切换到离线状态'),
|
||||
duration: const Duration(seconds: 2),
|
||||
backgroundColor: _isOnline ? AppConstants.successColor : Colors.red,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant PersonalCard oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
final newIsExpanded = widget.isExpanded ?? false;
|
||||
if (oldWidget.isExpanded != newIsExpanded) {
|
||||
setState(() {
|
||||
_isExpanded = newIsExpanded;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void _toggleExpand() {
|
||||
setState(() {
|
||||
_isExpanded = !_isExpanded;
|
||||
widget.onExpandChanged?.call(_isExpanded);
|
||||
});
|
||||
}
|
||||
|
||||
final List<String> _tips = [
|
||||
"🐴年大🍊",
|
||||
"🌙安",
|
||||
"🧧到福到",
|
||||
"🍎🍎安安",
|
||||
"💪健康",
|
||||
"🐟🐟有余",
|
||||
"🍊🍈吉利",
|
||||
"🐲🐴精神",
|
||||
"💰满钵满",
|
||||
"😴好梦",
|
||||
"🐴年好☁️，大🍊大🍈，心想事🍊，万事🍅意！",
|
||||
"🌙了，早点🛏️，明天再战，加油💪！",
|
||||
"今天吃了🍎，平平安安；吃了🍊，大吉大利；喝了🥛，白白胖胖👶！",
|
||||
"祝你🐴到成功，💰源滚滚，步步高升📈，生活甜如蜜🍯！",
|
||||
"☀️记得吃饭🍳，元气满满一整天⭐！",
|
||||
"工作辛苦了，喝杯☕，听首歌🎵 放松一下🧘，烦恼全消☁️！",
|
||||
"愿你永远年轻🎉，早日上岸🤔！",
|
||||
"加油💪，认真📖，实现✅！",
|
||||
"旅途愉快✈️，注意安全🛡️，多拍美照📷，一路顺风💨！",
|
||||
"每天笑口常开😊，烦恼抛到九霄云外☁️，好运自然来🍀！",
|
||||
"今晚月色真美🌙，一起散步🚶，吹吹晚风💨，享受宁静时光。",
|
||||
"勇敢🐮🐮，不怕困难！",
|
||||
"天气转凉，注意保暖🧣，多喝热水💧，别感冒🤧！",
|
||||
"有空了? 约上朋友👬，吃顿火锅🍲，聊聊近况，快乐加倍🎉！",
|
||||
"新的一年，愿你拥有🐲🐴精神，事业如🐲头腾飞，家庭和睦🏠，幸福美满❤️！",
|
||||
];
|
||||
|
||||
String _getRandomTip() {
|
||||
final random = Random();
|
||||
return _tips[random.nextInt(_tips.length)];
|
||||
}
|
||||
|
||||
void _showRandomTip() {
|
||||
setState(() {
|
||||
_currentTip = _getRandomTip();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppConstants.primaryColor.withValues(alpha: 0.95),
|
||||
AppConstants.primaryColor.withValues(alpha: 0.9),
|
||||
AppConstants.primaryColor.withValues(alpha: 0.85),
|
||||
],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
),
|
||||
),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.easeInOut,
|
||||
padding: _isExpanded
|
||||
? const EdgeInsets.all(16)
|
||||
: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
|
||||
height: _isExpanded ? null : 72,
|
||||
child: Stack(
|
||||
children: [
|
||||
// 毛玻璃效果层（在文字按钮下层，背景色上层）
|
||||
BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
|
||||
child: Container(color: Colors.transparent),
|
||||
),
|
||||
// 内容层（在毛玻璃效果上层）
|
||||
_isExpanded ? _buildExpandedContent() : _buildCollapsedContent(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCollapsedContent() {
|
||||
return Row(
|
||||
children: [
|
||||
// 左侧区域：可点击展开/收起
|
||||
Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: _toggleExpand,
|
||||
child: Row(
|
||||
children: [
|
||||
// 头像在左边
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.easeInOut,
|
||||
child: Stack(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 24,
|
||||
backgroundColor: Colors.white,
|
||||
child: Text(
|
||||
widget.userData['avatar'] ?? '👤',
|
||||
style: const TextStyle(fontSize: 18),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
width: 16,
|
||||
height: 16,
|
||||
decoration: BoxDecoration(
|
||||
color: _isOnline
|
||||
? AppConstants.successColor
|
||||
: Colors.red,
|
||||
border: Border.all(color: Colors.white, width: 2),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
_isOnline ? Icons.check : Icons.close,
|
||||
color: Colors.white,
|
||||
size: 10,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// 名称和签名
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
widget.userData['nickname'] ?? '诗词爱好者',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
widget.userData['signature'] ?? '人生如诗，岁月如歌',
|
||||
style: const TextStyle(
|
||||
color: Colors.white70,
|
||||
fontSize: 12,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// 右侧区域：标签栏，不可触发展开/收起
|
||||
GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () {},
|
||||
child: Row(
|
||||
children: [
|
||||
_buildTabLabel(0, '卡片'),
|
||||
_buildTabLabel(1, '设置'),
|
||||
_buildTabLabel(2, '更多'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildExpandedContent() {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 昵称和等级
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
widget.userData['nickname'] ?? '诗词爱好者',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.2),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Text(
|
||||
widget.userData['level'] ?? 'Lv.1',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
// 个性签名
|
||||
Text(
|
||||
widget.userData['signature'] ?? '人生如诗，岁月如歌',
|
||||
style: const TextStyle(
|
||||
color: Colors.white70,
|
||||
fontSize: 12,
|
||||
height: 1.2,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
// 统计信息
|
||||
Row(
|
||||
children: [
|
||||
_buildStatItem('收藏', widget.userData['favorites'] ?? 0),
|
||||
const SizedBox(width: 12),
|
||||
_buildStatItem('点赞', widget.userData['likes'] ?? 0),
|
||||
const SizedBox(width: 12),
|
||||
_buildStatItem('浏览', widget.userData['views'] ?? 0),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
// 头像在右边
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.easeInOut,
|
||||
child: Stack(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 36,
|
||||
backgroundColor: Colors.white,
|
||||
child: Text(
|
||||
widget.userData['avatar'] ?? '👤',
|
||||
style: const TextStyle(fontSize: 20),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
width: 18,
|
||||
height: 18,
|
||||
decoration: BoxDecoration(
|
||||
color: _isOnline
|
||||
? AppConstants.successColor
|
||||
: Colors.red,
|
||||
border: Border.all(color: Colors.white, width: 2),
|
||||
borderRadius: BorderRadius.circular(9),
|
||||
),
|
||||
child: Icon(
|
||||
_isOnline ? Icons.check : Icons.close,
|
||||
color: Colors.white,
|
||||
size: 10,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
// 操作按钮 - 文本祝福语
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
HapticFeedback.lightImpact();
|
||||
_showRandomTip();
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.1),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
'💡:$_currentTip',
|
||||
style: const TextStyle(
|
||||
color: AppConstants.primaryColor,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
textAlign: TextAlign.left,
|
||||
maxLines: 3,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// 在线状态开关
|
||||
Switch(
|
||||
value: _isOnline,
|
||||
onChanged: (value) {
|
||||
_toggleOnlineStatus();
|
||||
},
|
||||
activeColor: AppConstants.primaryColor,
|
||||
inactiveTrackColor: Colors.grey.shade300,
|
||||
inactiveThumbColor: Colors.grey,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// 标签栏
|
||||
GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () {},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
// 页面指示器
|
||||
Expanded(
|
||||
child: Container(
|
||||
height: 3,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.3),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
// 背景条
|
||||
Container(
|
||||
height: 3,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.3),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
// 滑动指示器
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
width: MediaQuery.of(context).size.width / 3 - 40,
|
||||
height: 3,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
margin: EdgeInsets.only(
|
||||
left:
|
||||
(MediaQuery.of(context).size.width / 3 - 40) *
|
||||
widget.currentPage,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
// 页面标签
|
||||
_buildTabLabel(0, '卡片'),
|
||||
_buildTabLabel(1, '设置'),
|
||||
_buildTabLabel(2, '更多'),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatItem(String label, int value) {
|
||||
return Column(
|
||||
children: [
|
||||
Text(
|
||||
value.toString(),
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: const TextStyle(color: Colors.white70, fontSize: 12),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTabLabel(int index, String label) {
|
||||
// === 单个页面标签：可点击切换到对应页面 ===
|
||||
final isSelected = widget.currentPage == index;
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
widget.onPageChanged?.call(index);
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
index == 0
|
||||
? Icons.credit_card
|
||||
: index == 1
|
||||
? Icons.settings
|
||||
: Icons.more_horiz,
|
||||
color: isSelected ? Colors.white : Colors.white70,
|
||||
size: 16,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: isSelected ? Colors.white : Colors.white70,
|
||||
fontSize: 10,
|
||||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user