dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化调整“我的”界面

Browse Source
This commit is contained in:
DelLevin-Home
2026-08-09 22:42:55 +08:00
parent 9cc492782e
commit 65231e204f
13 changed files with 682 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
lib/pages/book/book_tab_page.dart
View File

@@ -8,6 +8,7 @@ import '../../widgets/book_status_bar.dart';
import '../../widgets/book_list_item.dart';
import '../../widgets/animated_star_rating.dart';
import '../../widgets/shimmer_skeleton.dart';
import '../../widgets/top_fade_scrim.dart';
import '../../widgets/fade_in_local_image.dart';
import '../../widgets/master_detail_scaffold.dart';
import '../../widgets/detail_placeholder.dart';
@@ -155,7 +156,14 @@ class _BookTabPageState extends State<BookTabPage> {
final isWallMode = provider.bookshelfMode;
final masterContent = Column(children: [
if (!isWallMode) const BookStatusBar(),
Expanded(child: _buildBody(context)),
Expanded(
child: Stack(
children: [
_buildBody(context),
if (!isWallMode) const TopFadeScrim(),
],
),
),
]);
if (!isWideContent) return masterContent;

10
lib/pages/game/game_tab_page.dart
View File

@@ -7,6 +7,7 @@ import '../../widgets/game_status_bar.dart';
import '../../widgets/game_list_item.dart';
import '../../widgets/animated_star_rating.dart';
import '../../widgets/shimmer_skeleton.dart';
import '../../widgets/top_fade_scrim.dart';
import '../../widgets/fade_in_local_image.dart';
import '../../utils/responsive.dart';
import '../../widgets/master_detail_scaffold.dart';
@@ -176,7 +177,14 @@ class _GameTabPageState extends State<GameTabPage> {
final masterContent = Column(
children: [
if (!isWallMode) const GameStatusBar(),
Expanded(child: _buildBody(context)),
Expanded(
child: Stack(
children: [
_buildBody(context),
if (!isWallMode) const TopFadeScrim(),
],
),
),
],
);

10
lib/pages/movies/movie_tab_page.dart
View File

@@ -8,6 +8,7 @@ import '../../widgets/movie_category_bar.dart';
import '../../widgets/movie_list_item.dart';
import '../../widgets/animated_star_rating.dart';
import '../../widgets/shimmer_skeleton.dart';
import '../../widgets/top_fade_scrim.dart';
import '../../widgets/fade_in_local_image.dart';
import '../../utils/responsive.dart';
import '../../widgets/master_detail_scaffold.dart';
@@ -207,7 +208,14 @@ class _MovieTabPageState extends State<MovieTabPage> {
provider.movieDisplayMode == 1
? const MovieCategoryBar()
: const MovieStatusBar(),
Expanded(child: _buildBody(context)),
Expanded(
child: Stack(
children: [
_buildBody(context),
if (!isWallMode) const TopFadeScrim(),
],
),
),
],
);

77
lib/pages/profile/layout_settings_page.dart
View File

@@ -19,8 +19,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
int _gameLayout = 0;
bool _movieWallMode = false;
int _movieDisplayMode = 0;
int _movieStatusBarStyle = 0;
bool _bookshelfMode = false;
int _bookStatusBarStyle = 0;
bool _gameWallMode = false;
int _gameStatusBarStyle = 0;
int _movieSortMode = 0;
int _bookSortMode = 0;
int _noteSortMode = 0;
@@ -36,8 +39,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
_gameLayout = _userPrefs.gameLayoutStyle;
_movieWallMode = _userPrefs.movieWallMode;
_movieDisplayMode = _userPrefs.movieDisplayMode;
_movieStatusBarStyle = _userPrefs.movieStatusBarStyle;
_bookshelfMode = _userPrefs.bookshelfMode;
_bookStatusBarStyle = _userPrefs.bookStatusBarStyle;
_gameWallMode = _userPrefs.gameWallMode;
_gameStatusBarStyle = _userPrefs.gameStatusBarStyle;
_movieSortMode = _userPrefs.movieSortMode;
_bookSortMode = _userPrefs.bookSortMode;
_noteSortMode = _userPrefs.noteSortMode;
@@ -103,6 +109,9 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
parts.add('影视墙');
} else {
parts.add(_movieDisplayMode == 1 ? '分类状态' : '观看状态');
if (_movieDisplayMode == 0) {
parts.add(['胶囊', '下划线', '芯片', '下拉'][_movieStatusBarStyle]);
}
}
parts.add(['海报网格', '列表', '大图卡片'][_movieLayout]);
parts.add(['更新时间', '创建时间', '评分', '观看日期', '上映时间'][_movieSortMode]);
@@ -111,7 +120,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
String get _bookSubtitle {
final parts = <String>[];
if (_bookshelfMode) parts.add('书架模式');
if (_bookshelfMode) {
parts.add('书架模式');
} else {
parts.add(['胶囊', '下划线', '芯片', '下拉'][_bookStatusBarStyle]);
}
parts.add(['海报网格', '列表'][_bookLayout]);
parts.add(['更新时间', '创建时间', '评分', '开始阅读', '出版时间'][_bookSortMode]);
return parts.join(' · ');
@@ -126,7 +139,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
String get _gameSubtitle {
final parts = <String>[];
if (_gameWallMode) parts.add('游戏墙');
if (_gameWallMode) {
parts.add('游戏墙');
} else {
parts.add(['胶囊', '下划线', '芯片', '下拉'][_gameStatusBarStyle]);
}
parts.add(['海报网格', '列表', '大图卡片'][_gameLayout]);
parts.add(['更新时间', '创建时间', '评分', '发售时间'][_gameSortMode]);
return parts.join(' · ');
@@ -384,6 +401,19 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
options: const [(0, Icons.check_circle_outline, '观看状态'), (1, Icons.category_outlined, '分类状态')],
onChanged: (v) { _setDisplayMode('movie', v); setSheetState(() {}); }, colors: colors,
),
if (_movieDisplayMode == 0) ...[
_sheetDivider(colors),
_sheetOptionRow(
label: '状态栏样式', selected: _movieStatusBarStyle,
options: const [
(0, Icons.circle, '胶囊'),
(1, Icons.format_underlined, '下划线'),
(2, Icons.square_outlined, '芯片'),
(3, Icons.arrow_drop_down_circle_outlined, '下拉'),
],
onChanged: (v) { _setStatusBarStyle('movie', v); setSheetState(() {}); }, colors: colors,
),
],
],
_sheetDivider(colors),
_sheetOptionRow(
@@ -429,6 +459,19 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
title: '书架模式', subtitle: '显示全部书籍，不区分状态',
value: _bookshelfMode, onChanged: (v) { _setWallMode('book', v); setSheetState(() {}); }, colors: colors,
),
if (!_bookshelfMode) ...[
_sheetDivider(colors),
_sheetOptionRow(
label: '状态栏样式', selected: _bookStatusBarStyle,
options: const [
(0, Icons.circle, '胶囊'),
(1, Icons.format_underlined, '下划线'),
(2, Icons.square_outlined, '芯片'),
(3, Icons.arrow_drop_down_circle_outlined, '下拉'),
],
onChanged: (v) { _setStatusBarStyle('book', v); setSheetState(() {}); }, colors: colors,
),
],
_sheetDivider(colors),
_sheetOptionRow(
label: '布局样式', selected: _bookLayout,
@@ -509,6 +552,19 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
title: '游戏墙模式', subtitle: '显示全部游戏，不区分状态',
value: _gameWallMode, onChanged: (v) { _setWallMode('game', v); setSheetState(() {}); }, colors: colors,
),
if (!_gameWallMode) ...[
_sheetDivider(colors),
_sheetOptionRow(
label: '状态栏样式', selected: _gameStatusBarStyle,
options: const [
(0, Icons.circle, '胶囊'),
(1, Icons.format_underlined, '下划线'),
(2, Icons.square_outlined, '芯片'),
(3, Icons.arrow_drop_down_circle_outlined, '下拉'),
],
onChanged: (v) { _setStatusBarStyle('game', v); setSheetState(() {}); }, colors: colors,
),
],
_sheetDivider(colors),
_sheetOptionRow(
label: '布局样式', selected: _gameLayout,
@@ -577,6 +633,23 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
}
}
void _setStatusBarStyle(String type, int value) async {
switch (type) {
case 'movie':
await _userPrefs.setMovieStatusBarStyle(value);
setState(() => _movieStatusBarStyle = value);
if (mounted) context.read<AppProvider>().setMovieStatusBarStyle(value);
case 'book':
await _userPrefs.setBookStatusBarStyle(value);
setState(() => _bookStatusBarStyle = value);
if (mounted) context.read<AppProvider>().setBookStatusBarStyle(value);
case 'game':
await _userPrefs.setGameStatusBarStyle(value);
setState(() => _gameStatusBarStyle = value);
if (mounted) context.read<AppProvider>().setGameStatusBarStyle(value);
}
}
void _setLayout(String type, int value) async {
switch (type) {
case 'note':

157
lib/pages/profile/profile_page.dart
View File

@@ -36,6 +36,9 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
String _motto = '好运不会眷顾一无所有之人。';
String? _avatarPath;
// 我的模块切换索引 (0=影视, 1=阅读, 2=笔记, 3=游戏)
int _myModuleIndex = 0;
@override
void initState() {
super.initState();
@@ -102,21 +105,8 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
children: [
_buildHero(movies, books, notes, games),
const SizedBox(height: 20),
if (_userPrefs.showMovieTab) ...[
_buildModuleHeader('影视'),
_buildMovieModule(movies),
const SizedBox(height: 20),
],
if (_userPrefs.showBookTab) ...[
_buildModuleHeader('阅读'),
_buildBookModule(books),
const SizedBox(height: 20),
],
if (_userPrefs.showNoteTab) ...[
_buildModuleHeader('笔记'),
_buildNoteModule(notes),
const SizedBox(height: 20),
],
_buildMyModule(movies, books, notes, games),
const SizedBox(height: 20),
_buildTagsSection(movies, books, notes),
const SizedBox(height: 20),
_buildToolsGrid(context),
@@ -300,17 +290,136 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
);
}
// ─── 模块标题 ──────────────────────────────────────────────────────
// 我的模块数据
static const _moduleDefs = <(String, IconData)>[
('影视', Icons.movie_outlined),
('阅读', Icons.menu_book_outlined),
('笔记', Icons.sticky_note_2_outlined),
('游戏', Icons.sports_esports_outlined),
];
List<(String, IconData)> get _visibleModules {
final result = <(String, IconData)>[];
if (_userPrefs.showMovieTab) result.add(_moduleDefs[0]);
if (_userPrefs.showBookTab) result.add(_moduleDefs[1]);
if (_userPrefs.showNoteTab) result.add(_moduleDefs[2]);
if (_userPrefs.showGameTab) result.add(_moduleDefs[3]);
return result;
}
// 我的模块分发
Widget _buildMyModule(List<Movie> movies, List<Book> books, List<Note> notes, List<Game> games) {
final modules = _visibleModules;
if (modules.isEmpty) return const SizedBox.shrink();
final index = _myModuleIndex.clamp(0, modules.length - 1);
final (title, _) = modules[index];
Widget content;
switch (title) {
case '阅读':
content = _buildBookModule(books);
break;
case '笔记':
content = _buildNoteModule(notes);
break;
case '游戏':
content = _buildGameModule(games);
break;
default:
content = _buildMovieModule(movies);
}
Widget _buildModuleHeader(String title) {
final colors = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text(title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: colors.onSurface)),
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Text(title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: colors.onSurface)),
const Spacer(),
// 图标切换器
Row(
mainAxisSize: MainAxisSize.min,
children: [
for (int i = 0; i < modules.length; i++) ...[
if (i != 0) const SizedBox(width: 6),
GestureDetector(
onTap: () => setState(() => _myModuleIndex = i),
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: i == index ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(8),
),
child: Icon(modules[i].$2,
size: 16,
color: i == index
? colors.onPrimary
: colors.onSurface.withValues(alpha: 0.4)),
),
),
],
],
),
],
),
),
const SizedBox(height: 8),
content,
],
);
}
// ─── 游戏模块 ──────────────────────────────────────────────────────
Widget _buildGameModule(List<Game> games) {
final colors = Theme.of(context).colorScheme;
final completed = games.where((g) => g.status == 'completed').length;
final playing = games.where((g) => g.status == 'playing').length;
final wantTo = games.where((g) => g.status == 'want_to_play').length;
final recent = games.toList()
..sort((a, b) => b.createdAt.compareTo(a.createdAt));
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(children: [
_buildStatusTag('已通关', completed, true, colors),
const SizedBox(width: 10),
_buildStatusTag('在玩', playing, false, colors),
const SizedBox(width: 10),
_buildStatusTag('想玩', wantTo, false, colors),
]),
),
const SizedBox(height: 10),
if (recent.isNotEmpty)
SizedBox(
height: 120,
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 20),
itemCount: recent.take(15).length,
separatorBuilder: (_, __) => const SizedBox(width: 8),
itemBuilder: (_, i) => _buildCoverCard(
title: recent[i].title,
imagePath: recent[i].coverPath,
onTap: () => Navigator.pushNamed(context, '/game-detail',
arguments: recent[i]),
),
),
)
else
_buildEmptyHint('暂无游戏记录'),
],
);
}

