431 lines
15 KiB
Dart
431 lines
15 KiB
Dart
import 'package:flutter/material.dart';
|
||
import '../../tool/gradientText.dart';
|
||
// 注意：如果 UserPage, SongListPage 等只是作为内部卡片展示，不需要再 import 用于 Navigator push
|
||
// 但如果其他卡片还需要跳转，保留 import 即可
|
||
import '../user/userpage.dart';
|
||
import '../songlistpage.dart';
|
||
import '../scorelist.dart';
|
||
import 'package:provider/provider.dart';
|
||
import '../../providers/user_provider.dart';
|
||
|
||
class HomePage extends StatelessWidget {
|
||
// ✅ 1. 添加回调函数参数
|
||
final Function(int)? onSwitchTab;
|
||
|
||
const HomePage({super.key, this.onSwitchTab});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final userProvider = context.watch<UserProvider>();
|
||
|
||
return Scaffold(
|
||
backgroundColor: Colors.transparent,
|
||
body: SafeArea(
|
||
child: SingleChildScrollView(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// ====================== 顶部 Header ======================
|
||
SizedBox(
|
||
width: double.infinity,
|
||
height: 100,
|
||
child: Stack(
|
||
children: [
|
||
const Padding(
|
||
padding: EdgeInsets.only(left: 30, top: 60),
|
||
child: Text(
|
||
"Tool",
|
||
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
|
||
),
|
||
),
|
||
Positioned(
|
||
right: 20,
|
||
top: 25,
|
||
child: Row(
|
||
children: [
|
||
GradientText(
|
||
data: userProvider.username,
|
||
style: const TextStyle(fontSize: 19, fontWeight: FontWeight.bold),
|
||
gradientLayers: [
|
||
GradientLayer(
|
||
gradient: const LinearGradient(
|
||
colors: [Colors.pinkAccent, Colors.orangeAccent],
|
||
),
|
||
blendMode: BlendMode.srcIn,
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(width: 8),
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(0), // 修正语法错误，原代码可能有误
|
||
child: SizedBox(
|
||
width: 54,
|
||
height: 54,
|
||
child: userProvider.avatarUrl.isNotEmpty
|
||
? Image.network(
|
||
userProvider.avatarUrl,
|
||
fit: BoxFit.cover,
|
||
)
|
||
: Container(
|
||
color: Colors.grey[200],
|
||
child: const Icon(Icons.person, size: 30),
|
||
),
|
||
),
|
||
)
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(height: 30),
|
||
|
||
// ====================== 横向卡片区域 ======================
|
||
SizedBox(
|
||
height: 180,
|
||
child: SingleChildScrollView(
|
||
scrollDirection: Axis.horizontal,
|
||
padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10).copyWith(bottom: 30),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
|
||
// ✅ 2. 修改：用户中心 -> 切换到 Tab 3 (UserPage)
|
||
_buildCardWithTitle(
|
||
context: context,
|
||
title: "用户中心",
|
||
icon: Icons.person_outline,
|
||
// 不再传递 targetPage，而是传递 targetIndex
|
||
targetIndex: 3,
|
||
gradient: const LinearGradient(
|
||
colors: [Colors.black, Colors.grey],
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
),
|
||
shadowColor: Colors.black38,
|
||
),
|
||
const SizedBox(width: 20),
|
||
|
||
// 歌曲列表 (保持原有跳转逻辑或自行定义)
|
||
_buildCardWithTitle(
|
||
context: context,
|
||
title: "歌曲列表",
|
||
icon: Icons.music_note_outlined,
|
||
targetPage: const SongListPage(), // 假设这个还是用 Push 跳转
|
||
gradient: const LinearGradient(
|
||
colors: [Color(0xFFff9a9e), Color(0xFFfecfef)],
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
),
|
||
shadowColor: const Color(0xFFff9a9e).withOpacity(0.6),
|
||
),
|
||
const SizedBox(width: 20),
|
||
|
||
// ✅ 3. 修改：成绩管理 -> 切换到 Tab 1 (ScorePage)
|
||
_buildCardWithTitle(
|
||
context: context,
|
||
title: "成绩管理",
|
||
icon: Icons.score,
|
||
targetIndex: 1,
|
||
gradient: const LinearGradient(
|
||
colors: [Color(0xFF84fab0), Color(0xFF8fd3f4)],
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
),
|
||
shadowColor: const Color(0xFF84fab0).withOpacity(0.6),
|
||
),
|
||
const SizedBox(width: 20),
|
||
|
||
// 娱乐功能
|
||
_buildCardWithTitle(
|
||
context: context,
|
||
title: "娱乐功能",
|
||
icon: Icons.kebab_dining_sharp,
|
||
targetPage: const ScoreListPage(),
|
||
gradient: const LinearGradient(
|
||
colors: [Colors.lightBlueAccent, Colors.blueAccent],
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
),
|
||
shadowColor: Colors.lightBlue.withOpacity(0.6),
|
||
),
|
||
const SizedBox(width: 20),
|
||
|
||
// 评分列表
|
||
_buildCardWithTitle(
|
||
context: context,
|
||
title: "评分列表",
|
||
icon: Icons.star,
|
||
targetPage: const ScoreListPage(),
|
||
gradient: const LinearGradient(
|
||
colors: [Colors.redAccent, Colors.pinkAccent],
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
),
|
||
shadowColor: Colors.red.withOpacity(0.6),
|
||
),
|
||
const SizedBox(width: 20),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
// ====================== 海报 ======================
|
||
// 假设 PosterImage 是你自定义的一个 Widget
|
||
const PosterImage(imageUrl: 'https://cdn.godserver.cn/post/post%20unionapp1.png'),
|
||
const SizedBox(height: 20),
|
||
|
||
// ====================== 新增：用户数据展示卡片 ======================
|
||
const _UserInfoCard(),
|
||
const SizedBox(height: 30),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// ✅ 4. 修改构建方法，支持 targetIndex 和 targetPage 两种模式
|
||
Widget _buildCardWithTitle({
|
||
required BuildContext context,
|
||
required String title,
|
||
required IconData icon,
|
||
int? targetIndex, // 新增：如果是切换 Tab，传这个
|
||
Widget? targetPage, // 保留：如果是页面跳转，传这个
|
||
required LinearGradient gradient,
|
||
required Color shadowColor,
|
||
}) {
|
||
return Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
GestureDetector(
|
||
onTap: () {
|
||
if (targetIndex != null && onSwitchTab != null) {
|
||
// ✅ 执行 Tab 切换
|
||
onSwitchTab!(targetIndex);
|
||
} else if (targetPage != null) {
|
||
// ✅ 执行页面跳转
|
||
Navigator.push(
|
||
context,
|
||
MaterialPageRoute(builder: (context) => targetPage),
|
||
);
|
||
}
|
||
},
|
||
child: _buildCustomCardBody(
|
||
gradient: gradient,
|
||
shadowColor: shadowColor,
|
||
icon: icon,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
Text(
|
||
title,
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
letterSpacing: 0.5,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildCustomCardBody({
|
||
required LinearGradient gradient,
|
||
required Color shadowColor,
|
||
required IconData icon,
|
||
}) {
|
||
return Container(
|
||
width: 100,
|
||
height: 100,
|
||
decoration: BoxDecoration(
|
||
gradient: gradient,
|
||
borderRadius: BorderRadius.circular(24),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: shadowColor,
|
||
blurRadius: 15,
|
||
spreadRadius: 3,
|
||
offset: const Offset(4, 6),
|
||
),
|
||
],
|
||
),
|
||
child: Center(
|
||
child: Container(
|
||
padding: const EdgeInsets.all(10),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white.withOpacity(0.25),
|
||
shape: BoxShape.circle,
|
||
),
|
||
child: Icon(
|
||
icon,
|
||
size: 36,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ====================== 新增：用户数据卡片组件 ======================
|
||
class _UserInfoCard extends StatelessWidget {
|
||
const _UserInfoCard();
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final userProvider = Provider.of<UserProvider>(context);
|
||
|
||
return Padding(
|
||
// 内边距和海报完全一致，保证同宽
|
||
padding: const EdgeInsets.symmetric(horizontal: 17.0),
|
||
child: Container(
|
||
width: double.infinity,
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(10),
|
||
color: Colors.white.withOpacity(0.8),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.pink.shade100,
|
||
blurRadius: 4,
|
||
offset: const Offset(0, 6),
|
||
spreadRadius: 1,
|
||
),
|
||
],
|
||
),
|
||
padding: const EdgeInsets.all(20),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 标题
|
||
const Text(
|
||
"当前用户信息",
|
||
style: TextStyle(
|
||
fontSize: 18,
|
||
color: Colors.purpleAccent,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const Divider(height: 5, thickness: 1),
|
||
const SizedBox(height: 6),
|
||
|
||
// 用户信息行
|
||
Row(
|
||
children: [
|
||
// 头像
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(0),
|
||
child: SizedBox(
|
||
width: 60,
|
||
height: 60,
|
||
child: userProvider.avatarUrl.isNotEmpty
|
||
? Image.network(
|
||
userProvider.avatarUrl,
|
||
fit: BoxFit.cover,
|
||
)
|
||
: Container(
|
||
color: Colors.grey[200],
|
||
child: const Icon(Icons.person, size: 30),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 18),
|
||
|
||
// 文字信息
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
GradientText(
|
||
data:"用户名：${userProvider.username}",
|
||
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||
gradientLayers: [
|
||
GradientLayer(
|
||
gradient: const LinearGradient(
|
||
colors: [Colors.blueAccent, Colors.green],
|
||
),
|
||
blendMode: BlendMode.srcIn,
|
||
),
|
||
],
|
||
),
|
||
|
||
const SizedBox(height: 6),
|
||
Text(
|
||
userProvider.username == "未登录"
|
||
? "状态：未登录"
|
||
: "状态：已登录",
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: userProvider.username == "未登录"
|
||
? Colors.red
|
||
: Colors.green,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class PosterImage extends StatelessWidget {
|
||
final String imageUrl;
|
||
|
||
const PosterImage({Key? key, required this.imageUrl}) : super(key: key);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
||
child: ConstrainedBox(
|
||
constraints: const BoxConstraints(
|
||
maxWidth: 800,
|
||
),
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(8),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.purpleAccent.withOpacity(0.14),
|
||
blurRadius: 12,
|
||
offset: const Offset(0, 10),
|
||
spreadRadius: 10,
|
||
),
|
||
],
|
||
),
|
||
child: ClipRRect(
|
||
borderRadius: BorderRadius.circular(8),
|
||
child: Image.network(
|
||
imageUrl,
|
||
fit: BoxFit.cover,
|
||
loadingBuilder: (context, child, loadingProgress) {
|
||
if (loadingProgress == null) return child;
|
||
return Center(
|
||
child: CircularProgressIndicator(
|
||
value: loadingProgress.expectedTotalBytes != null
|
||
? loadingProgress.cumulativeBytesLoaded /
|
||
loadingProgress.expectedTotalBytes!
|
||
: null,
|
||
),
|
||
);
|
||
},
|
||
errorBuilder: (context, error, stackTrace) {
|
||
return const Center(
|
||
child: Icon(Icons.broken_image, size: 50, color: Colors.grey),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|