feat(player): 互动栏改用参考图同款图标资源
This commit is contained in:
1 parent
35de4095b0
commit
cbb9f60f7f
10 files changed
+61
-78
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 928 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1004 B |
@@ -173,8 +173,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
|||||||
items: [
|
items: [
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('rail-save'),
|
key: const Key('rail-save'),
|
||||||
icon: Icons.star_rounded,
|
asset: 'assets/icon/rail/rail_save.png',
|
||||||
activeIcon: Icons.star_rounded,
|
|
||||||
label: widget.l10n.favorite,
|
label: widget.l10n.favorite,
|
||||||
count: widget.favoriteCount,
|
count: widget.favoriteCount,
|
||||||
countKey: const Key('rail-save-count'),
|
countKey: const Key('rail-save-count'),
|
||||||
@@ -183,8 +182,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
|||||||
),
|
),
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('rail-comments'),
|
key: const Key('rail-comments'),
|
||||||
icon: Icons.chat_bubble_outline_rounded,
|
asset: 'assets/icon/rail/rail_comment.png',
|
||||||
activeIcon: Icons.chat_bubble_rounded,
|
|
||||||
label: widget.l10n.comments,
|
label: widget.l10n.comments,
|
||||||
count: widget.commentCount,
|
count: widget.commentCount,
|
||||||
countKey: const Key('rail-comments-count'),
|
countKey: const Key('rail-comments-count'),
|
||||||
@@ -192,8 +190,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
|||||||
),
|
),
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('rail-like'),
|
key: const Key('rail-like'),
|
||||||
icon: Icons.favorite_rounded,
|
asset: 'assets/icon/rail/rail_like.png',
|
||||||
activeIcon: Icons.favorite_rounded,
|
|
||||||
label: widget.l10n.like,
|
label: widget.l10n.like,
|
||||||
count: widget.likeCount,
|
count: widget.likeCount,
|
||||||
countKey: const Key('rail-like-count'),
|
countKey: const Key('rail-like-count'),
|
||||||
@@ -202,10 +199,8 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
|||||||
),
|
),
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('rail-share'),
|
key: const Key('rail-share'),
|
||||||
icon: Icons.reply_rounded,
|
asset: 'assets/icon/rail/rail_share.png',
|
||||||
activeIcon: Icons.reply_rounded,
|
|
||||||
label: widget.l10n.share,
|
label: widget.l10n.share,
|
||||||
mirrorIcon: true,
|
|
||||||
onTap: widget.onShare,
|
onTap: widget.onShare,
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -6,32 +6,28 @@ import '../../../core/formatting/count_format.dart';
|
|||||||
import '../../../core/theme/app_colors.dart';
|
import '../../../core/theme/app_colors.dart';
|
||||||
|
|
||||||
const double _buttonSize = 44;
|
const double _buttonSize = 44;
|
||||||
const double _iconSize = 30;
|
const double _iconSize = 32;
|
||||||
const double _itemGap = 22;
|
const double _itemGap = 24;
|
||||||
|
|
||||||
/// 互动栏单项:图标、计数与点击。
|
/// 互动栏单项:图标、计数与点击。
|
||||||
class InteractionRailItem {
|
class InteractionRailItem {
|
||||||
const InteractionRailItem({
|
const InteractionRailItem({
|
||||||
required this.key,
|
required this.key,
|
||||||
required this.icon,
|
required this.asset,
|
||||||
required this.activeIcon,
|
|
||||||
required this.label,
|
required this.label,
|
||||||
required this.onTap,
|
required this.onTap,
|
||||||
this.count,
|
this.count,
|
||||||
this.countKey,
|
this.countKey,
|
||||||
this.selected = false,
|
this.selected = false,
|
||||||
this.mirrorIcon = false,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
final Key key;
|
final Key key;
|
||||||
final IconData icon;
|
final String asset;
|
||||||
final IconData activeIcon;
|
|
||||||
final String label;
|
final String label;
|
||||||
final VoidCallback onTap;
|
final VoidCallback onTap;
|
||||||
final int? count;
|
final int? count;
|
||||||
final Key? countKey;
|
final Key? countKey;
|
||||||
final bool selected;
|
final bool selected;
|
||||||
final bool mirrorIcon;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 播放页与首页 feed 共用的右侧互动栏:收藏/评论/喜欢/分享。
|
/// 播放页与首页 feed 共用的右侧互动栏:收藏/评论/喜欢/分享。
|
||||||
@@ -61,10 +57,6 @@ class _RailButton extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final icon = Icon(
|
|
||||||
item.selected ? item.activeIcon : item.icon,
|
|
||||||
size: _iconSize,
|
|
||||||
);
|
|
||||||
return Column(
|
return Column(
|
||||||
key: item.key,
|
key: item.key,
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
@@ -74,10 +66,14 @@ class _RailButton extends StatelessWidget {
|
|||||||
child: IconButton(
|
child: IconButton(
|
||||||
onPressed: item.onTap,
|
onPressed: item.onTap,
|
||||||
padding: EdgeInsets.zero,
|
padding: EdgeInsets.zero,
|
||||||
color: item.selected ? AppColors.blue : Colors.white,
|
icon: Image.asset(
|
||||||
icon: item.mirrorIcon
|
item.asset,
|
||||||
? Transform.flip(flipX: true, child: icon)
|
width: _iconSize,
|
||||||
: icon,
|
height: _iconSize,
|
||||||
|
fit: BoxFit.contain,
|
||||||
|
color: item.selected ? AppColors.blue : Colors.white,
|
||||||
|
colorBlendMode: BlendMode.srcIn,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 2),
|
const SizedBox(height: 2),
|
||||||
|
|||||||
@@ -147,8 +147,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
|
|||||||
items: [
|
items: [
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('player-rail-save'),
|
key: const Key('player-rail-save'),
|
||||||
icon: Icons.star_rounded,
|
asset: 'assets/icon/rail/rail_save.png',
|
||||||
activeIcon: Icons.star_rounded,
|
|
||||||
label: data.l10n.favorite,
|
label: data.l10n.favorite,
|
||||||
count: data.favoriteCount,
|
count: data.favoriteCount,
|
||||||
countKey: const Key('player-rail-save-count'),
|
countKey: const Key('player-rail-save-count'),
|
||||||
@@ -157,8 +156,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('player-rail-comments'),
|
key: const Key('player-rail-comments'),
|
||||||
icon: Icons.chat_bubble_outline_rounded,
|
asset: 'assets/icon/rail/rail_comment.png',
|
||||||
activeIcon: Icons.chat_bubble_rounded,
|
|
||||||
label: data.l10n.comments,
|
label: data.l10n.comments,
|
||||||
count: data.commentCount,
|
count: data.commentCount,
|
||||||
countKey: const Key('player-rail-comments-count'),
|
countKey: const Key('player-rail-comments-count'),
|
||||||
@@ -166,8 +164,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('player-rail-like'),
|
key: const Key('player-rail-like'),
|
||||||
icon: Icons.favorite_rounded,
|
asset: 'assets/icon/rail/rail_like.png',
|
||||||
activeIcon: Icons.favorite_rounded,
|
|
||||||
label: data.l10n.like,
|
label: data.l10n.like,
|
||||||
count: data.likeCount,
|
count: data.likeCount,
|
||||||
countKey: const Key('player-rail-like-count'),
|
countKey: const Key('player-rail-like-count'),
|
||||||
@@ -176,10 +173,8 @@ class PlayerPlaybackOverlay extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
InteractionRailItem(
|
InteractionRailItem(
|
||||||
key: const Key('player-rail-share'),
|
key: const Key('player-rail-share'),
|
||||||
icon: Icons.reply_rounded,
|
asset: 'assets/icon/rail/rail_share.png',
|
||||||
activeIcon: Icons.reply_rounded,
|
|
||||||
label: data.l10n.share,
|
label: data.l10n.share,
|
||||||
mirrorIcon: true,
|
|
||||||
onTap: actions.onShare,
|
onTap: actions.onShare,
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -83,6 +83,7 @@ flutter:
|
|||||||
assets:
|
assets:
|
||||||
- assets/icon/splash_logo.png
|
- assets/icon/splash_logo.png
|
||||||
- assets/icon/splash_logo_android12.png
|
- assets/icon/splash_logo_android12.png
|
||||||
|
- assets/icon/rail/
|
||||||
|
|
||||||
# To add assets to your application, add an assets section, like this:
|
# To add assets to your application, add an assets section, like this:
|
||||||
# assets:
|
# assets:
|
||||||
|
|||||||
@@ -150,38 +150,33 @@ void main() {
|
|||||||
tester.widget<Text>(find.byKey(const Key('rail-comments-count'))).data,
|
tester.widget<Text>(find.byKey(const Key('rail-comments-count'))).data,
|
||||||
'12',
|
'12',
|
||||||
);
|
);
|
||||||
|
String railAsset(Key key) {
|
||||||
|
final image = tester.widget<Image>(
|
||||||
|
find.descendant(of: find.byKey(key), matching: find.byType(Image)),
|
||||||
|
);
|
||||||
|
return (image.image as AssetImage).assetName;
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(railAsset(const Key('rail-save')), 'assets/icon/rail/rail_save.png');
|
||||||
expect(
|
expect(
|
||||||
find.descendant(
|
railAsset(const Key('rail-comments')),
|
||||||
of: find.byKey(const Key('rail-save')),
|
'assets/icon/rail/rail_comment.png',
|
||||||
matching: find.byIcon(Icons.star_rounded),
|
|
||||||
),
|
|
||||||
findsOneWidget,
|
|
||||||
);
|
);
|
||||||
|
expect(railAsset(const Key('rail-like')), 'assets/icon/rail/rail_like.png');
|
||||||
expect(
|
expect(
|
||||||
find.descendant(
|
railAsset(const Key('rail-share')),
|
||||||
of: find.byKey(const Key('rail-like')),
|
'assets/icon/rail/rail_share.png',
|
||||||
matching: find.byIcon(Icons.favorite_rounded),
|
|
||||||
),
|
|
||||||
findsOneWidget,
|
|
||||||
);
|
|
||||||
expect(
|
|
||||||
find.descendant(
|
|
||||||
of: find.byKey(const Key('rail-share')),
|
|
||||||
matching: find.byIcon(Icons.reply_rounded),
|
|
||||||
),
|
|
||||||
findsOneWidget,
|
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
tester
|
tester
|
||||||
.widget<Transform>(
|
.widget<Image>(
|
||||||
find.descendant(
|
find.descendant(
|
||||||
of: find.byKey(const Key('rail-share')),
|
of: find.byKey(const Key('rail-share')),
|
||||||
matching: find.byType(Transform),
|
matching: find.byType(Image),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.transform
|
.colorBlendMode,
|
||||||
.storage[0],
|
BlendMode.srcIn,
|
||||||
-1,
|
|
||||||
);
|
);
|
||||||
expect(find.byKey(const Key('progress-loading')), findsOneWidget);
|
expect(find.byKey(const Key('progress-loading')), findsOneWidget);
|
||||||
expect(find.byKey(const Key('home-feed-progress-thumb')), findsNothing);
|
expect(find.byKey(const Key('home-feed-progress-thumb')), findsNothing);
|
||||||
|
|||||||
@@ -474,11 +474,11 @@ void main() {
|
|||||||
.getSize(
|
.getSize(
|
||||||
find.descendant(
|
find.descendant(
|
||||||
of: find.byKey(const Key('player-rail-comments')),
|
of: find.byKey(const Key('player-rail-comments')),
|
||||||
matching: find.byIcon(Icons.chat_bubble_outline_rounded),
|
matching: find.byType(Image),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.width,
|
.width,
|
||||||
30,
|
32,
|
||||||
);
|
);
|
||||||
|
|
||||||
await tester.tap(find.byKey(const Key('player-synopsis-toggle')));
|
await tester.tap(find.byKey(const Key('player-synopsis-toggle')));
|
||||||
@@ -586,37 +586,31 @@ void main() {
|
|||||||
await _pumpApp(tester);
|
await _pumpApp(tester);
|
||||||
await _openSeriesPlayer(tester);
|
await _openSeriesPlayer(tester);
|
||||||
|
|
||||||
Finder railIcon(Key key, IconData icon) =>
|
|
||||||
find.descendant(of: find.byKey(key), matching: find.byIcon(icon));
|
|
||||||
expect(
|
expect(
|
||||||
railIcon(const Key('player-rail-save'), Icons.star_rounded),
|
_railAssetName(tester, const Key('player-rail-save')),
|
||||||
findsOneWidget,
|
'assets/icon/rail/rail_save.png',
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
railIcon(const Key('player-rail-like'), Icons.favorite_rounded),
|
_railAssetName(tester, const Key('player-rail-comments')),
|
||||||
findsOneWidget,
|
'assets/icon/rail/rail_comment.png',
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
railIcon(
|
_railAssetName(tester, const Key('player-rail-like')),
|
||||||
const Key('player-rail-comments'),
|
'assets/icon/rail/rail_like.png',
|
||||||
Icons.chat_bubble_outline_rounded,
|
|
||||||
),
|
|
||||||
findsOneWidget,
|
|
||||||
);
|
);
|
||||||
final shareIcon = railIcon(
|
expect(
|
||||||
const Key('player-rail-share'),
|
_railAssetName(tester, const Key('player-rail-share')),
|
||||||
Icons.reply_rounded,
|
'assets/icon/rail/rail_share.png',
|
||||||
);
|
);
|
||||||
expect(shareIcon, findsOneWidget);
|
final shareImage = tester.widget<Image>(
|
||||||
expect(tester.widget<Icon>(shareIcon).size, 30);
|
|
||||||
|
|
||||||
final mirror = tester.widget<Transform>(
|
|
||||||
find.descendant(
|
find.descendant(
|
||||||
of: find.byKey(const Key('player-rail-share')),
|
of: find.byKey(const Key('player-rail-share')),
|
||||||
matching: find.byType(Transform),
|
matching: find.byType(Image),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
expect(mirror.transform.storage[0], -1);
|
expect(shareImage.width, 32);
|
||||||
|
expect(shareImage.height, 32);
|
||||||
|
expect(shareImage.colorBlendMode, BlendMode.srcIn);
|
||||||
|
|
||||||
final saveButton = tester.widget<IconButton>(
|
final saveButton = tester.widget<IconButton>(
|
||||||
find.descendant(
|
find.descendant(
|
||||||
@@ -1132,6 +1126,13 @@ void main() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
String _railAssetName(WidgetTester tester, Key itemKey) {
|
||||||
|
final image = tester.widget<Image>(
|
||||||
|
find.descendant(of: find.byKey(itemKey), matching: find.byType(Image)),
|
||||||
|
);
|
||||||
|
return (image.image as AssetImage).assetName;
|
||||||
|
}
|
||||||
|
|
||||||
void _expectPlayerNavigationBar(WidgetTester tester) {
|
void _expectPlayerNavigationBar(WidgetTester tester) {
|
||||||
final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
|
final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
|
||||||
find.byKey(const Key('player-system-overlay')).last,
|
find.byKey(const Key('player-system-overlay')).last,
|
||||||
|
|||||||
Reference in new issue
Block a user