33
lib/providers/app_provider.dart
View File

@@ -99,12 +99,18 @@ class AppProvider extends ChangeNotifier {
// 影视显示模式 (0: 观看状态, 1: 分类状态)
int _movieDisplayMode = 0;
// 影视状态栏样式 (0: 胶囊滑块, 1: 下划线, 2: 芯片组, 3: 下拉)
int _movieStatusBarStyle = 0;
// 影视分类索引
int _movieCategoryIndex = 0;
// 阅读选中的状态 (0: 读完，1: 在读，2: 准备读)
int _bookStatusIndex = 0;
// 书籍状态栏样式 (0: 胶囊滑块, 1: 下划线, 2: 芯片组, 3: 下拉)
int _bookStatusBarStyle = 0;
// 书架模式（不显示分类，按创建时间排序）
bool _bookshelfMode = false;
@@ -114,6 +120,9 @@ class AppProvider extends ChangeNotifier {
// 游戏列表布局样式 (0: 网格, 1: 列表, 2: 大图卡片)
int _gameLayoutStyle = 0;
// 游戏状态栏样式 (0: 胶囊滑块, 1: 下划线, 2: 芯片组, 3: 下拉)
int _gameStatusBarStyle = 0;
// 游戏墙模式
bool _gameWallMode = false;
@@ -199,9 +208,12 @@ class AppProvider extends ChangeNotifier {
_movieLayoutStyle = userPrefs.movieLayoutStyle;
_movieWallMode = userPrefs.movieWallMode;
_movieDisplayMode = userPrefs.movieDisplayMode;
_movieStatusBarStyle = userPrefs.movieStatusBarStyle;
_bookStatusBarStyle = userPrefs.bookStatusBarStyle;
_bookshelfMode = userPrefs.bookshelfMode;
_gameLayoutStyle = userPrefs.gameLayoutStyle;
_gameWallMode = userPrefs.gameWallMode;
_gameStatusBarStyle = userPrefs.gameStatusBarStyle;
_homeModuleSwitchMode = userPrefs.homeModuleSwitchMode;
final defaultIndex = userPrefs.defaultMainTabIndex;
// Windows 桌面端且主页开启时，强制默认为主页
@@ -311,12 +323,15 @@ class AppProvider extends ChangeNotifier {
int get movieLayoutStyle => _movieLayoutStyle;
bool get movieWallMode => _movieWallMode;
int get movieDisplayMode => _movieDisplayMode;
int get movieStatusBarStyle => _movieStatusBarStyle;
int get movieCategoryIndex => _movieCategoryIndex;
int get bookStatusIndex => _bookStatusIndex;
int get bookStatusBarStyle => _bookStatusBarStyle;
bool get bookshelfMode => _bookshelfMode;
int get gameStatusIndex => _gameStatusIndex;
int get gameLayoutStyle => _gameLayoutStyle;
bool get gameWallMode => _gameWallMode;
int get gameStatusBarStyle => _gameStatusBarStyle;
bool get drawerOpen => _drawerOpen;
bool get bottomNavVisible => _bottomNavVisible;
ThemeMode get themeMode => _themeMode;
@@ -495,6 +510,12 @@ class AppProvider extends ChangeNotifier {
notifyListeners();
}
void setMovieStatusBarStyle(int style) {
_movieStatusBarStyle = style;
UserPrefs().setMovieStatusBarStyle(style);
notifyListeners();
}
void setMovieCategoryIndex(int index) {
_movieCategoryIndex = index;
notifyListeners();
@@ -511,6 +532,12 @@ class AppProvider extends ChangeNotifier {
notifyListeners();
}
void setBookStatusBarStyle(int style) {
_bookStatusBarStyle = style;
UserPrefs().setBookStatusBarStyle(style);
notifyListeners();
}
void setGameStatusIndex(int index) {
_gameStatusIndex = index;
notifyListeners();
@@ -528,6 +555,12 @@ class AppProvider extends ChangeNotifier {
notifyListeners();
}
void setGameStatusBarStyle(int style) {
_gameStatusBarStyle = style;
UserPrefs().setGameStatusBarStyle(style);
notifyListeners();
}
void toggleDrawer() {
_drawerOpen = !_drawerOpen;
notifyListeners();

12
lib/utils/user_prefs.dart
View File

@@ -193,10 +193,18 @@ class UserPrefs {
int get movieDisplayMode => prefs.getInt('movieDisplayMode') ?? 0;
Future<bool> setMovieDisplayMode(int value) => prefs.setInt('movieDisplayMode', value);
/// 影视状态栏样式 (0: 胶囊滑块, 1: 下划线, 2: 芯片组, 3: 下拉)
int get movieStatusBarStyle => prefs.getInt('movieStatusBarStyle') ?? 0;
Future<bool> setMovieStatusBarStyle(int value) => prefs.setInt('movieStatusBarStyle', value);
/// 阅读布局样式 (0: 封面网格, 1: 列表)
int get bookLayoutStyle => prefs.getInt('bookLayoutStyle') ?? 0;
Future<bool> setBookLayoutStyle(int value) => prefs.setInt('bookLayoutStyle', value);
/// 书籍状态栏样式 (0: 胶囊滑块, 1: 下划线, 2: 芯片组, 3: 下拉)
int get bookStatusBarStyle => prefs.getInt('bookStatusBarStyle') ?? 0;
Future<bool> setBookStatusBarStyle(int value) => prefs.setInt('bookStatusBarStyle', value);
/// 影视墙模式（不显示分类，按创建时间排序）
bool get movieWallMode => prefs.getBool('movieWallMode') ?? false;
Future<bool> setMovieWallMode(bool value) => prefs.setBool('movieWallMode', value);
@@ -213,6 +221,10 @@ class UserPrefs {
int get gameLayoutStyle => prefs.getInt('gameLayoutStyle') ?? 0;
Future<bool> setGameLayoutStyle(int value) => prefs.setInt('gameLayoutStyle', value);
/// 游戏状态栏样式 (0: 胶囊滑块, 1: 下划线, 2: 芯片组, 3: 下拉)
int get gameStatusBarStyle => prefs.getInt('gameStatusBarStyle') ?? 0;
Future<bool> setGameStatusBarStyle(int value) => prefs.setInt('gameStatusBarStyle', value);
/// 游戏墙模式
bool get gameWallMode => prefs.getBool('gameWallMode') ?? false;
Future<bool> setGameWallMode(bool value) => prefs.setBool('gameWallMode', value);

103
lib/widgets/book_status_bar.dart
View File

@@ -1,103 +1,30 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
import 'status_bar_shell.dart';
/// 阅读状态选择栏 - 平滑过渡动画
/// 阅读状态选择栏
class BookStatusBar extends StatelessWidget {
const BookStatusBar({super.key});
static const _tabs = [
StatusBarTab(label: '已读', icon: Icons.check_circle_outline),
StatusBarTab(label: '在读', icon: Icons.menu_book_outlined),
StatusBarTab(label: '想读', icon: Icons.bookmark_outlined),
StatusBarTab(label: '弃读', icon: Icons.cancel_outlined),
];
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Consumer<AppProvider>(
builder: (context, provider, child) {
final currentIndex = provider.bookStatusIndex;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: colors.surface,
),
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 4;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
],
),
),
),
),
Row(
children: [
_buildTab(colors, '已读', Icons.check_circle_outline, currentIndex == 0,
() => provider.setBookStatusIndex(0)),
_buildTab(colors, '在读', Icons.menu_book_outlined, currentIndex == 1,
() => provider.setBookStatusIndex(1)),
_buildTab(colors, '想读', Icons.bookmark_outlined, currentIndex == 2,
() => provider.setBookStatusIndex(2)),
_buildTab(colors, '弃读', Icons.cancel_outlined, currentIndex == 3,
() => provider.setBookStatusIndex(3)),
],
),
],
),
);
},
),
),
builder: (context, provider, _) {
return StatusBarShell(
tabs: _tabs,
currentIndex: provider.bookStatusIndex,
onChanged: provider.setBookStatusIndex,
style: provider.bookStatusBarStyle,
);
},
);
}
Widget _buildTab(ColorScheme colors, String label, IconData icon, bool isSelected, VoidCallback onTap) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedOpacity(
opacity: isSelected ? 1.0 : 0.5,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
child: SizedBox.expand(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
const SizedBox(width: 6),
Text(label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface,
)),
],
),
),
),
),
);
}
}

