fix(recommend): 统一全部短剧筛选左对齐

This commit is contained in:
Zhou Weidong committed 2026-10-22 20:56:45 +08:00
1 parent 64bc1997ba
commit 57c9e6b477
4 files changed
+156 -33

No files matched your search

+2
View File
@@ -1218,3 +1218,5 @@ $ flutter test
- 第 4 行复用选中胶囊样式,右侧改为 44×44 圆形深灰按钮和 22 三横线图标;`flutter analyze` 无问题。
- 筛选行距收紧到 6、项距 10,chip 左右 padding 12;四行均可横向回弹滑动。
- 第 4 行仅最热/最新在滚动区内,44 圆形筛选按钮固定在滚动区外;`flutter analyze` 无问题。
- 四行统一复用 `_filterRow` 构建,筛选区仅保留一层左右 12 padding。
- 新增量化测试断言四行首项 x 均为 12、相邻 chip 间距均为 10;`flutter analyze` 无问题。
@@ -142,9 +142,9 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
final genres = _availableGenres(l10n);
return Padding(
padding: const EdgeInsets.fromLTRB(
AppDimens.feedPageHorizontal,
AppDimens.allDramasHorizontal,
0,
AppDimens.allDramasFilterRight,
AppDimens.allDramasHorizontal,
AppDimens.allDramasFilterToGridGap,
),
child: Column(
@@ -184,37 +184,45 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
required String selected,
required ValueChanged<String> onSelected,
}) {
return Padding(
key: Key('all-filter-row-$row'),
padding: const EdgeInsets.only(bottom: AppDimens.filterRowGap),
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: [
for (var index = 0; index < options.length; index++) ...[
_chip(
key: Key('all-filter-${options[index].id}'),
label: options[index].label,
selected: selected == options[index].id,
onTap: () => onSelected(options[index].id),
),
if (index < options.length - 1)
const SizedBox(width: AppDimens.filterItemGap),
],
return _filterRow(
row: row,
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: [
for (var index = 0; index < options.length; index++) ...[
_chip(
key: Key('all-filter-${options[index].id}'),
label: options[index].label,
selected: selected == options[index].id,
onTap: () => onSelected(options[index].id),
),
if (index < options.length - 1)
const SizedBox(width: AppDimens.filterItemGap),
],
),
],
),
),
);
}
Widget _filterRow({
required int row,
required Widget child,
double height = AppDimens.filterChipHeight,
}) {
return Padding(
key: Key('all-filter-row-$row'),
padding: EdgeInsets.only(bottom: row < 3 ? AppDimens.filterRowGap : 0),
child: SizedBox(height: height, child: child),
);
}
Widget _genreRow(
int row,
List<({String id, String label})> options,
@@ -270,8 +278,8 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
}
Widget _sortRow(AppLocalizations l10n) {
return SizedBox(
key: const Key('all-filter-row-3'),
return _filterRow(
row: 3,
height: AppDimens.allDramasFilterButton,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
@@ -0,0 +1,110 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:fruitshorts/core/data/services/home_feed_controller.dart';
import 'package:fruitshorts/core/theme/app_dimens.dart';
import 'package:fruitshorts/l10n/app_localizations.dart';
import 'package:fruitshorts/pages/recommend/widgets/all_dramas_filter_grid.dart';
import '../support/fake_catalog.dart';
void main() {
testWidgets('all filter rows start at the same left edge', (tester) async {
final catalog = FakeCatalogRepository();
final controller = HomeFeedController(catalog)
..seedRecommend(catalog.dramas);
addTearDown(controller.dispose);
await tester.pumpWidget(
MaterialApp(
locale: const Locale('en'),
supportedLocales: AppLocalizations.supportedLocales,
localizationsDelegates: AppLocalizations.localizationsDelegates,
home: Scaffold(
body: AllDramasFilterGrid(
feedController: controller,
onOpenDrama: (_) {},
onOpenFilter: () {},
),
),
),
);
await tester.pumpAndSettle();
expect(AppDimens.allDramasHorizontal, 12);
final firstChips = [
find.descendant(
of: find.byKey(const Key('all-filter-row-0')),
matching: find.byKey(const Key('all-filter-all')),
),
find.descendant(
of: find.byKey(const Key('all-filter-row-1')),
matching: find.byKey(const Key('all-filter-all')),
),
find.descendant(
of: find.byKey(const Key('all-filter-row-2')),
matching: find.byKey(const Key('all-filter-all')),
),
find.byKey(const Key('all-sort-hot')),
];
final starts = firstChips
.map((finder) => tester.getTopLeft(finder).dx)
.toList(growable: false);
for (final start in starts) {
expect(start, closeTo(12, 0.5));
expect(start, closeTo(starts.first, 0.5));
}
final rowZeroChips = [
find.byKey(const Key('all-filter-all')).first,
find.byKey(const Key('all-filter-local')),
find.byKey(const Key('all-filter-asia')),
];
final rowZeroRects = rowZeroChips.map(tester.getRect).toList();
final rowZeroGaps = [
for (var index = 1; index < rowZeroRects.length; index++)
rowZeroRects[index].left - rowZeroRects[index - 1].right,
];
expect(rowZeroGaps[0], closeTo(10, 0.5));
expect(rowZeroGaps[1], closeTo(rowZeroGaps[0], 0.5));
final rowOneAll = find.descendant(
of: find.byKey(const Key('all-filter-row-1')),
matching: find.byKey(const Key('all-filter-all')),
);
final rowOneSubtitles = find.byKey(const Key('all-filter-subtitles'));
final rowOneDubbed = find.byKey(const Key('all-filter-dubbed'));
final rowOneGap =
tester.getTopLeft(rowOneSubtitles).dx -
tester.getTopRight(rowOneAll).dx;
expect(rowOneGap, closeTo(10, 0.5));
expect(
tester.getTopLeft(rowOneDubbed).dx -
tester.getTopRight(rowOneSubtitles).dx,
closeTo(rowOneGap, 0.5),
);
final rowTwoAll = find.descendant(
of: find.byKey(const Key('all-filter-row-2')),
matching: find.byKey(const Key('all-filter-all')),
);
final rowTwoReversal = find.byKey(const Key('all-filter-reversal'));
final rowTwoUplifting = find.byKey(const Key('all-filter-uplifting'));
final rowTwoGap =
tester.getTopLeft(rowTwoReversal).dx - tester.getTopRight(rowTwoAll).dx;
expect(rowTwoGap, closeTo(10, 0.5));
expect(
tester.getTopLeft(rowTwoUplifting).dx -
tester.getTopRight(rowTwoReversal).dx,
closeTo(rowTwoGap, 0.5),
);
expect(
tester.getTopLeft(find.byKey(const Key('all-sort-new'))).dx -
tester.getTopRight(find.byKey(const Key('all-sort-hot'))).dx,
closeTo(10, 0.5),
);
});
}
+7 -4
View File
@@ -259,12 +259,15 @@ void main() {
];
expect(
filterStarts,
everyElement(closeTo(AppDimens.feedPageHorizontal, 0.1)),
everyElement(closeTo(AppDimens.allDramasHorizontal, 0.1)),
);
final pageRect = tester.getRect(find.byKey(const Key('recommend-page')));
for (var row = 0; row < 4; row++) {
final rowRect = tester.getRect(find.byKey(Key('all-filter-row-$row')));
expect(rowRect.left, closeTo(pageRect.left + 14, 0.1));
expect(
rowRect.left,
closeTo(pageRect.left + AppDimens.allDramasHorizontal, 0.1),
);
expect(rowRect.right, closeTo(pageRect.right - 12, 0.1));
}
final firstTexts = [
@@ -293,7 +296,7 @@ void main() {
firstTextX.first,
closeTo(
pageRect.left +
AppDimens.feedPageHorizontal +
AppDimens.allDramasHorizontal +
AppDimens.filterChipHorizontalPadding,
0.1,
),
@@ -362,7 +365,7 @@ void main() {
);
expect(
tester.getTopLeft(rowZeroAll).dx,
closeTo(pageRect.left + AppDimens.feedPageHorizontal, 0.1),
closeTo(pageRect.left + AppDimens.allDramasHorizontal, 0.1),
);
expect(
tester.getTopLeft(rowZeroLocal).dx - tester.getTopRight(rowZeroAll).dx,