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

feat(flutter): 剧场页搜索与吸顶筛选精致化

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-20 14:52:41 +08:00
1 parent f9d4f982f0
commit 5283ab2549
3 files changed
+204 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/discover/discover_view.dart
+75 -12
View File
@@ -31,6 +31,8 @@ const double _categoryTabHeight = 44;
const double _categoryTabGap = 20;
const double _categorySelectedFontSize = 16;
const double _categoryFontSize = 15;
const double _stickyHeaderHeight = 102;
const Duration _stickyHeaderTransition = Duration(milliseconds: 200);
/// K28-A2 剧场页：搜索、分类/语言 chips 与双列剧库。
class DiscoverPage extends StatefulWidget {
@@ -53,6 +55,7 @@ class DiscoverPage extends StatefulWidget {
class _DiscoverPageState extends State<DiscoverPage> {
late final DiscoverLogic logic;
bool _headerScrolled = false;
bool get embedded => widget.callbacks.embedded;
@@ -60,9 +63,17 @@ class _DiscoverPageState extends State<DiscoverPage> {
void initState() {
super.initState();
logic = DiscoverBinding().create(search: context.read<SearchRepository>());
logic.scroll.addListener(_onScroll);
if (widget.focusSearch) _focusOnFirstFrame();
}
void _onScroll() {
final scrolled = logic.scroll.hasClients && logic.scroll.offset > 0;
if (scrolled != _headerScrolled) {
setState(() => _headerScrolled = scrolled);
}
}
void _focusOnFirstFrame() {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted && widget.active) logic.openSearch();
@@ -82,6 +93,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
@override
void dispose() {
logic.scroll.removeListener(_onScroll);
logic.dispose();
super.dispose();
}
@@ -124,20 +136,73 @@ class _DiscoverPageState extends State<DiscoverPage> {
}
Widget _feed(AppLocalizations l10n, CategoryController categories) {
final showHeader = _showStickyHeader(categories);
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: logic.searchFocus.unfocus,
child: RefreshIndicator(
key: const Key('discover-refresh'),
color: AppColors.blue,
backgroundColor: AppColors.card,
onRefresh: categories.load,
child: ListView(
controller: logic.scroll,
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
children: _content(l10n, categories),
child: Stack(
children: [
Positioned.fill(
child: RefreshIndicator(
key: const Key('discover-refresh'),
color: AppColors.blue,
backgroundColor: AppColors.card,
strokeWidth: 2,
edgeOffset: _stickyHeaderHeight + 8,
onRefresh: categories.load,
child: ListView(
controller: logic.scroll,
physics: const AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.only(
top: showHeader ? _stickyHeaderHeight : 0,
bottom: AppDimens.spaceXl,
),
children: _content(l10n, categories),
),
),
),
if (showHeader)
Positioned(
top: 0,
left: 0,
right: 0,
child: _stickyHeader(l10n, categories),
),
],
),
);
}
bool _showStickyHeader(CategoryController categories) {
if (logic.hasSearchQuery || categories.error != null) return false;
return !(categories.loading && categories.feed.sections.isEmpty);
}
Widget _stickyHeader(AppLocalizations l10n, CategoryController categories) {
return AnimatedContainer(
key: const Key('theater-sticky-header'),
duration: _stickyHeaderTransition,
curve: Curves.easeOut,
decoration: BoxDecoration(
color: _headerScrolled ? AppColors.ink : Colors.transparent,
border: Border(
bottom: BorderSide(
color: _headerScrolled ? AppColors.border : Colors.transparent,
),
),
boxShadow: _headerScrolled
? const [
BoxShadow(
color: Color(0x14000000),
blurRadius: 8,
offset: Offset(0, 2),
),
]
: const [],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [_categoryTabs(l10n, categories), _toolbar(l10n, categories)],
),
);
}
@@ -183,8 +248,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
? categories.feed.dramas
: categories.dramasOf(logic.selectedCategoryId!);
return [
_categoryTabs(l10n, categories),
_toolbar(l10n, categories),
if (dramas.isEmpty)
Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
lib/pages/discover/widgets/discover_search_field.dart
+69 -21
View File
@@ -6,10 +6,11 @@ import '../../../core/theme/app_colors.dart';
import '../../../l10n/app_localizations.dart';
const double _searchHeight = 40;
const double _searchRadius = 18;
const double _searchRadius = 20;
const Duration _focusTransition = Duration(milliseconds: 160);
/// 剧场顶部整行搜索框。
class DiscoverSearchField extends StatelessWidget {
/// 剧场顶部整行搜索框：白底细边，聚焦时主题色描边与更深的阴影。
class DiscoverSearchField extends StatefulWidget {
const DiscoverSearchField({
super.key,
required this.controller,
@@ -25,32 +26,84 @@ class DiscoverSearchField extends StatelessWidget {
final bool loading;
final double horizontalPadding;
@override
State<DiscoverSearchField> createState() => _DiscoverSearchFieldState();
}
class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
bool _focused = false;
@override
void initState() {
super.initState();
widget.focusNode.addListener(_onFocusChanged);
}
@override
void didUpdateWidget(covariant DiscoverSearchField oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.focusNode != widget.focusNode) {
oldWidget.focusNode.removeListener(_onFocusChanged);
widget.focusNode.addListener(_onFocusChanged);
_focused = widget.focusNode.hasFocus;
}
}
@override
void dispose() {
widget.focusNode.removeListener(_onFocusChanged);
super.dispose();
}
void _onFocusChanged() {
final focused = widget.focusNode.hasFocus;
if (focused != _focused) setState(() => _focused = focused);
}
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
child: SizedBox(
padding: EdgeInsets.symmetric(horizontal: widget.horizontalPadding),
child: AnimatedContainer(
key: const Key('discover-search-shell'),
duration: _focusTransition,
curve: Curves.easeOut,
height: _searchHeight,
decoration: BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.circular(_searchRadius),
border: Border.all(
color: _focused ? AppColors.blue : AppColors.border,
),
boxShadow: [
BoxShadow(
color: _focused
? AppColors.blue.withValues(alpha: 0.18)
: Colors.black.withValues(alpha: 0.04),
blurRadius: _focused ? 10 : 4,
offset: const Offset(0, 2),
),
],
),
child: TextField(
key: const Key('discover-search'),
controller: controller,
focusNode: focusNode,
onChanged: onChanged,
onTapOutside: (_) => focusNode.unfocus(),
controller: widget.controller,
focusNode: widget.focusNode,
onChanged: widget.onChanged,
onTapOutside: (_) => widget.focusNode.unfocus(),
textInputAction: TextInputAction.search,
style: const TextStyle(color: AppColors.onSurface, fontSize: 14),
decoration: InputDecoration(
isDense: true,
filled: true,
fillColor: AppColors.card,
filled: false,
hintText: AppLocalizations.of(context)!.searchDiscover,
hintStyle: const TextStyle(color: AppColors.subtle, fontSize: 12),
hintStyle: const TextStyle(color: AppColors.subtle, fontSize: 13.5),
prefixIcon: const Icon(
Icons.search_rounded,
color: AppColors.subtle,
size: 17,
),
suffixIcon: loading
suffixIcon: widget.loading
? const SizedBox.square(
dimension: 18,
child: Center(
@@ -63,14 +116,9 @@ class DiscoverSearchField extends StatelessWidget {
minHeight: 0,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_searchRadius),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(_searchRadius),
borderSide: const BorderSide(color: AppColors.blue, width: 1),
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
test/discover/home_all_dramas_grid_test.dart
+60
View File
@@ -10,6 +10,7 @@ import 'package:fruitshorts/core/data/repositories/category_repository.dart';
import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
import 'package:fruitshorts/core/theme/app_colors.dart';
import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
@@ -170,6 +171,65 @@ void main() {
expect(counter.categoryLoads + counter.feedLoads, greaterThan(before));
expect(find.byType(RefreshProgressIndicator), findsNothing);
});
testWidgets('should_style_search_shell_and_focus_border', (tester) async {
await _pumpTheater(tester, categoryRepository: _GridCategoryRepository());
BoxDecoration shell() =>
tester
.widget<AnimatedContainer>(
find.byKey(const Key('discover-search-shell')),
)
.decoration!
as BoxDecoration;
expect(shell().borderRadius, BorderRadius.circular(20));
expect((shell().border! as Border).top.color, AppColors.border);
await tester.tap(find.byKey(const Key('discover-search')));
await tester.pump(const Duration(milliseconds: 200));
expect((shell().border! as Border).top.color, AppColors.blue);
});
testWidgets('should_pin_theater_filters_when_scrolling', (tester) async {
await _pumpTheater(
tester,
categoryRepository: _GridCategoryRepository(
discoverFeed: _tallDiscoverFeed,
),
);
BoxDecoration header() =>
tester
.widget<AnimatedContainer>(
find.byKey(const Key('theater-sticky-header')),
)
.decoration!
as BoxDecoration;
final before = tester.getRect(
find.byKey(const Key('theater-sticky-header')),
);
expect(header().color, Colors.transparent);
await tester.drag(_verticalFeed, const Offset(0, -220));
await tester.pumpAndSettle();
final after = tester.getRect(
find.byKey(const Key('theater-sticky-header')),
);
expect(after.top, closeTo(before.top, 0.5));
expect(header().color, AppColors.ink);
});
testWidgets('should_use_compact_refresh_indicator', (tester) async {
await _pumpTheater(tester, categoryRepository: _GridCategoryRepository());
final indicator = tester.widget<RefreshIndicator>(
find.byKey(const Key('discover-refresh')),
);
expect(indicator.color, AppColors.blue);
expect(indicator.strokeWidth, 2);
expect(indicator.edgeOffset, 110);
});
}
final Finder _verticalFeed = find.byWidgetPredicate(