2
lib/widgets/custom_drawer.dart
View File

@@ -172,8 +172,8 @@ class _CustomDrawerState extends State<CustomDrawer> {
final statItems = <(IconData, int, String, Color)>[];
if (userPrefs.showMovieTab) statItems.add((Icons.movie_outlined, movieCount, '观影', const Color(0xFF2563EB)));
if (userPrefs.showBookTab) statItems.add((Icons.menu_book_outlined, bookCount, '阅读', const Color(0xFF16A34A)));
if (userPrefs.showNoteTab) statItems.add((Icons.sticky_note_2_outlined, noteCount, '笔记', const Color(0xFF9333EA)));
if (userPrefs.showGameTab) statItems.add((Icons.sports_esports_outlined, gameCount, '游戏', const Color(0xFFEA580C)));
if (userPrefs.showNoteTab) statItems.add((Icons.sticky_note_2_outlined, noteCount, '笔记', const Color(0xFF9333EA)));
return Container(
margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),

103
lib/widgets/game_status_bar.dart
View File

@@ -1,103 +1,30 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
import 'status_bar_shell.dart';
/// 游戏状态选择栏 - 平滑过渡动画
/// 游戏状态选择栏
class GameStatusBar extends StatelessWidget {
const GameStatusBar({super.key});
static const _tabs = [
StatusBarTab(label: '已通关', icon: Icons.emoji_events_outlined),
StatusBarTab(label: '在玩', icon: Icons.sports_esports_outlined),
StatusBarTab(label: '想玩', icon: Icons.bookmark_outlined),
StatusBarTab(label: '弃游', icon: Icons.cancel_outlined),
];
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Consumer<AppProvider>(
builder: (context, provider, child) {
final currentIndex = provider.gameStatusIndex;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: colors.surface,
),
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 4;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
],
),
),
),
),
Row(
children: [
_buildTab(colors, '已通关', Icons.emoji_events_outlined, currentIndex == 0,
() => provider.setGameStatusIndex(0)),
_buildTab(colors, '在玩', Icons.sports_esports_outlined, currentIndex == 1,
() => provider.setGameStatusIndex(1)),
_buildTab(colors, '想玩', Icons.bookmark_outlined, currentIndex == 2,
() => provider.setGameStatusIndex(2)),
_buildTab(colors, '弃游', Icons.cancel_outlined, currentIndex == 3,
() => provider.setGameStatusIndex(3)),
],
),
],
),
);
},
),
),
builder: (context, provider, _) {
return StatusBarShell(
tabs: _tabs,
currentIndex: provider.gameStatusIndex,
onChanged: provider.setGameStatusIndex,
style: provider.gameStatusBarStyle,
);
},
);
}
Widget _buildTab(ColorScheme colors, String label, IconData icon, bool isSelected, VoidCallback onTap) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedOpacity(
opacity: isSelected ? 1.0 : 0.5,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
child: SizedBox.expand(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
const SizedBox(width: 6),
Text(label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface,
)),
],
),
),
),
),
);
}
}

