merge: 合并 K34-A 剧场页精致化

lib/pages/discover/discover_view.dart

@@ -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(
+      child: Stack(
-        key: const Key('discover-refresh'),
+        children: [
-        color: AppColors.blue,
+          Positioned.fill(
-        backgroundColor: AppColors.card,
+            child: RefreshIndicator(
-        onRefresh: categories.load,
+              key: const Key('discover-refresh'),
-        child: ListView(
+              color: AppColors.blue,
-          controller: logic.scroll,
+              backgroundColor: AppColors.card,
-          physics: const AlwaysScrollableScrollPhysics(),
+              strokeWidth: 2,
-          padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+              edgeOffset: _stickyHeaderHeight + 8,
-          children: _content(l10n, categories),
+              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

@@ -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),
+      padding: EdgeInsets.symmetric(horizontal: widget.horizontalPadding),
-      child: SizedBox(
+      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,
+          controller: widget.controller,
-          focusNode: focusNode,
+          focusNode: widget.focusNode,
-          onChanged: onChanged,
+          onChanged: widget.onChanged,
-          onTapOutside: (_) => focusNode.unfocus(),
+          onTapOutside: (_) => widget.focusNode.unfocus(),
           textInputAction: TextInputAction.search,
           style: const TextStyle(color: AppColors.onSurface, fontSize: 14),
           decoration: InputDecoration(
             isDense: true,
-            filled: true,
+            filled: false,
-            fillColor: AppColors.card,
             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(
+            border: InputBorder.none,
-              borderRadius: BorderRadius.circular(_searchRadius),
+            enabledBorder: InputBorder.none,
-              borderSide: BorderSide.none,
+            focusedBorder: InputBorder.none,
-            ),
-            focusedBorder: OutlineInputBorder(
-              borderRadius: BorderRadius.circular(_searchRadius),
-              borderSide: const BorderSide(color: AppColors.blue, width: 1),
-            ),
           ),
         ),
       ),

test/discover/home_all_dramas_grid_test.dart

@@ -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(