style(nav): 对齐四 Tab 底栏布局规格

test/home/app_bottom_nav_test.dart

@@ -7,14 +7,22 @@ import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/widgets/app_bottom_nav.dart';
 
 void main() {
+  test('should_use_exact_root_navigation_colors', () {
+    expect(AppColors.navBackground, const Color(0xFF000000));
+    expect(AppColors.navSelected, const Color(0xFFFFFFFF));
+    expect(AppColors.navUnselected, const Color(0xFF8E8E93));
+  });
+
   testWidgets('should_render_four_slots_with_white_selected_state', (
     tester,
   ) async {
     var theaterTaps = 0;
+    const barKey = Key('nav-bar');
     await tester.pumpWidget(
       MaterialApp(
         home: Scaffold(
           bottomNavigationBar: AppBottomNav(
+            barKey: barKey,
             items: [
               AppBottomNavItem(
                 tabKey: const Key('tab-home'),
@@ -60,6 +68,8 @@ void main() {
     final selectedLabel = tester.widget<Text>(find.text('Home'));
     expect(selectedLabel.style?.color, AppColors.navSelected);
     expect(selectedLabel.style?.fontWeight, FontWeight.w600);
+    expect(selectedLabel.style?.fontSize, AppDimens.navLabel);
+    expect(selectedLabel.style?.letterSpacing, 0);
     final unselectedLabel = tester.widget<Text>(find.text('Recommend'));
     expect(unselectedLabel.style?.color, AppColors.navUnselected);
     expect(unselectedLabel.style?.fontWeight, FontWeight.w400);
@@ -70,20 +80,35 @@ void main() {
       Key('tab-mine'),
     ].map((key) => tester.getCenter(find.byKey(key)).dx).toList();
     expect(centers, orderedEquals(centers.toList()..sort()));
+    final widths = [
+      Key('tab-home'),
+      Key('tab-recommend'),
+      Key('tab-follow'),
+      Key('tab-mine'),
+    ].map((key) => tester.getSize(find.byKey(key)).width).toList();
+    expect(widths.toSet(), hasLength(1));
     expect(
       tester.getSize(find.byType(AppBottomNav)).height,
       AppDimens.navHeight,
     );
+    final bar = tester.widget<Container>(find.byKey(barKey));
+    expect(bar.color, AppColors.navBackground);
+    expect(bar.decoration, isNull);
+    final selectedIcon = tester.widget<Icon>(
+      find.descendant(
+        of: find.byKey(const Key('tab-home')),
+        matching: find.byIcon(Icons.movie_rounded),
+      ),
+    );
+    expect(selectedIcon.color, AppColors.navSelected);
     expect(
-      tester
-          .widget<Icon>(
-            find.descendant(
-              of: find.byKey(const Key('tab-home')),
-              matching: find.byIcon(Icons.movie_rounded),
-            ),
-          )
-          .color,
-      AppColors.navSelected,
+      tester.getSize(find.byIcon(Icons.movie_rounded)),
+      const Size(26, 26),
+    );
+    expect(
+      tester.getTopLeft(find.text('Home')).dy -
+          tester.getBottomLeft(find.byIcon(Icons.movie_rounded)).dy,
+      AppDimens.navLabelGap,
     );
     await tester.tap(find.byKey(const Key('tab-recommend')));
     expect(theaterTaps, 1);
@@ -99,7 +124,6 @@ void main() {
           data: const MediaQueryData(padding: EdgeInsets.only(bottom: 34)),
           child: Scaffold(
             bottomNavigationBar: AppBottomNav(
-              dark: true,
               barKey: barKey,
               items: [
                 AppBottomNavItem(
@@ -144,12 +168,15 @@ void main() {
     );
     expect(tester.getSize(find.byKey(barKey)).height, AppDimens.navHeight);
 
-    final coloredBox = tester.widget<ColoredBox>(
+    expect(
       find.descendant(
         of: find.byType(AppBottomNav),
-        matching: find.byType(ColoredBox),
+        matching: find.byWidgetPredicate(
+          (widget) =>
+              widget is ColoredBox && widget.color == AppColors.navBackground,
+        ),
       ),
+      findsWidgets,
     );
-    expect(coloredBox.color, AppColors.navBackground);
   });
 }

test/home/home_nav_ui_test.dart

@@ -85,12 +85,8 @@ void main() {
 
     final barFinder = find.byKey(const Key('home-tabs-bar'));
     final bar = tester.widget<Container>(barFinder);
-    final decoration = bar.decoration as BoxDecoration;
-    final border = decoration.border as Border;
-    // 所有页面统一深色导航。
-    expect(decoration.color, AppColors.navBackground);
-    expect(border.top.color, AppColors.navDivider);
-    expect(border.top.width, 0.5);
+    expect(bar.color, AppColors.navBackground);
+    expect(bar.decoration, isNull);
     expect(
       tester
           .widget<Text>(
@@ -158,12 +154,8 @@ void main() {
     await tester.pumpAndSettle();
     expect(haptics.selectionClicks, 1);
     final theaterBar = tester.widget<Container>(barFinder);
-    final theaterDecoration = theaterBar.decoration as BoxDecoration;
-    expect(theaterDecoration.color, AppColors.navBackground);
-    expect(
-      (theaterDecoration.border as Border).top.color,
-      AppColors.navDivider,
-    );
+    expect(theaterBar.color, AppColors.navBackground);
+    expect(theaterBar.decoration, isNull);
     await tester.tap(find.byKey(const Key('tab-recommend')));
     await tester.pumpAndSettle();
     expect(haptics.selectionClicks, 1);

test/theme/app_dimens_test.dart

@@ -19,11 +19,12 @@ void main() {
     expect(AppDimens.sectionTitle, 16);
     expect(AppDimens.pageTitle, 20);
     expect(AppDimens.navLabel, 11);
-    expect(AppDimens.navIcon, 24);
+    expect(AppDimens.navLabelGap, 4);
+    expect(AppDimens.navIcon, 26);
     expect(AppDimens.buttonHeight, 48);
     expect(AppDimens.primaryButtonHeight, 52);
     expect(AppDimens.tapTarget, 44);
-    expect(AppDimens.navHeight, 68);
+    expect(AppDimens.navHeight, 56);
     expect(AppDimens.progressHeight, 3);
   });
 }