jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): 顶部导航随翻页联动并把推荐更名为精选

Browse Source
This commit is contained in:
Vicky authored and trae-solo-agent committed 2026-10-30 22:53:15 +08:00
1 parent 2f4593a46e
commit 335e5dc286
27 files changed
+1095 -214
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/home/widgets/home_grid_header.dart
+8 -12
View File
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
import '../../../core/formatting/count_format.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/animated_nav_label.dart';
import '../../../l10n/app_localizations.dart';
enum HomePrimaryTab {
@@ -323,21 +324,16 @@ class _CategoryBarState extends State<_CategoryBar> {
height: AppDimens.homePrimaryRowHeight,
child: Align(
alignment: Alignment.bottomLeft,
child: AnimatedDefaultTextStyle(
child: AnimatedNavLabel(
key: Key('home-primary-label-${category.categoryId}'),
duration: AppDimens.homePrimaryTabAnimationDuration,
curve: Curves.easeOut,
style: TextStyle(
color: selected
? AppColors.navSelected
: AppColors.textTabInactive,
fontSize: selected
? AppDimens.homePrimaryTabSelectedFont
: AppDimens.homePrimaryTabFont,
fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
label: category.label,
selected: selected,
alignment: Alignment.bottomLeft,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.homePrimaryTabSelectedFont,
letterSpacing: 0,
),
child: Text(category.label, textAlign: TextAlign.left),
),
),
),
lib/pages/recommend/home_tab_motion_controller.dart
+52
View File
@@ -0,0 +1,52 @@
// Author: fruit.com.cn
// 职责：协调首页三页的点击动画、最终选中目标和手势中断。
import 'package:flutter/widgets.dart';
const _transitionDuration = Duration(milliseconds: 220);
/// 页面移动时保留用户最终目标，防止跨页动画途中的页面抢占高亮。
class HomeTabMotionController extends PageController {
/// [onSettled] 在动画结束或被手势中断时同步实际停留页面。
HomeTabMotionController({required this.onSettled});
final ValueChanged<int> onSettled;
int? _target;
int _revision = 0;
bool _disposed = false;
/// 供导航绘制连续位置；布局尚未建立时使用初始页。
double get pagePosition => hasClients && position.hasContentDimensions
? page ?? initialPage.toDouble()
: initialPage.toDouble();
/// 点击跨页过程中只接受最终目标；拖动和稳定状态接受实际页。
bool acceptsSelection(int index) => _target == null || _target == index;
/// 点击导航时平滑移动；系统减少动画时直接到位。
Future<void> selectPage(int index, {required bool reduceMotion}) async {
final revision = ++_revision;
_target = index;
if (!hasClients) {
_target = null;
return;
}
if (reduceMotion) {
jumpToPage(index);
} else {
await animateToPage(
index,
duration: _transitionDuration,
curve: Curves.easeOut,
);
}
if (_disposed || revision != _revision) return;
_target = null;
if (hasClients) onSettled(pagePosition.round());
}
@override
void dispose() {
_disposed = true;
super.dispose();
}
}
lib/pages/recommend/recommend_page.dart
+23 -119
View File
@@ -20,12 +20,15 @@ import '../../l10n/app_localizations.dart';
import '../home/home_feed_channel.dart';
import '../player/open_player.dart';
import '../player/player_view.dart';
import 'home_tab_motion_controller.dart';
import 'recommend_types.dart';
import 'widgets/all_dramas_filter_grid.dart';
import 'widgets/playlist_detail_page.dart';
import 'widgets/recommend_sections_view.dart';
import 'widgets/recommend_top_nav.dart';
part 'recommend_page_parts.dart';
class RecommendPage extends StatefulWidget {
const RecommendPage({
super.key,
@@ -60,7 +63,9 @@ class _RecommendPageState extends State<RecommendPage>
static const int _maxRecommendRetries = 3;
RecommendInnerTab _tab = RecommendInnerTab.feed;
final PageController _pageController = PageController();
late final _pageController = HomeTabMotionController(
onSettled: _onPageChanged,
);
int _scrubCancelRequest = 0;
bool _recommendDataRefreshScheduled = false;
bool _recommendRefreshInFlight = false;
@@ -274,12 +279,16 @@ class _RecommendPageState extends State<RecommendPage>
right: 0,
child: SafeArea(
bottom: false,
child: RecommendTopNav(
selected: _tab,
onVideo: _tab == RecommendInnerTab.feed,
onSelected: _selectTab,
onSearch: _handleSearch,
onGift: widget.onOpenWallet,
child: ListenableBuilder(
listenable: _pageController,
builder: (context, _) => RecommendTopNav(
selected: _tab,
pagePosition: _pageController.pagePosition,
onVideo: _tab == RecommendInnerTab.feed,
onSelected: _selectTab,
onSearch: _handleSearch,
onGift: widget.onOpenWallet,
),
),
),
),
@@ -401,18 +410,16 @@ class _RecommendPageState extends State<RecommendPage>
_tab = tab;
_scrubCancelRequest++;
});
if (_pageController.hasClients) {
unawaited(
_pageController.animateToPage(
tab.index,
duration: const Duration(milliseconds: 220),
curve: Curves.easeOut,
),
);
}
unawaited(
_pageController.selectPage(
tab.index,
reduceMotion: MediaQuery.disableAnimationsOf(context),
),
);
}
void _onPageChanged(int index) {
if (!_pageController.acceptsSelection(index)) return;
final next = RecommendInnerTab.values[index];
if (next == _tab) return;
setState(() {
@@ -484,110 +491,7 @@ class _RecommendPageState extends State<RecommendPage>
);
}
(String, String) _sectionCopy(
AppLocalizations l10n,
RecommendSectionKind section,
) {
return switch (section) {
RecommendSectionKind.hits => (
l10n.weeklyHitsTitle,
l10n.weeklyHitsSubtitle,
),
RecommendSectionKind.newReleases => (
l10n.weeklyNewTitle,
l10n.weeklyNewSubtitle,
),
RecommendSectionKind.costume => (
l10n.costumeAwardsTitle,
l10n.costumeAwardsSubtitle,
),
};
}
Future<void> _openDrama(Drama drama, {String? episodeId}) async {
await playDramaFromCatalog(context, drama, episodeId: episodeId);
}
}
class _RecommendFeedSkeleton extends StatelessWidget {
const _RecommendFeedSkeleton();
@override
Widget build(BuildContext context) {
return const ColoredBox(
key: Key('recommend-feed-skeleton'),
color: AppColors.mediaBlack,
child: Stack(
children: [
Center(
child: SizedBox(
width: 132,
height: 176,
child: DecoratedBox(
decoration: BoxDecoration(
color: AppColors.skeletonMedia,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
),
),
),
Positioned(
left: 14,
right: 72,
bottom: 42,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_SkeletonLine(width: 190, height: 18),
SizedBox(height: 10),
_SkeletonLine(width: 140, height: 12),
SizedBox(height: 8),
_SkeletonLine(width: 220, height: 10),
],
),
),
],
),
);
}
}
class _SkeletonLine extends StatelessWidget {
const _SkeletonLine({required this.width, required this.height});
final double width;
final double height;
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
decoration: BoxDecoration(
color: AppColors.skeletonMedia,
borderRadius: BorderRadius.circular(6),
),
);
}
}
class _KeepAliveTab extends StatefulWidget {
const _KeepAliveTab({super.key, required this.child});
final Widget child;
@override
State<_KeepAliveTab> createState() => _KeepAliveTabState();
}
class _KeepAliveTabState extends State<_KeepAliveTab>
with AutomaticKeepAliveClientMixin<_KeepAliveTab> {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return widget.child;
}
}
lib/pages/recommend/recommend_page_parts.dart
+116
View File
@@ -0,0 +1,116 @@
// Author: fruit.com.cn
// 职责：首页推荐流加载骨架、页面保活与静态文案，保持原有行为。
part of 'recommend_page.dart';
const double _posterWidth = 132;
const double _posterHeight = 176;
const double _posterRadius = 12;
const double _copyLeft = 14;
const double _copyRight = 72;
const double _copyBottom = 42;
const double _titleWidth = 190;
const double _titleHeight = 18;
const double _subtitleWidth = 140;
const double _subtitleHeight = 12;
const double _descriptionWidth = 220;
const double _descriptionHeight = 10;
const double _titleGap = 10;
const double _subtitleGap = 8;
const double _lineRadius = 6;
class _RecommendFeedSkeleton extends StatelessWidget {
const _RecommendFeedSkeleton();
@override
Widget build(BuildContext context) => const ColoredBox(
key: Key('recommend-feed-skeleton'),
color: AppColors.mediaBlack,
child: Stack(
children: [
Center(
child: SizedBox(
width: _posterWidth,
height: _posterHeight,
child: DecoratedBox(
decoration: BoxDecoration(
color: AppColors.skeletonMedia,
borderRadius: BorderRadius.all(Radius.circular(_posterRadius)),
),
),
),
),
Positioned(
left: _copyLeft,
right: _copyRight,
bottom: _copyBottom,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_SkeletonLine(width: _titleWidth, height: _titleHeight),
SizedBox(height: _titleGap),
_SkeletonLine(width: _subtitleWidth, height: _subtitleHeight),
SizedBox(height: _subtitleGap),
_SkeletonLine(
width: _descriptionWidth,
height: _descriptionHeight,
),
],
),
),
],
),
);
}
class _SkeletonLine extends StatelessWidget {
const _SkeletonLine({required this.width, required this.height});
final double width;
final double height;
@override
Widget build(BuildContext context) => Container(
width: width,
height: height,
decoration: BoxDecoration(
color: AppColors.skeletonMedia,
borderRadius: BorderRadius.circular(_lineRadius),
),
);
}
class _KeepAliveTab extends StatefulWidget {
const _KeepAliveTab({super.key, required this.child});
final Widget child;
@override
State<_KeepAliveTab> createState() => _KeepAliveTabState();
}
class _KeepAliveTabState extends State<_KeepAliveTab>
with AutomaticKeepAliveClientMixin<_KeepAliveTab> {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return widget.child;
}
}
(String, String) _sectionCopy(
AppLocalizations l10n,
RecommendSectionKind section,
) => switch (section) {
RecommendSectionKind.hits => (l10n.weeklyHitsTitle, l10n.weeklyHitsSubtitle),
RecommendSectionKind.newReleases => (
l10n.weeklyNewTitle,
l10n.weeklyNewSubtitle,
),
RecommendSectionKind.costume => (
l10n.costumeAwardsTitle,
l10n.costumeAwardsSubtitle,
),
};
lib/pages/recommend/widgets/home_recommend_content.dart
+1 -1
View File
@@ -122,7 +122,7 @@ class HomePosterCard extends StatelessWidget {
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: 11,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w400,
height: 1.1,
),
),
lib/pages/recommend/widgets/recommend_channel_nav.dart
+17 -15
View File
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import '../../../core/data/models/content_category.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/widgets/animated_nav_label.dart';
import '../../../l10n/app_localizations.dart';
import 'search_gift_glyphs.dart';
@@ -16,7 +17,7 @@ const double _giftIconSize = 26;
const double _underlineWidth = 26;
const double _underlineHeight = 3;
/// 推荐页（礼花 tab）顶部频道导航：频道全部来自分类接口，右侧搜索/礼物。
/// 推荐页顶部频道导航：频道全部来自分类接口，右侧搜索/礼物。
class RecommendChannelNav extends StatefulWidget {
const RecommendChannelNav({
super.key,
@@ -49,8 +50,7 @@ class _RecommendChannelNavState extends State<RecommendChannelNav> {
final GlobalKey _scrollViewKey = GlobalKey();
final Map<String, GlobalKey> _tabKeys = {};
GlobalKey _keyFor(String id) =>
_tabKeys.putIfAbsent(id, () => GlobalKey());
GlobalKey _keyFor(String id) => _tabKeys.putIfAbsent(id, () => GlobalKey());
@override
void didUpdateWidget(covariant RecommendChannelNav oldWidget) {
@@ -82,9 +82,10 @@ class _RecommendChannelNavState extends State<RecommendChannelNav> {
final tabLeft = tabBox.localToGlobal(Offset.zero).dx;
final relative = tabLeft - viewportLeft;
final position = _scrollController.position;
final target =
(position.pixels + relative - _revealLeftInset)
.clamp(0.0, position.maxScrollExtent);
final target = (position.pixels + relative - _revealLeftInset).clamp(
0.0,
position.maxScrollExtent,
);
if ((target - position.pixels).abs() < 0.5) return;
_scrollController.animateTo(
target,
@@ -147,7 +148,10 @@ class _RecommendChannelNavState extends State<RecommendChannelNav> {
),
iconSize: _searchIconSize,
color: AppColors.textPrimary,
icon: SearchGlyph(size: _searchIconSize, color: AppColors.textPrimary),
icon: SearchGlyph(
size: _searchIconSize,
color: AppColors.textPrimary,
),
),
),
if (widget.onGift != null)
@@ -188,18 +192,16 @@ class _RecommendChannelNavState extends State<RecommendChannelNav> {
children: [
// 补偿文字下方的 4pt 间距 + 3pt 下划线，让文字视觉中心与右侧图标对齐。
const SizedBox(height: 4 + _underlineHeight),
Text(
label,
maxLines: 1,
style: TextStyle(
AnimatedNavLabel(
label: label,
selected: selected,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: _tabFont,
fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
fontWeight: FontWeight.w400,
letterSpacing: 0,
height: 1.0,
shadows: const [
Shadow(color: AppColors.mediaBlack, blurRadius: 6),
],
shadows: [Shadow(color: AppColors.mediaBlack, blurRadius: 6)],
),
),
const SizedBox(height: 4),
lib/pages/recommend/widgets/recommend_top_nav.dart
+61 -31
View File
@@ -4,13 +4,14 @@ import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/animated_nav_label.dart';
import '../../../l10n/app_localizations.dart';
import '../recommend_types.dart';
import 'search_gift_glyphs.dart';
const double _navHeight = 56;
const double _tabGap = 20;
const double _tabFont = 17;
const double _tabFont = 18;
const double _maxNavigationTextScale = 1.3;
const double _searchIconSize = 26;
const double _giftIconSize = 26;
@@ -25,6 +26,7 @@ class RecommendTopNav extends StatelessWidget {
required this.onSearch,
this.onVideo = false,
this.onGift,
this.pagePosition,
});
static const double height = _navHeight;
@@ -34,6 +36,9 @@ class RecommendTopNav extends StatelessWidget {
final VoidCallback onSearch;
final bool onVideo;
/// 首页横向页面的连续位置，用于文字和下划线跟手过渡。
final double? pagePosition;
/// 右上角金色礼物盒（钱包入口）；为空时不显示。
final VoidCallback? onGift;
@@ -65,14 +70,7 @@ class RecommendTopNav extends StatelessWidget {
children: [
for (var index = 0; index < items.length; index++) ...[
if (index > 0) const SizedBox(width: _tabGap),
_tab(
key: Key('recommend-tab-${items[index].$3}'),
code: items[index].$3,
label: items[index].$2,
selected: selected == items[index].$1,
shadows: shadows,
onTap: () => onSelected(items[index].$1),
),
_tab(items[index], shadows, context),
],
],
),
@@ -120,47 +118,79 @@ class RecommendTopNav extends StatelessWidget {
);
}
Widget _tab({
required Key key,
required String code,
required String label,
required bool selected,
required List<Shadow>? shadows,
required VoidCallback onTap,
}) {
Widget _tab(
(RecommendInnerTab, String, String) item,
List<Shadow>? shadows,
BuildContext context,
) {
final (tab, label, code) = item;
final isSelected = selected == tab;
final position = pagePosition;
final progress = position == null
? null
: (1 - (position - tab.index).abs()).clamp(0.0, 1.0);
return GestureDetector(
key: key,
key: Key('recommend-tab-$code'),
behavior: HitTestBehavior.opaque,
onTap: onTap,
onTap: () => onSelected(tab),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 补偿文字下方的 4pt 间距 + 3pt 下划线，让文字视觉中心与右侧图标对齐。
const SizedBox(height: 4 + _underlineHeight),
Text(
label,
maxLines: 1,
AnimatedNavLabel(
label: label,
selected: isSelected,
selectionProgress: progress,
inactiveColor: AppColors.homeTabInactive,
style: TextStyle(
color: AppColors.textPrimary,
fontSize: _tabFont,
fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
fontWeight: FontWeight.w400,
letterSpacing: 0,
height: 1.0,
shadows: shadows,
),
),
const SizedBox(height: 4),
Container(
key: Key('recommend-tab-$code-underline'),
width: _underlineWidth,
height: _underlineHeight,
decoration: BoxDecoration(
color: selected ? AppColors.brandRed : AppColors.transparent,
borderRadius: BorderRadius.circular(_underlineHeight / 2),
),
_underline(
code,
progress,
isSelected,
MediaQuery.disableAnimationsOf(context),
),
],
),
);
}
Widget _underline(
String code,
double? progress,
bool isSelected,
bool reduceMotion,
) {
if (progress != null) return _line(code, progress);
final target = isSelected ? 1.0 : 0.0;
return TweenAnimationBuilder<double>(
tween: Tween(begin: target, end: target),
duration: reduceMotion
? Duration.zero
: AppDimens.homePrimaryTabAnimationDuration,
curve: Curves.easeOut,
builder: (_, value, _) => _line(code, value),
);
}
Widget _line(String code, double progress) => Container(
key: Key('recommend-tab-$code-underline'),
width: _underlineWidth,
height: _underlineHeight,
decoration: BoxDecoration(
color: progress == 0
? AppColors.transparent
: AppColors.brandRed.withValues(alpha: progress),
borderRadius: BorderRadius.circular(_underlineHeight / 2),
),
);
}