diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md index 68ccc5f..8ae87b4 100644 --- a/docs/plans/PROGRESS.md +++ b/docs/plans/PROGRESS.md @@ -1216,3 +1216,5 @@ $ flutter test - 四行首项文字统一到同一 x;行高 30、行距 6、项目距 12,第 4 行保持弹性空白后固定筛选图标。 - 按最新截图改为 16sp、32 高、10 行距、16 项距;选中态为 `#21090E` 底配 `#FF4D6A` 粉字。 - 第 4 行复用选中胶囊样式,右侧改为 44×44 圆形深灰按钮和 22 三横线图标;`flutter analyze` 无问题。 +- 筛选行距收紧到 6、项距 10,chip 左右 padding 12;四行均可横向回弹滑动。 +- 第 4 行仅最热/最新在滚动区内,44 圆形筛选按钮固定在滚动区外;`flutter analyze` 无问题。 diff --git a/lib/core/theme/app_dimens.dart b/lib/core/theme/app_dimens.dart index 0fc48db..904fcee 100644 --- a/lib/core/theme/app_dimens.dart +++ b/lib/core/theme/app_dimens.dart @@ -140,9 +140,9 @@ abstract final class AppDimens { static const double filterChipFont = 16; static const double filterChipHeight = 32; static const double filterChipRadius = 16; - static const double filterChipHorizontalPadding = 14; - static const double filterRowGap = 10; - static const double filterItemGap = 16; + static const double filterChipHorizontalPadding = 12; + static const double filterRowGap = 6; + static const double filterItemGap = 10; static const double allDramasHorizontal = 12; static const double allDramasGridGap = 6; static const double allDramasGridRowGap = 12; diff --git a/lib/pages/recommend/widgets/all_dramas_filter_grid.dart b/lib/pages/recommend/widgets/all_dramas_filter_grid.dart index ff5d0dc..75086a8 100644 --- a/lib/pages/recommend/widgets/all_dramas_filter_grid.dart +++ b/lib/pages/recommend/widgets/all_dramas_filter_grid.dart @@ -190,8 +190,11 @@ class _AllDramasFilterGridState extends State { child: SizedBox( height: AppDimens.filterChipHeight, child: SingleChildScrollView( + key: Key('all-filter-scroll-$row'), scrollDirection: Axis.horizontal, + physics: const BouncingScrollPhysics(), child: Row( + mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ @@ -274,20 +277,34 @@ class _AllDramasFilterGridState extends State { mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ - _chip( - key: const Key('all-sort-hot'), - label: l10n.hot, - selected: !_newest, - onTap: () => setState(() => _newest = false), + Expanded( + child: SingleChildScrollView( + key: const Key('all-filter-scroll-3'), + scrollDirection: Axis.horizontal, + physics: const BouncingScrollPhysics(), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + _chip( + key: const Key('all-sort-hot'), + label: l10n.hot, + selected: !_newest, + onTap: () => setState(() => _newest = false), + ), + const SizedBox(width: AppDimens.filterItemGap), + _chip( + key: const Key('all-sort-new'), + label: l10n.newest, + selected: _newest, + onTap: () => setState(() => _newest = true), + ), + ], + ), + ), ), const SizedBox(width: AppDimens.filterItemGap), - _chip( - key: const Key('all-sort-new'), - label: l10n.newest, - selected: _newest, - onTap: () => setState(() => _newest = true), - ), - const Spacer(), Material( key: const Key('all-dramas-filter-page-button'), color: AppColors.filterMenuButton, diff --git a/test/recommend/recommend_sections_test.dart b/test/recommend/recommend_sections_test.dart index b1299c1..6d981ce 100644 --- a/test/recommend/recommend_sections_test.dart +++ b/test/recommend/recommend_sections_test.dart @@ -247,6 +247,11 @@ void main() { expect(delegate.mainAxisSpacing, AppDimens.allDramasGridRowGap); for (var row = 0; row < 4; row++) { expect(find.byKey(Key('all-filter-row-$row')), findsOneWidget); + final scroll = tester.widget( + find.byKey(Key('all-filter-scroll-$row')), + ); + expect(scroll.scrollDirection, Axis.horizontal); + expect(scroll.physics, isA()); } final filterStarts = [ for (var row = 0; row < 4; row++) @@ -355,6 +360,10 @@ void main() { of: rowZero, matching: find.byKey(const Key('all-filter-local')), ); + expect( + tester.getTopLeft(rowZeroAll).dx, + closeTo(pageRect.left + AppDimens.feedPageHorizontal, 0.1), + ); expect( tester.getTopLeft(rowZeroLocal).dx - tester.getTopRight(rowZeroAll).dx, AppDimens.filterItemGap, @@ -426,6 +435,13 @@ void main() { BorderRadius.circular(AppDimens.filterChipRadius), ); final filterButton = find.byKey(const Key('all-dramas-filter-page')); + expect( + find.descendant( + of: find.byKey(const Key('all-filter-scroll-3')), + matching: filterButton, + ), + findsNothing, + ); expect( tester.getSize(filterButton), const Size.square(AppDimens.allDramasFilterButton),