merge: 固定发现页顶栏

lib/pages/discover/discover_view.dart

@@ -113,6 +113,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
       bottom: !widget.embedded,
       child: Column(
         children: [
+          _header(l10n),
           Expanded(child: _feed(l10n, categories, allDramas, visible)),
           if (!widget.embedded) _bottomNav(l10n),
         ],
@@ -137,7 +138,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
   ) => CustomScrollView(
     controller: logic.scroll,
     slivers: [
-      SliverToBoxAdapter(child: _header(l10n)),
       SliverToBoxAdapter(child: _search()),
       SliverToBoxAdapter(
         child: Padding(
@@ -222,69 +222,72 @@ class _DiscoverPageState extends State<DiscoverPage> {
   );
 
   Widget _header(AppLocalizations l10n) {
-    return Padding(
+    return SizedBox(
-      padding: const EdgeInsets.fromLTRB(14, 2, 14, 10),
+      height: 46,
-      child: Row(
+      child: Padding(
-        children: [
+        padding: const EdgeInsets.symmetric(horizontal: 14),
-          Container(
+        child: Row(
-            width: 24,
+          children: [
-            height: 24,
+            Container(
-            alignment: Alignment.center,
+              width: 24,
-            decoration: BoxDecoration(
+              height: 24,
-              color: AppColors.blue,
+              alignment: Alignment.center,
-              borderRadius: BorderRadius.circular(7),
+              decoration: BoxDecoration(
+                color: AppColors.blue,
+                borderRadius: BorderRadius.circular(7),
+              ),
+              child: const Icon(
+                Icons.play_arrow_rounded,
+                color: AppColors.onPrimary,
+                size: 16,
+              ),
             ),
-            child: const Icon(
+            const SizedBox(width: 8),
-              Icons.play_arrow_rounded,
+            Text(
-              color: AppColors.onPrimary,
+              l10n.discoverTab,
-              size: 16,
+              style: const TextStyle(
+                fontFamily: 'Outfit',
+                color: AppColors.onSurface,
+                fontSize: 15,
+                fontWeight: FontWeight.w800,
+              ),
             ),
-          ),
+            const Spacer(),
-          const SizedBox(width: 8),
+            _HeaderIcon(
-          Text(
+              key: const Key('discover-search-button'),
-            l10n.discoverTab,
+              icon: Icons.search_rounded,
-            style: const TextStyle(
+              tooltip: l10n.search,
-              fontFamily: 'Outfit',
+              onTap: logic.openSearch,
-              color: AppColors.onSurface,
-              fontSize: 15,
-              fontWeight: FontWeight.w800,
             ),
-          ),
+            const SizedBox(width: 8),
-          const Spacer(),
+            Semantics(
-          _HeaderIcon(
+              button: true,
-            key: const Key('discover-search-button'),
+              label: widget.signedIn ? l10n.myTab : l10n.logIn,
-            icon: Icons.search_rounded,
+              child: InkWell(
-            tooltip: l10n.search,
+                key: const Key('discover-profile'),
-            onTap: logic.openSearch,
+                customBorder: const CircleBorder(),
-          ),
+                onTap: widget.signedIn ? widget.onCoins : widget.onSignIn,
-          const SizedBox(width: 8),
+                child: Container(
-          Semantics(
+                  width: 36,
-            button: true,
+                  height: 36,
-            label: widget.signedIn ? l10n.myTab : l10n.logIn,
+                  decoration: BoxDecoration(
-            child: InkWell(
+                    shape: BoxShape.circle,
-              key: const Key('discover-profile'),
+                    gradient: const LinearGradient(
-              customBorder: const CircleBorder(),
+                      begin: Alignment.topLeft,
-              onTap: widget.signedIn ? widget.onCoins : widget.onSignIn,
+                      end: Alignment.bottomRight,
-              child: Container(
+                      colors: [Color(0xFF6A5CFF), AppColors.blue],
-                width: 36,
+                    ),
-                height: 36,
+                  ),
-                decoration: BoxDecoration(
+                  child: const Icon(
-                  shape: BoxShape.circle,
+                    Icons.person_rounded,
-                  gradient: const LinearGradient(
+                    color: AppColors.onSurface,
-                    begin: Alignment.topLeft,
+                    size: 18,
-                    end: Alignment.bottomRight,
-                    colors: [Color(0xFF6A5CFF), AppColors.blue],
                   ),
-                ),
-                child: const Icon(
-                  Icons.person_rounded,
-                  color: AppColors.onSurface,
-                  size: 18,
                 ),
               ),
             ),
-          ),
+          ],
-        ],
+        ),
       ),
     );
   }

test/discover/home_all_dramas_grid_test.dart

@@ -132,6 +132,43 @@ void main() {
     );
   });
 
+  testWidgets('should_keep_discover_header_fixed_when_content_scrolls', (
+    tester,
+  ) async {
+    tester.view.physicalSize = const Size(390, 844);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.resetPhysicalSize);
+    addTearDown(tester.view.resetDevicePixelRatio);
+
+    await _pumpApp(
+      tester,
+      categoryRepository: _GridCategoryRepository(
+        discoverFeed: _tallDiscoverFeed,
+      ),
+    );
+    await tester.tap(find.byKey(const Key('tab-discover')));
+    await tester.pumpAndSettle();
+
+    final headerBefore = tester.getTopLeft(
+      find.byKey(const Key('discover-search-button')),
+    );
+    final contentBefore = tester.getTopLeft(
+      find.byKey(const Key('home-category-chips')),
+    );
+
+    await tester.drag(find.byType(CustomScrollView), const Offset(0, -40));
+    await tester.pumpAndSettle();
+
+    expect(
+      tester.getTopLeft(find.byKey(const Key('discover-search-button'))),
+      headerBefore,
+    );
+    expect(
+      tester.getTopLeft(find.byKey(const Key('home-category-chips'))).dy,
+      lessThan(contentBefore.dy),
+    );
+  });
+
   testWidgets('should_keep_empty_messages_when_feed_has_no_dramas', (
     tester,
   ) async {
@@ -341,3 +378,23 @@ final _defaultDiscoverFeed = HomeFeed(
     ),
   ],
 );
+
+final _tallDiscoverFeed = HomeFeed(
+  sections: [
+    FeedSection(
+      code: 'hot',
+      title: 'Hot',
+      dramas: [
+        for (var index = 0; index < 12; index++)
+          Drama(
+            id: 'tall-$index',
+            title: 'Tall Drama $index',
+            synopsis: 'Tall Drama $index synopsis',
+            posterUrl: '/files/tall-$index.png',
+            genre: 'Urban Romance',
+            detailLoaded: true,
+          ),
+      ],
+    ),
+  ],
+);