From 448010115f366b815818a84ea58660a8e002caeb Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Thu, 22 Oct 2026 18:37:16 +0800 Subject: [PATCH] =?UTF-8?q?fix(home):=20=E9=87=8D=E7=BB=98=E4=BA=8C?= =?UTF-8?q?=E7=BA=A7=E7=AD=9B=E9=80=89=E4=B8=89=E7=BA=BF=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/PROGRESS.md | 2 +- lib/core/theme/app_colors.dart | 1 + lib/core/theme/app_dimens.dart | 3 +- lib/pages/home/widgets/home_grid_header.dart | 33 +++++++++++++++++--- test/home/home_preview_layout_test.dart | 22 ++++++++----- 5 files changed, 48 insertions(+), 13 deletions(-) diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md index ac93b2c..d29bfce 100644 --- a/docs/plans/PROGRESS.md +++ b/docs/plans/PROGRESS.md @@ -1111,7 +1111,7 @@ $ flutter test ## 2026-10-22 首页布局对齐修正 -- 一级分类页内切换 6 个列表，未选 18/w400、选中 20/w700；二级 chips 与 26 高筛选按钮仅在精选显示。 +- 一级分类未选 18/w400、选中 20/w700；二级 chips 与 26 高透明三线筛选图标仅在精选显示。 - 四类卡片去底板/描边，封面统一 3:4、8 圆角、行距 10、封底标题间距 6；状态角标为右上角紧凑异形丝带。 - 标题下方恢复左对齐题材文字，使用 `|` 分隔、灰色小字，与封面状态角标保持独立。 - 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10；非精选 tab 直接以 10 衔接网格。 diff --git a/lib/core/theme/app_colors.dart b/lib/core/theme/app_colors.dart index 5a49010..18cfc32 100644 --- a/lib/core/theme/app_colors.dart +++ b/lib/core/theme/app_colors.dart @@ -81,6 +81,7 @@ abstract final class AppColors { static const textSecondary = Color(0xFF8E8E93); static const textTertiary = Color(0xFF9E9E9E); static const textTabInactive = Color(0xFFB0B0B0); + static const textFilterIcon = Color(0xFF7A7A7E); /// 原生开屏与冷启动过渡底色。 static const splashInk = ink; diff --git a/lib/core/theme/app_dimens.dart b/lib/core/theme/app_dimens.dart index 45fde37..95303f6 100644 --- a/lib/core/theme/app_dimens.dart +++ b/lib/core/theme/app_dimens.dart @@ -113,7 +113,8 @@ abstract final class AppDimens { static const double homeSecondaryTagRadius = 13; static const double homeSecondaryFilterGap = 8; static const double homeSecondaryFilterVisualSize = 26; - static const double homeSecondaryFilterIcon = 18; + static const double homeSecondaryFilterIcon = 16; + static const double homeSecondaryFilterStroke = 1.7; static const double homePrimaryCategoryGap = 24; static const double homeSecondaryTagGap = 14; static const double homeSearchTopGap = 0; diff --git a/lib/pages/home/widgets/home_grid_header.dart b/lib/pages/home/widgets/home_grid_header.dart index d21a79a..d61bf94 100644 --- a/lib/pages/home/widgets/home_grid_header.dart +++ b/lib/pages/home/widgets/home_grid_header.dart @@ -342,10 +342,12 @@ class HomeGridHeader extends StatelessWidget { child: Center( child: SizedBox.square( dimension: AppDimens.homeSecondaryFilterVisualSize, - child: const Icon( - Icons.filter_list_rounded, - color: AppColors.textTertiary, - size: AppDimens.homeSecondaryFilterIcon, + child: const Center( + child: CustomPaint( + key: Key('home-secondary-filter-icon'), + size: Size.square(AppDimens.homeSecondaryFilterIcon), + painter: _ThreeLineFilterPainter(), + ), ), ), ), @@ -395,3 +397,26 @@ class HomeGridHeader extends StatelessWidget { ); } } + +class _ThreeLineFilterPainter extends CustomPainter { + const _ThreeLineFilterPainter(); + + @override + void paint(Canvas canvas, Size size) { + final paint = Paint() + ..color = AppColors.textFilterIcon + ..strokeWidth = AppDimens.homeSecondaryFilterStroke + ..strokeCap = StrokeCap.butt; + final positions = [ + size.height * 0.25, + size.height * 0.5, + size.height * 0.75, + ]; + for (final y in positions) { + canvas.drawLine(Offset(0, y), Offset(size.width, y), paint); + } + } + + @override + bool shouldRepaint(_ThreeLineFilterPainter oldDelegate) => false; +} diff --git a/test/home/home_preview_layout_test.dart b/test/home/home_preview_layout_test.dart index 4397be8..17bc0a6 100644 --- a/test/home/home_preview_layout_test.dart +++ b/test/home/home_preview_layout_test.dart @@ -98,14 +98,22 @@ void main() { tester.getSize(find.byKey(const Key('home-grid-filter'))), const Size.square(AppDimens.tapTarget), ); - final filterIcon = tester.widget( - find.descendant( - of: find.byKey(const Key('home-grid-filter')), - matching: find.byIcon(Icons.filter_list_rounded), - ), + final filterIcon = tester.widget( + find.byKey(const Key('home-secondary-filter-icon')), ); - expect(filterIcon.size, AppDimens.homeSecondaryFilterIcon); - expect(filterIcon.color, AppColors.textTertiary); + expect( + filterIcon.size, + const Size.square(AppDimens.homeSecondaryFilterIcon), + ); + final filterMaterial = tester.widget( + find + .ancestor( + of: find.byKey(const Key('home-grid-filter')), + matching: find.byType(Material), + ) + .first, + ); + expect(filterMaterial.color, AppColors.transparent); final searchBox = find.descendant( of: find.byKey(const Key('home-search-entry')), matching: find.byType(Container),