fix: 优化追剧页切换与编辑按钮

This commit is contained in:
Zhou Weidong committed 2026-10-22 21:25:55 +08:00
1 parent f67b8bd514
commit 3f3dc9263c
5 files changed
+121 -41

No files matched your search

+6
View File
@@ -1243,3 +1243,9 @@ $ flutter test
- 追剧加号卡片移到全部追剧卡片之后,空列表时仍在左上角。 - 追剧加号卡片移到全部追剧卡片之后,空列表时仍在左上角。
- 加号改为 `#8E8E93`、28 尺寸、1.5 描边,卡片底色与圆角不变。 - 加号改为 `#8E8E93`、28 尺寸、1.5 描边,卡片底色与圆角不变。
- 刷新、分页与各页独立滚动位置保持;`flutter analyze`:No issues found。 - 刷新、分页与各页独立滚动位置保持;`flutter analyze`:No issues found。
## 2026-10-22 追剧页切换与编辑按钮修正
- 追剧与历史页增加 keep-alive,tab 与编辑态改用局部 ValueNotifier 更新,切换不再重建整个页面。
- 编辑图标调整为 20、`#B0B0B0`,热区 40×40,保持右侧 14 边距和垂直居中。
- 列表刷新期间保留已有数据与各页滚动位置;`flutter analyze`:No issues found。
+2 -1
View File
@@ -150,7 +150,8 @@ abstract final class AppDimens {
static const double followingHeaderHeight = 52; static const double followingHeaderHeight = 52;
static const double followingTabFont = 18; static const double followingTabFont = 18;
static const double followingTabGap = 24; static const double followingTabGap = 24;
static const double followingEditIconSize = 24; static const double followingEditIconSize = 20;
static const double followingEditHitSize = 40;
static const double followingAddIconSize = 28; static const double followingAddIconSize = 28;
static const double followingAddIconStroke = 1.5; static const double followingAddIconStroke = 1.5;
static const double followingGridGap = 6; static const double followingGridGap = 6;
@@ -0,0 +1,24 @@
// Author: fruit.com.cn
import 'package:flutter/widgets.dart';
class FollowingKeepAliveTab extends StatefulWidget {
const FollowingKeepAliveTab({super.key, required this.child});
final Widget child;
@override
State<FollowingKeepAliveTab> createState() => _FollowingKeepAliveTabState();
}
class _FollowingKeepAliveTabState extends State<FollowingKeepAliveTab>
with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return widget.child;
}
}
+86 -40
View File
@@ -2,6 +2,7 @@
import 'dart:async'; import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@@ -20,6 +21,7 @@ import '../../l10n/app_localizations.dart';
import '../player/open_player.dart'; import '../player/open_player.dart';
import 'following_grid_card.dart'; import 'following_grid_card.dart';
import 'following_history_card.dart'; import 'following_history_card.dart';
import 'following_keep_alive_tab.dart';
import 'following_paged_grid.dart'; import 'following_paged_grid.dart';
enum FollowingTab { favorites, history } enum FollowingTab { favorites, history }
@@ -42,9 +44,11 @@ class _FollowingPageState extends State<FollowingPage> {
final PageController _pageController = PageController(); final PageController _pageController = PageController();
final ScrollController _favoriteScroll = ScrollController(); final ScrollController _favoriteScroll = ScrollController();
final ScrollController _historyScroll = ScrollController(); final ScrollController _historyScroll = ScrollController();
final ValueNotifier<FollowingTab> _tab = ValueNotifier<FollowingTab>(
FollowingTab.favorites,
);
final ValueNotifier<bool> _editing = ValueNotifier(false);
late final WatchRecordsController _history; late final WatchRecordsController _history;
FollowingTab _tab = FollowingTab.favorites;
bool _editing = false;
@override @override
void initState() { void initState() {
@@ -64,6 +68,8 @@ class _FollowingPageState extends State<FollowingPage> {
_pageController.dispose(); _pageController.dispose();
_favoriteScroll.dispose(); _favoriteScroll.dispose();
_historyScroll.dispose(); _historyScroll.dispose();
_tab.dispose();
_editing.dispose();
_history.dispose(); _history.dispose();
super.dispose(); super.dispose();
} }
@@ -88,19 +94,23 @@ class _FollowingPageState extends State<FollowingPage> {
controller: _pageController, controller: _pageController,
onPageChanged: _onPageChanged, onPageChanged: _onPageChanged,
children: [ children: [
_FavoritesGrid( FollowingKeepAliveTab(
child: _FavoritesGrid(
controller: widget.favoriteController, controller: widget.favoriteController,
editing: _editing, editing: _editing,
scrollController: _favoriteScroll, scrollController: _favoriteScroll,
onGoHome: widget.onGoHome, onGoHome: widget.onGoHome,
onListEmptied: _exitEditingIfEmpty, onListEmptied: _exitEditingIfEmpty,
), ),
_HistoryList( ),
FollowingKeepAliveTab(
child: _HistoryList(
controller: _history, controller: _history,
editing: _editing, editing: _editing,
scrollController: _historyScroll, scrollController: _historyScroll,
onListEmptied: _exitEditingIfEmpty, onListEmptied: _exitEditingIfEmpty,
), ),
),
], ],
), ),
), ),
@@ -118,16 +128,32 @@ class _FollowingPageState extends State<FollowingPage> {
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: AppDimens.feedPageHorizontal, horizontal: AppDimens.feedPageHorizontal,
), ),
child: Row( child: ValueListenableBuilder<FollowingTab>(
valueListenable: _tab,
builder: (context, selectedTab, _) {
return ValueListenableBuilder<bool>(
valueListenable: _editing,
builder: (context, editing, _) {
return Row(
children: [ children: [
_tabButton(FollowingTab.favorites, l10n.followingTab, 'favorites'), _tabButton(
FollowingTab.favorites,
l10n.followingTab,
'favorites',
selectedTab == FollowingTab.favorites,
),
const SizedBox(width: AppDimens.followingTabGap), const SizedBox(width: AppDimens.followingTabGap),
_tabButton(FollowingTab.history, l10n.watchHistory, 'history'), _tabButton(
FollowingTab.history,
l10n.watchHistory,
'history',
selectedTab == FollowingTab.history,
),
const Spacer(), const Spacer(),
if (_editing) if (editing)
SizedBox( SizedBox(
width: 44, width: AppDimens.followingEditHitSize,
height: 44, height: AppDimens.followingEditHitSize,
child: InkWell( child: InkWell(
key: const Key('following-edit'), key: const Key('following-edit'),
onTap: _toggleEditing, onTap: _toggleEditing,
@@ -149,32 +175,38 @@ class _FollowingPageState extends State<FollowingPage> {
button: true, button: true,
label: l10n.edit, label: l10n.edit,
child: SizedBox( child: SizedBox(
width: 44, width: AppDimens.followingEditHitSize,
height: 44, height: AppDimens.followingEditHitSize,
child: InkWell( child: InkWell(
key: const Key('following-edit'), key: const Key('following-edit'),
onTap: _toggleEditing, onTap: _toggleEditing,
child: const Align( child: const Align(
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
child: SizedBox.square(
dimension: AppDimens.followingEditIconSize,
child: Icon( child: Icon(
Icons.edit_outlined, Icons.edit_outlined,
color: AppColors.textPrimary, size: AppDimens.followingEditIconSize,
), color: AppColors.textTabInactive,
), ),
), ),
), ),
), ),
), ),
], ],
);
},
);
},
), ),
), ),
); );
} }
Widget _tabButton(FollowingTab tab, String label, String keyName) { Widget _tabButton(
final selected = _tab == tab; FollowingTab tab,
String label,
String keyName,
bool selected,
) {
return InkWell( return InkWell(
key: Key('following-tab-$keyName'), key: Key('following-tab-$keyName'),
onTap: () => _selectTab(tab), onTap: () => _selectTab(tab),
@@ -198,35 +230,30 @@ class _FollowingPageState extends State<FollowingPage> {
} }
void _selectTab(FollowingTab tab) { void _selectTab(FollowingTab tab) {
if (_tab != tab || _editing) { _editing.value = false;
setState(() { _tab.value = tab;
_tab = tab; if (_pageController.hasClients) {
_editing = false; unawaited(
});
}
_pageController.animateToPage( _pageController.animateToPage(
tab.index, tab.index,
duration: AppDimens.followingPageAnimationDuration, duration: AppDimens.followingPageAnimationDuration,
curve: Curves.easeOutCubic, curve: Curves.easeOutCubic,
),
); );
} }
}
void _onPageChanged(int index) { void _onPageChanged(int index) {
final tab = FollowingTab.values[index]; final tab = FollowingTab.values[index];
if (_tab == tab && !_editing) return; _editing.value = false;
setState(() { _tab.value = tab;
_tab = tab;
_editing = false;
});
} }
void _toggleEditing() { void _toggleEditing() {
setState(() => _editing = !_editing); _editing.value = !_editing.value;
} }
void _exitEditingIfEmpty() { void _exitEditingIfEmpty() => _editing.value = false;
if (_editing && mounted) setState(() => _editing = false);
}
} }
class _FavoritesGrid extends StatelessWidget { class _FavoritesGrid extends StatelessWidget {
@@ -239,13 +266,16 @@ class _FavoritesGrid extends StatelessWidget {
}); });
final FavoriteController controller; final FavoriteController controller;
final bool editing; final ValueListenable<bool> editing;
final ScrollController scrollController; final ScrollController scrollController;
final VoidCallback onGoHome; final VoidCallback onGoHome;
final VoidCallback onListEmptied; final VoidCallback onListEmptied;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ValueListenableBuilder<bool>(
valueListenable: editing,
builder: (context, isEditing, _) {
return ListenableBuilder( return ListenableBuilder(
listenable: controller, listenable: controller,
builder: (context, _) { builder: (context, _) {
@@ -263,7 +293,11 @@ class _FavoritesGrid extends StatelessWidget {
: errorText(l10n, controller.error, l10n.favoritesError), : errorText(l10n, controller.error, l10n.favoritesError),
loadMoreError: controller.loadMoreError == null loadMoreError: controller.loadMoreError == null
? null ? null
: errorText(l10n, controller.loadMoreError, l10n.favoritesError), : errorText(
l10n,
controller.loadMoreError,
l10n.favoritesError,
),
onRefresh: controller.load, onRefresh: controller.load,
onLoadMore: controller.loadMore, onLoadMore: controller.loadMore,
itemCount: controller.cards.length + 1, itemCount: controller.cards.length + 1,
@@ -281,7 +315,7 @@ class _FavoritesGrid extends StatelessWidget {
title: drama.title, title: drama.title,
posterUrl: drama.posterUrl, posterUrl: drama.posterUrl,
viewCount: drama.viewCount, viewCount: drama.viewCount,
editing: editing, editing: isEditing,
subtitle: l10n.favoriteEpisodeProgress( subtitle: l10n.favoriteEpisodeProgress(
episode, episode,
drama.episodeCount, drama.episodeCount,
@@ -299,6 +333,8 @@ class _FavoritesGrid extends StatelessWidget {
); );
}, },
); );
},
);
} }
} }
@@ -311,12 +347,15 @@ class _HistoryList extends StatelessWidget {
}); });
final WatchRecordsController controller; final WatchRecordsController controller;
final bool editing; final ValueListenable<bool> editing;
final ScrollController scrollController; final ScrollController scrollController;
final VoidCallback onListEmptied; final VoidCallback onListEmptied;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ValueListenableBuilder<bool>(
valueListenable: editing,
builder: (context, isEditing, _) {
return ListenableBuilder( return ListenableBuilder(
listenable: controller, listenable: controller,
builder: (context, _) { builder: (context, _) {
@@ -334,7 +373,11 @@ class _HistoryList extends StatelessWidget {
: errorText(l10n, controller.error, l10n.progressError), : errorText(l10n, controller.error, l10n.progressError),
loadMoreError: controller.loadMoreError == null loadMoreError: controller.loadMoreError == null
? null ? null
: errorText(l10n, controller.loadMoreError, l10n.progressError), : errorText(
l10n,
controller.loadMoreError,
l10n.progressError,
),
onRefresh: controller.load, onRefresh: controller.load,
onLoadMore: controller.loadMore, onLoadMore: controller.loadMore,
itemCount: controller.records.length, itemCount: controller.records.length,
@@ -360,12 +403,13 @@ class _HistoryList extends StatelessWidget {
dramaId: record.dramaId, dramaId: record.dramaId,
title: _historyTitle(l10n, record), title: _historyTitle(l10n, record),
posterUrl: record.displayCover, posterUrl: record.displayCover,
viewCount: record.drama?.viewCount ?? record.progress.playCount, viewCount:
record.drama?.viewCount ?? record.progress.playCount,
progress: hasProgress ? progress : null, progress: hasProgress ? progress : null,
progressLabel: hasProgress progressLabel: hasProgress
? l10n.watchedPercent(watchedPercent) ? l10n.watchedPercent(watchedPercent)
: null, : null,
editing: editing, editing: isEditing,
subtitle: _historySubtitle(l10n, record), subtitle: _historySubtitle(l10n, record),
onTap: openRecord, onTap: openRecord,
onContinue: openRecord, onContinue: openRecord,
@@ -381,6 +425,8 @@ class _HistoryList extends StatelessWidget {
); );
}, },
); );
},
);
} }
} }
+3
View File
@@ -53,6 +53,9 @@ void main() {
expect(tab.style.fontSize, AppDimens.followingTabFont); expect(tab.style.fontSize, AppDimens.followingTabFont);
expect(tab.style.fontWeight, FontWeight.w600); expect(tab.style.fontWeight, FontWeight.w600);
expect(tab.style.color, AppColors.textPrimary); expect(tab.style.color, AppColors.textPrimary);
final editIcon = tester.widget<Icon>(find.byIcon(Icons.edit_outlined));
expect(editIcon.size, AppDimens.followingEditIconSize);
expect(editIcon.color, AppColors.textTabInactive);
final grid = tester.widget<SliverGrid>( final grid = tester.widget<SliverGrid>(
find.descendant( find.descendant(
of: find.byKey(const Key('following-favorites-grid')), of: find.byKey(const Key('following-favorites-grid')),