From 91f4de01a18e000bb7c50d23b45fa7153827ee60 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Thu, 22 Oct 2026 18:34:11 +0800 Subject: [PATCH] =?UTF-8?q?fix(home):=20=E8=B0=83=E6=95=B4=E7=9F=AD?= =?UTF-8?q?=E5=89=A7=E5=B0=81=E9=9D=A2=E6=AF=94=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/PROGRESS.md | 2 +- lib/core/theme/app_dimens.dart | 2 +- lib/pages/home/widgets/home_feed_grid.dart | 4 +++- lib/pages/recommend/widgets/all_dramas_filter_grid.dart | 4 +++- test/home/home_card_style_test.dart | 5 ++++- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md index 7147d33..65e44c5 100644 --- a/docs/plans/PROGRESS.md +++ b/docs/plans/PROGRESS.md @@ -1112,7 +1112,7 @@ $ flutter test ## 2026-10-22 首页布局对齐修正 - 一级分类页内切换 6 个列表，未选 18/w400 `#B0B0B0`、选中 20/w700 白字，无下划线；二级 chips 仅精选显示。 -- 四类卡片去底板/描边，封面 8 圆角、行距 10、封底标题间距 6；热剧/新剧/漫剧角标为右上角 16 高紧凑异形丝带。 +- 四类卡片去底板/描边，封面统一 3:4、8 圆角、行距 10、封底标题间距 6；状态角标为右上角紧凑异形丝带。 - 标题下方恢复左对齐题材文字，使用 `|` 分隔、灰色小字，与封面状态角标保持独立。 - 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10；非精选 tab 直接以 10 衔接网格。 - 播放量贴封面右下角（底 2、右 6），火焰图标 11 + 12/w400 纯文字，间距 4，并保留极淡底部渐变。 diff --git a/lib/core/theme/app_dimens.dart b/lib/core/theme/app_dimens.dart index d60bb05..e581022 100644 --- a/lib/core/theme/app_dimens.dart +++ b/lib/core/theme/app_dimens.dart @@ -99,7 +99,7 @@ abstract final class AppDimens { static const double cardBadgeFont = 9; static const double cardCoverTitleGap = 6; static const double cardTitleTagGap = 6; - static const double cardCoverAspectRatio = 5 / 6; + static const double cardCoverAspectRatio = 3 / 4; static const double homeCardBodyExtent = 84; static const double homePrimaryTabFont = 18; static const double homePrimaryTabSelectedFont = 20; diff --git a/lib/pages/home/widgets/home_feed_grid.dart b/lib/pages/home/widgets/home_feed_grid.dart index 238ad04..23b9b9f 100644 --- a/lib/pages/home/widgets/home_feed_grid.dart +++ b/lib/pages/home/widgets/home_feed_grid.dart @@ -129,7 +129,9 @@ class _HomeFeedGridState extends State { AppDimens.feedPageHorizontal * 2 - AppDimens.homeGridGap * 2) / 3; - final itemExtent = itemWidth * 6 / 5 + AppDimens.homeCardBodyExtent; + final itemExtent = + itemWidth / AppDimens.cardCoverAspectRatio + + AppDimens.homeCardBodyExtent; return NotificationListener( onNotification: _onScroll, child: AppPullToRefresh( diff --git a/lib/pages/recommend/widgets/all_dramas_filter_grid.dart b/lib/pages/recommend/widgets/all_dramas_filter_grid.dart index 8ce56e4..059e47b 100644 --- a/lib/pages/recommend/widgets/all_dramas_filter_grid.dart +++ b/lib/pages/recommend/widgets/all_dramas_filter_grid.dart @@ -52,7 +52,9 @@ class _AllDramasFilterGridState extends State { AppDimens.feedPageHorizontal * 2 - AppDimens.homeGridGap * 2) / 3; - final itemExtent = itemWidth * 6 / 5 + AppDimens.homeCardBodyExtent; + final itemExtent = + itemWidth / AppDimens.cardCoverAspectRatio + + AppDimens.homeCardBodyExtent; return NotificationListener( onNotification: _onScroll, child: AppPullToRefresh( diff --git a/test/home/home_card_style_test.dart b/test/home/home_card_style_test.dart index 9dd5902..12e0dcb 100644 --- a/test/home/home_card_style_test.dart +++ b/test/home/home_card_style_test.dart @@ -40,7 +40,10 @@ void main() { final cover = find.byKey(const Key('home-feed-cover-anime-card')); final coverSize = tester.getSize(cover); - expect(coverSize.height / coverSize.width, closeTo(6 / 5, 0.02)); + expect( + coverSize.height / coverSize.width, + closeTo(1 / AppDimens.cardCoverAspectRatio, 0.02), + ); final coverClip = tester.widget( find.byKey(const Key('home-feed-cover-clip-anime-card')), );