add
This commit is contained in:
macbook_max
@@ -0,0 +1,211 @@
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../core/theme/app_theme.dart';
|
||||
import '../../models/video_item.dart';
|
||||
import '../../providers/profile_provider.dart';
|
||||
|
||||
/// 他人公开主页（《03-接口文档》4.7/4.8，游客可看）：
|
||||
/// 头像/昵称/简介/作品数/获赞数 + 已发布作品双列网格，点击进单视频播放页
|
||||
class UserProfileScreen extends ConsumerWidget {
|
||||
const UserProfileScreen({super.key, required this.userId});
|
||||
|
||||
final int userId;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final state = ref.watch(profileProvider(userId));
|
||||
final notifier = ref.read(profileProvider(userId).notifier);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(state.profile?.nickname ?? '用户主页')),
|
||||
body: state.isLoading && state.profile == null
|
||||
? const Center(
|
||||
child: CircularProgressIndicator(color: AppColors.primary),
|
||||
)
|
||||
: state.loadFailed
|
||||
? Center(
|
||||
child: TextButton(
|
||||
onPressed: notifier.load,
|
||||
child: const Text('加载失败，点击重试',
|
||||
style: TextStyle(color: AppColors.primary)),
|
||||
),
|
||||
)
|
||||
: CustomScrollView(
|
||||
slivers: [
|
||||
// 头部资料卡
|
||||
SliverToBoxAdapter(child: _ProfileHeader(state: state)),
|
||||
// 作品网格
|
||||
if (state.works.isEmpty)
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 48),
|
||||
child: Center(
|
||||
child: Text('暂无作品',
|
||||
style: TextStyle(
|
||||
color: AppColors.textSecondary)),
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
sliver: SliverGrid.builder(
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: 8,
|
||||
mainAxisSpacing: 8,
|
||||
childAspectRatio: 0.68,
|
||||
),
|
||||
itemCount: state.works.length,
|
||||
itemBuilder: (_, index) =>
|
||||
_WorkCard(item: state.works[index]),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ProfileHeader extends StatelessWidget {
|
||||
const _ProfileHeader({required this.state});
|
||||
|
||||
final ProfileState state;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final profile = state.profile;
|
||||
if (profile == null) return const SizedBox.shrink();
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 40,
|
||||
backgroundColor: AppColors.surface,
|
||||
backgroundImage: profile.avatarUrl.isNotEmpty
|
||||
? CachedNetworkImageProvider(profile.avatarUrl)
|
||||
: null,
|
||||
child: profile.avatarUrl.isEmpty
|
||||
? Text(
|
||||
profile.nickname.isNotEmpty
|
||||
? profile.nickname.characters.first
|
||||
: '友',
|
||||
style: const TextStyle(fontSize: 28),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
profile.nickname,
|
||||
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
|
||||
),
|
||||
if (profile.bio.isNotEmpty) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
profile.bio,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textSecondary,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_Stat(count: profile.videoCount, label: '作品'),
|
||||
const SizedBox(width: 40),
|
||||
_Stat(count: profile.totalLikes, label: '获赞'),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Stat extends StatelessWidget {
|
||||
const _Stat({required this.count, required this.label});
|
||||
|
||||
final int count;
|
||||
final String label;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
Text(
|
||||
count >= 10000
|
||||
? '${(count / 10000).toStringAsFixed(1)}w'
|
||||
: '$count',
|
||||
style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w700),
|
||||
),
|
||||
Text(
|
||||
label,
|
||||
style: const TextStyle(color: AppColors.textSecondary, fontSize: 12),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WorkCard extends StatelessWidget {
|
||||
const _WorkCard({required this.item});
|
||||
|
||||
final VideoItem item;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () => context.push('/search/play', extra: item),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Container(
|
||||
color: AppColors.surface,
|
||||
child: item.coverUrl.isNotEmpty
|
||||
? CachedNetworkImage(
|
||||
imageUrl: item.coverUrl,
|
||||
fit: BoxFit.cover,
|
||||
errorWidget: (_, __, ___) => const Icon(
|
||||
Icons.play_circle_outline,
|
||||
color: AppColors.textWeak,
|
||||
size: 40,
|
||||
),
|
||||
)
|
||||
: const Icon(
|
||||
Icons.play_circle_outline,
|
||||
color: AppColors.textWeak,
|
||||
size: 40,
|
||||
),
|
||||
),
|
||||
// 底部标题条
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
color: Colors.black54,
|
||||
padding: const EdgeInsets.all(6),
|
||||
child: Text(
|
||||
item.title.isNotEmpty ? item.title : '未命名视频',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(fontSize: 12),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user