fix(recommend): 统一全部短剧筛选左对齐
This commit is contained in:
1 parent
64bc1997ba
commit
57c9e6b477
4 files changed
+156
-33
No files matched your search
@@ -1218,3 +1218,5 @@ $ flutter test
|
|||||||
- 第 4 行复用选中胶囊样式,右侧改为 44×44 圆形深灰按钮和 22 三横线图标;`flutter analyze` 无问题。
|
- 第 4 行复用选中胶囊样式,右侧改为 44×44 圆形深灰按钮和 22 三横线图标;`flutter analyze` 无问题。
|
||||||
- 筛选行距收紧到 6、项距 10,chip 左右 padding 12;四行均可横向回弹滑动。
|
- 筛选行距收紧到 6、项距 10,chip 左右 padding 12;四行均可横向回弹滑动。
|
||||||
- 第 4 行仅最热/最新在滚动区内,44 圆形筛选按钮固定在滚动区外;`flutter analyze` 无问题。
|
- 第 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);
|
final genres = _availableGenres(l10n);
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: const EdgeInsets.fromLTRB(
|
padding: const EdgeInsets.fromLTRB(
|
||||||
AppDimens.feedPageHorizontal,
|
AppDimens.allDramasHorizontal,
|
||||||
0,
|
0,
|
||||||
AppDimens.allDramasFilterRight,
|
AppDimens.allDramasHorizontal,
|
||||||
AppDimens.allDramasFilterToGridGap,
|
AppDimens.allDramasFilterToGridGap,
|
||||||
),
|
),
|
||||||
child: Column(
|
child: Column(
|
||||||
@@ -184,37 +184,45 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
|
|||||||
required String selected,
|
required String selected,
|
||||||
required ValueChanged<String> onSelected,
|
required ValueChanged<String> onSelected,
|
||||||
}) {
|
}) {
|
||||||
return Padding(
|
return _filterRow(
|
||||||
key: Key('all-filter-row-$row'),
|
row: row,
|
||||||
padding: const EdgeInsets.only(bottom: AppDimens.filterRowGap),
|
child: SingleChildScrollView(
|
||||||
child: SizedBox(
|
key: Key('all-filter-scroll-$row'),
|
||||||
height: AppDimens.filterChipHeight,
|
scrollDirection: Axis.horizontal,
|
||||||
child: SingleChildScrollView(
|
physics: const BouncingScrollPhysics(),
|
||||||
key: Key('all-filter-scroll-$row'),
|
child: Row(
|
||||||
scrollDirection: Axis.horizontal,
|
mainAxisSize: MainAxisSize.min,
|
||||||
physics: const BouncingScrollPhysics(),
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
child: Row(
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
mainAxisSize: MainAxisSize.min,
|
children: [
|
||||||
mainAxisAlignment: MainAxisAlignment.start,
|
for (var index = 0; index < options.length; index++) ...[
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
_chip(
|
||||||
children: [
|
key: Key('all-filter-${options[index].id}'),
|
||||||
for (var index = 0; index < options.length; index++) ...[
|
label: options[index].label,
|
||||||
_chip(
|
selected: selected == options[index].id,
|
||||||
key: Key('all-filter-${options[index].id}'),
|
onTap: () => onSelected(options[index].id),
|
||||||
label: options[index].label,
|
),
|
||||||
selected: selected == options[index].id,
|
if (index < options.length - 1)
|
||||||
onTap: () => onSelected(options[index].id),
|
const SizedBox(width: AppDimens.filterItemGap),
|
||||||
),
|
|
||||||
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(
|
Widget _genreRow(
|
||||||
int row,
|
int row,
|
||||||
List<({String id, String label})> options,
|
List<({String id, String label})> options,
|
||||||
@@ -270,8 +278,8 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Widget _sortRow(AppLocalizations l10n) {
|
Widget _sortRow(AppLocalizations l10n) {
|
||||||
return SizedBox(
|
return _filterRow(
|
||||||
key: const Key('all-filter-row-3'),
|
row: 3,
|
||||||
height: AppDimens.allDramasFilterButton,
|
height: AppDimens.allDramasFilterButton,
|
||||||
child: Row(
|
child: Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.start,
|
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),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -259,12 +259,15 @@ void main() {
|
|||||||
];
|
];
|
||||||
expect(
|
expect(
|
||||||
filterStarts,
|
filterStarts,
|
||||||
everyElement(closeTo(AppDimens.feedPageHorizontal, 0.1)),
|
everyElement(closeTo(AppDimens.allDramasHorizontal, 0.1)),
|
||||||
);
|
);
|
||||||
final pageRect = tester.getRect(find.byKey(const Key('recommend-page')));
|
final pageRect = tester.getRect(find.byKey(const Key('recommend-page')));
|
||||||
for (var row = 0; row < 4; row++) {
|
for (var row = 0; row < 4; row++) {
|
||||||
final rowRect = tester.getRect(find.byKey(Key('all-filter-row-$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));
|
expect(rowRect.right, closeTo(pageRect.right - 12, 0.1));
|
||||||
}
|
}
|
||||||
final firstTexts = [
|
final firstTexts = [
|
||||||
@@ -293,7 +296,7 @@ void main() {
|
|||||||
firstTextX.first,
|
firstTextX.first,
|
||||||
closeTo(
|
closeTo(
|
||||||
pageRect.left +
|
pageRect.left +
|
||||||
AppDimens.feedPageHorizontal +
|
AppDimens.allDramasHorizontal +
|
||||||
AppDimens.filterChipHorizontalPadding,
|
AppDimens.filterChipHorizontalPadding,
|
||||||
0.1,
|
0.1,
|
||||||
),
|
),
|
||||||
@@ -362,7 +365,7 @@ void main() {
|
|||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
tester.getTopLeft(rowZeroAll).dx,
|
tester.getTopLeft(rowZeroAll).dx,
|
||||||
closeTo(pageRect.left + AppDimens.feedPageHorizontal, 0.1),
|
closeTo(pageRect.left + AppDimens.allDramasHorizontal, 0.1),
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
tester.getTopLeft(rowZeroLocal).dx - tester.getTopRight(rowZeroAll).dx,
|
tester.getTopLeft(rowZeroLocal).dx - tester.getTopRight(rowZeroAll).dx,
|
||||||
|
|||||||
Reference in new issue
Block a user