100
lib/widgets/movie_status_bar.dart
View File

@@ -1,101 +1,29 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
import 'status_bar_shell.dart';
/// 观影状态选择栏 - 平滑过渡动画
/// 观影状态选择栏
class MovieStatusBar extends StatelessWidget {
const MovieStatusBar({super.key});
static const _tabs = [
StatusBarTab(label: '已看', icon: Icons.check_circle_outline),
StatusBarTab(label: '在看', icon: Icons.play_circle_outline),
StatusBarTab(label: '想看', icon: Icons.bookmark_outline),
];
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Consumer<AppProvider>(
builder: (context, provider, child) {
final currentIndex = provider.movieStatusIndex;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: colors.surface,
),
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 3;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
],
),
),
),
),
Row(
children: [
_buildTab(colors, '已看', Icons.check_circle_outline, currentIndex == 0,
() => provider.setMovieStatusIndex(0)),
_buildTab(colors, '在看', Icons.play_circle_outline, currentIndex == 1,
() => provider.setMovieStatusIndex(1)),
_buildTab(colors, '想看', Icons.bookmark_outline, currentIndex == 2,
() => provider.setMovieStatusIndex(2)),
],
),
],
),
);
},
),
),
builder: (context, provider, _) {
return StatusBarShell(
tabs: _tabs,
currentIndex: provider.movieStatusIndex,
onChanged: provider.setMovieStatusIndex,
style: provider.movieStatusBarStyle,
);
},
);
}
Widget _buildTab(ColorScheme colors, String label, IconData icon, bool isSelected, VoidCallback onTap) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedOpacity(
opacity: isSelected ? 1.0 : 0.5,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
child: SizedBox.expand(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
const SizedBox(width: 6),
Text(label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface,
)),
],
),
),
),
),
);
}
}

