initial
This commit is contained in:
spasolreisa
430
lib/pages/home/home_page.dart
Normal file
430
lib/pages/home/home_page.dart
Normal file
@@ -0,0 +1,430 @@
|
||||
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),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user