fix(home): 重绘二级筛选三线图标
This commit is contained in:
1 parent
8197abd55d
commit
448010115f
5 files changed
+48
-13
No files matched your search
@@ -1111,7 +1111,7 @@ $ flutter test
|
|||||||
|
|
||||||
## 2026-10-22 首页布局对齐修正
|
## 2026-10-22 首页布局对齐修正
|
||||||
|
|
||||||
- 一级分类页内切换 6 个列表,未选 18/w400、选中 20/w700;二级 chips 与 26 高筛选按钮仅在精选显示。
|
- 一级分类未选 18/w400、选中 20/w700;二级 chips 与 26 高透明三线筛选图标仅在精选显示。
|
||||||
- 四类卡片去底板/描边,封面统一 3:4、8 圆角、行距 10、封底标题间距 6;状态角标为右上角紧凑异形丝带。
|
- 四类卡片去底板/描边,封面统一 3:4、8 圆角、行距 10、封底标题间距 6;状态角标为右上角紧凑异形丝带。
|
||||||
- 标题下方恢复左对齐题材文字,使用 `|` 分隔、灰色小字,与封面状态角标保持独立。
|
- 标题下方恢复左对齐题材文字,使用 `|` 分隔、灰色小字,与封面状态角标保持独立。
|
||||||
- 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10;非精选 tab 直接以 10 衔接网格。
|
- 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10;非精选 tab 直接以 10 衔接网格。
|
||||||
|
|||||||
@@ -81,6 +81,7 @@ abstract final class AppColors {
|
|||||||
static const textSecondary = Color(0xFF8E8E93);
|
static const textSecondary = Color(0xFF8E8E93);
|
||||||
static const textTertiary = Color(0xFF9E9E9E);
|
static const textTertiary = Color(0xFF9E9E9E);
|
||||||
static const textTabInactive = Color(0xFFB0B0B0);
|
static const textTabInactive = Color(0xFFB0B0B0);
|
||||||
|
static const textFilterIcon = Color(0xFF7A7A7E);
|
||||||
|
|
||||||
/// 原生开屏与冷启动过渡底色。
|
/// 原生开屏与冷启动过渡底色。
|
||||||
static const splashInk = ink;
|
static const splashInk = ink;
|
||||||
|
|||||||
@@ -113,7 +113,8 @@ abstract final class AppDimens {
|
|||||||
static const double homeSecondaryTagRadius = 13;
|
static const double homeSecondaryTagRadius = 13;
|
||||||
static const double homeSecondaryFilterGap = 8;
|
static const double homeSecondaryFilterGap = 8;
|
||||||
static const double homeSecondaryFilterVisualSize = 26;
|
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 homePrimaryCategoryGap = 24;
|
||||||
static const double homeSecondaryTagGap = 14;
|
static const double homeSecondaryTagGap = 14;
|
||||||
static const double homeSearchTopGap = 0;
|
static const double homeSearchTopGap = 0;
|
||||||
|
|||||||
@@ -342,10 +342,12 @@ class HomeGridHeader extends StatelessWidget {
|
|||||||
child: Center(
|
child: Center(
|
||||||
child: SizedBox.square(
|
child: SizedBox.square(
|
||||||
dimension: AppDimens.homeSecondaryFilterVisualSize,
|
dimension: AppDimens.homeSecondaryFilterVisualSize,
|
||||||
child: const Icon(
|
child: const Center(
|
||||||
Icons.filter_list_rounded,
|
child: CustomPaint(
|
||||||
color: AppColors.textTertiary,
|
key: Key('home-secondary-filter-icon'),
|
||||||
size: AppDimens.homeSecondaryFilterIcon,
|
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;
|
||||||
|
}
|
||||||
@@ -98,14 +98,22 @@ void main() {
|
|||||||
tester.getSize(find.byKey(const Key('home-grid-filter'))),
|
tester.getSize(find.byKey(const Key('home-grid-filter'))),
|
||||||
const Size.square(AppDimens.tapTarget),
|
const Size.square(AppDimens.tapTarget),
|
||||||
);
|
);
|
||||||
final filterIcon = tester.widget<Icon>(
|
final filterIcon = tester.widget<CustomPaint>(
|
||||||
find.descendant(
|
find.byKey(const Key('home-secondary-filter-icon')),
|
||||||
of: find.byKey(const Key('home-grid-filter')),
|
|
||||||
matching: find.byIcon(Icons.filter_list_rounded),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
expect(filterIcon.size, AppDimens.homeSecondaryFilterIcon);
|
expect(
|
||||||
expect(filterIcon.color, AppColors.textTertiary);
|
filterIcon.size,
|
||||||
|
const Size.square(AppDimens.homeSecondaryFilterIcon),
|
||||||
|
);
|
||||||
|
final filterMaterial = tester.widget<Material>(
|
||||||
|
find
|
||||||
|
.ancestor(
|
||||||
|
of: find.byKey(const Key('home-grid-filter')),
|
||||||
|
matching: find.byType(Material),
|
||||||
|
)
|
||||||
|
.first,
|
||||||
|
);
|
||||||
|
expect(filterMaterial.color, AppColors.transparent);
|
||||||
final searchBox = find.descendant(
|
final searchBox = find.descendant(
|
||||||
of: find.byKey(const Key('home-search-entry')),
|
of: find.byKey(const Key('home-search-entry')),
|
||||||
matching: find.byType(Container),
|
matching: find.byType(Container),
|
||||||
|
|||||||
Reference in new issue
Block a user