fix(home): 修正封面角标与题材标签
This commit is contained in:
1 parent
3abf69e886
commit
e16faa258a
10 files changed
+199
-199
No files matched your search
@@ -0,0 +1,69 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_dimens.dart';
|
||||
|
||||
/// 封面右上角的斜边状态角标。
|
||||
class DramaCoverBadgeRibbon extends StatelessWidget {
|
||||
const DramaCoverBadgeRibbon({
|
||||
super.key,
|
||||
required this.label,
|
||||
required this.color,
|
||||
required this.keyPrefix,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final Color color;
|
||||
final String keyPrefix;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipPath(
|
||||
key: Key('drama-cover-badge-ribbon-$keyPrefix'),
|
||||
clipper: const _SlantedRibbonClipper(),
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: AppDimens.cardGenreRibbonMaxWidth,
|
||||
),
|
||||
height: AppDimens.cardGenreRibbonHeight,
|
||||
padding: const EdgeInsets.only(
|
||||
left:
|
||||
AppDimens.cardTagHorizontalPadding +
|
||||
AppDimens.cardGenreRibbonLeftInset,
|
||||
right: AppDimens.cardTagHorizontalPadding,
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
color: color,
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.cardBadgeFont,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SlantedRibbonClipper extends CustomClipper<Path> {
|
||||
const _SlantedRibbonClipper();
|
||||
|
||||
@override
|
||||
Path getClip(Size size) {
|
||||
return Path()
|
||||
..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
|
||||
..lineTo(size.width, 0)
|
||||
..lineTo(size.width, size.height)
|
||||
..lineTo(0, size.height)
|
||||
..close();
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_dimens.dart';
|
||||
|
||||
const List<Color> _ribbonColors = [
|
||||
AppColors.badgeHot,
|
||||
AppColors.badgeNew,
|
||||
AppColors.badgeAnime,
|
||||
];
|
||||
|
||||
/// 封面右上角的斜边题材丝带。
|
||||
class DramaGenreRibbon extends StatelessWidget {
|
||||
const DramaGenreRibbon({
|
||||
super.key,
|
||||
required this.tags,
|
||||
required this.keyPrefix,
|
||||
});
|
||||
|
||||
final List<String> tags;
|
||||
final String keyPrefix;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final visible = tags
|
||||
.map((tag) => tag.trim())
|
||||
.where((tag) => tag.isNotEmpty)
|
||||
.take(3)
|
||||
.toList(growable: false);
|
||||
if (visible.isEmpty) return const SizedBox.shrink();
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (final (index, tag) in visible.indexed) ...[
|
||||
if (index > 0) const SizedBox(height: 2),
|
||||
ClipPath(
|
||||
key: Key('drama-genre-ribbon-$keyPrefix-$index'),
|
||||
clipper: const _SlantedRibbonClipper(),
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: AppDimens.cardGenreRibbonMaxWidth,
|
||||
),
|
||||
height: AppDimens.cardGenreRibbonHeight,
|
||||
padding: const EdgeInsets.only(
|
||||
left:
|
||||
AppDimens.cardTagHorizontalPadding +
|
||||
AppDimens.cardGenreRibbonLeftInset,
|
||||
right: AppDimens.cardTagHorizontalPadding,
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
color: _ribbonColors[index % _ribbonColors.length],
|
||||
child: Text(
|
||||
tag,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.cardBadgeFont,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SlantedRibbonClipper extends CustomClipper<Path> {
|
||||
const _SlantedRibbonClipper();
|
||||
|
||||
@override
|
||||
Path getClip(Size size) {
|
||||
return Path()
|
||||
..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
|
||||
..lineTo(size.width, 0)
|
||||
..lineTo(size.width, size.height)
|
||||
..lineTo(0, size.height)
|
||||
..close();
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
|
||||
}
|
||||
Reference in new issue
Block a user