325
lib/widgets/status_bar_shell.dart Normal file
View File

@@ -0,0 +1,325 @@
import 'package:flutter/material.dart';
/// 通用状态选择栏，支持 4 种样式
/// 0: 胶囊滑块（默认）
/// 1: 下划线
/// 2: 芯片组
/// 3: 下拉
class StatusBarShell extends StatelessWidget {
const StatusBarShell({
super.key,
required this.tabs,
required this.currentIndex,
required this.onChanged,
this.style = 0,
});
final List<StatusBarTab> tabs;
final int currentIndex;
final ValueChanged<int> onChanged;
final int style;
@override
Widget build(BuildContext context) {
switch (style) {
case 1:
return _UnderlineBar(tabs: tabs, currentIndex: currentIndex, onChanged: onChanged);
case 2:
return _ChipBar(tabs: tabs, currentIndex: currentIndex, onChanged: onChanged);
case 3:
return _DropdownBar(tabs: tabs, currentIndex: currentIndex, onChanged: onChanged);
default:
return _PillBar(tabs: tabs, currentIndex: currentIndex, onChanged: onChanged);
}
}
}
class StatusBarTab {
const StatusBarTab({required this.label, required this.icon});
final String label;
final IconData icon;
}
// ---------- 0: 胶囊滑块 ----------
class _PillBar extends StatelessWidget {
const _PillBar({required this.tabs, required this.currentIndex, required this.onChanged});
final List<StatusBarTab> tabs;
final int currentIndex;
final ValueChanged<int> onChanged;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
color: colors.surface,
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / tabs.length;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
],
),
),
),
),
Row(
children: [
for (int i = 0; i < tabs.length; i++)
_PillItem(
colors: colors,
tab: tabs[i],
isSelected: currentIndex == i,
onTap: () => onChanged(i),
),
],
),
],
),
);
},
),
),
);
}
}
class _PillItem extends StatelessWidget {
const _PillItem({required this.colors, required this.tab, required this.isSelected, required this.onTap});
final ColorScheme colors;
final StatusBarTab tab;
final bool isSelected;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedOpacity(
opacity: isSelected ? 1.0 : 0.5,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
child: SizedBox.expand(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(tab.icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
const SizedBox(width: 6),
Text(tab.label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface,
)),
],
),
),
),
),
);
}
}
// ---------- 1: 下划线 ----------
class _UnderlineBar extends StatelessWidget {
const _UnderlineBar({required this.tabs, required this.currentIndex, required this.onChanged});
final List<StatusBarTab> tabs;
final int currentIndex;
final ValueChanged<int> onChanged;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8),
color: colors.surface,
child: Row(
children: [
for (int i = 0; i < tabs.length; i++)
Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => onChanged(i),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(tabs[i].icon, size: 16,
color: currentIndex == i ? colors.primary : colors.onSurfaceVariant),
const SizedBox(width: 6),
Text(tabs[i].label,
style: TextStyle(
fontSize: 13,
fontWeight: currentIndex == i ? FontWeight.w600 : FontWeight.w500,
color: currentIndex == i ? colors.primary : colors.onSurfaceVariant,
)),
],
),
),
Container(
height: 2,
margin: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: currentIndex == i ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(1),
),
),
],
),
),
),
],
),
);
}
}
// ---------- 2: 芯片组 ----------
class _ChipBar extends StatelessWidget {
const _ChipBar({required this.tabs, required this.currentIndex, required this.onChanged});
final List<StatusBarTab> tabs;
final int currentIndex;
final ValueChanged<int> onChanged;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
color: colors.surface,
child: Row(
children: [
for (int i = 0; i < tabs.length; i++) ...[
if (i != 0) const SizedBox(width: 8),
Expanded(
child: GestureDetector(
onTap: () => onChanged(i),
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
height: 36,
alignment: Alignment.center,
decoration: BoxDecoration(
color: currentIndex == i ? colors.primary : Colors.transparent,
border: Border.all(
color: currentIndex == i ? colors.primary : colors.outlineVariant,
),
borderRadius: BorderRadius.circular(18),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(tabs[i].icon, size: 15,
color: currentIndex == i ? colors.onPrimary : colors.onSurfaceVariant),
const SizedBox(width: 5),
Text(tabs[i].label,
style: TextStyle(
fontSize: 12,
fontWeight: currentIndex == i ? FontWeight.w600 : FontWeight.w500,
color: currentIndex == i ? colors.onPrimary : colors.onSurfaceVariant,
)),
],
),
),
),
),
],
],
),
);
}
}
// ---------- 3: 下拉 ----------
class _DropdownBar extends StatelessWidget {
const _DropdownBar({required this.tabs, required this.currentIndex, required this.onChanged});
final List<StatusBarTab> tabs;
final int currentIndex;
final ValueChanged<int> onChanged;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
final current = tabs[currentIndex];
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
color: colors.surface,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
PopupMenuButton<int>(
onSelected: onChanged,
itemBuilder: (context) => [
for (int i = 0; i < tabs.length; i++)
PopupMenuItem<int>(
value: i,
child: Row(
children: [
Icon(tabs[i].icon, size: 18,
color: i == currentIndex ? colors.primary : colors.onSurfaceVariant),
const SizedBox(width: 8),
Text(tabs[i].label,
style: TextStyle(
fontWeight: i == currentIndex ? FontWeight.w600 : FontWeight.w500,
color: i == currentIndex ? colors.primary : colors.onSurfaceVariant,
)),
],
),
),
],
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(18),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(current.icon, size: 16, color: colors.primary),
const SizedBox(width: 6),
Text(current.label,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: colors.primary,
)),
const SizedBox(width: 4),
Icon(Icons.keyboard_arrow_down, size: 18, color: colors.onSurfaceVariant),
],
),
),
),
],
),
);
}
}

32
lib/widgets/top_fade_scrim.dart Normal file
View File

@@ -0,0 +1,32 @@
import 'package:flutter/material.dart';
/// 列表顶部渐变遮罩带：从 surface 色渐变到透明，
/// 让滚动内容从状态栏下方淡入淡出。
class TopFadeScrim extends StatelessWidget {
const TopFadeScrim({super.key, this.height = 12});
final double height;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return IgnorePointer(
child: Align(
alignment: Alignment.topCenter,
child: Container(
height: height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
colors.surface,
colors.surface.withValues(alpha: 0),
],
),
),
),
),
);
}
}