diff --git a/lib/core/widgets/app_bottom_nav.dart b/lib/core/widgets/app_bottom_nav.dart index fed7576..ecb85ea 100644 --- a/lib/core/widgets/app_bottom_nav.dart +++ b/lib/core/widgets/app_bottom_nav.dart @@ -5,6 +5,8 @@ import 'package:flutter/material.dart'; import '../theme/app_colors.dart'; import '../theme/app_dimens.dart'; +const double _maxNavigationTextScale = 1.3; + /// 底部导航普通目的地。 class AppBottomNavItem { const AppBottomNavItem({ @@ -41,14 +43,17 @@ class AppBottomNav extends StatelessWidget { key: barKey, height: AppDimens.navHeight, color: AppColors.navBackground, - child: Row( - children: [ - for (final item in items) - _NavDestination( - item: item, - unselectedColor: AppColors.navUnselected, - ), - ], + child: MediaQuery.withClampedTextScaling( + maxScaleFactor: _maxNavigationTextScale, + child: Row( + children: [ + for (final item in items) + _NavDestination( + item: item, + unselectedColor: AppColors.navUnselected, + ), + ], + ), ), ); return ColoredBox( diff --git a/lib/pages/player/widgets/drama_info_sheet.dart b/lib/pages/player/widgets/drama_info_sheet.dart index 3812408..18a9b03 100644 --- a/lib/pages/player/widgets/drama_info_sheet.dart +++ b/lib/pages/player/widgets/drama_info_sheet.dart @@ -155,12 +155,12 @@ class _DramaInfoSheetState extends State { ); } - /// 视觉上是个小圆钮,点按区域仍是 40pt,避免太小点不中。 + /// 视觉上是个小圆钮,点按区域为 44pt。 Widget _closeButton(AppLocalizations l10n) { return SizedBox( key: const Key('drama-info-close'), - width: 40, - height: 40, + width: AppDimens.tapTarget, + height: AppDimens.tapTarget, child: Center( child: Semantics( button: true, diff --git a/test/home/app_bottom_nav_test.dart b/test/home/app_bottom_nav_test.dart index e160fde..2c2a6e6 100644 --- a/test/home/app_bottom_nav_test.dart +++ b/test/home/app_bottom_nav_test.dart @@ -210,4 +210,62 @@ void main() { await tester.pumpAndSettle(); expect(find.byIcon(Icons.theaters_outlined), findsOneWidget); }); + + testWidgets('should_not_overflow_when_text_scale_is_two_on_narrow_screen', ( + tester, + ) async { + tester.view.physicalSize = const Size(320, 640); + tester.view.devicePixelRatio = 1; + addTearDown(tester.view.resetPhysicalSize); + addTearDown(tester.view.resetDevicePixelRatio); + + await tester.pumpWidget( + MaterialApp( + home: MediaQuery( + data: const MediaQueryData(textScaler: TextScaler.linear(2)), + child: Scaffold( + bottomNavigationBar: AppBottomNav( + items: [ + AppBottomNavItem( + tabKey: const Key('large-home'), + icon: Icons.home_outlined, + selectedIcon: Icons.home_rounded, + label: 'Home', + selected: true, + onTap: () {}, + ), + AppBottomNavItem( + tabKey: const Key('large-recommend'), + icon: Icons.celebration_outlined, + selectedIcon: Icons.celebration_rounded, + label: 'Recommend', + onTap: () {}, + ), + AppBottomNavItem( + tabKey: const Key('large-following'), + icon: Icons.bookmark_border_rounded, + selectedIcon: Icons.bookmark_rounded, + label: 'Following', + onTap: () {}, + ), + AppBottomNavItem( + tabKey: const Key('large-mine'), + icon: Icons.person_outline_rounded, + selectedIcon: Icons.person_rounded, + label: 'My', + onTap: () {}, + ), + ], + ), + ), + ), + ), + ); + + expect(tester.takeException(), isNull); + expect( + tester.getSize(find.byKey(const Key('large-recommend'))).height, + greaterThanOrEqualTo(AppDimens.tapTarget), + ); + }); }