fix(flutter): 放大播放图标并加半透明底
This commit is contained in:
1 parent
8013cc18ad
commit
a72adcfc3f
2 files changed
+16
-9
No files matched your search
@@ -4,8 +4,9 @@ import 'package:flutter/material.dart';
|
|||||||
|
|
||||||
import '../../../core/theme/app_colors.dart';
|
import '../../../core/theme/app_colors.dart';
|
||||||
|
|
||||||
const double _toggleSize = 72;
|
const double _toggleSize = 84;
|
||||||
const double _iconSize = 40;
|
const double _iconSize = 48;
|
||||||
|
const Color _toggleBackground = Colors.black26;
|
||||||
const List<Shadow> _iconShadows = [
|
const List<Shadow> _iconShadows = [
|
||||||
Shadow(color: Colors.black54, blurRadius: 12),
|
Shadow(color: Colors.black54, blurRadius: 12),
|
||||||
];
|
];
|
||||||
@@ -28,9 +29,13 @@ class PlayerCenterToggle extends StatelessWidget {
|
|||||||
label: playing ? 'Pause' : 'Play',
|
label: playing ? 'Pause' : 'Play',
|
||||||
child: GestureDetector(
|
child: GestureDetector(
|
||||||
onTap: onTap,
|
onTap: onTap,
|
||||||
child: SizedBox(
|
child: Container(
|
||||||
width: _toggleSize,
|
width: _toggleSize,
|
||||||
height: _toggleSize,
|
height: _toggleSize,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: _toggleBackground,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
child: Icon(
|
child: Icon(
|
||||||
playing ? Icons.pause_rounded : Icons.play_arrow_rounded,
|
playing ? Icons.pause_rounded : Icons.play_arrow_rounded,
|
||||||
color: AppColors.onPrimary,
|
color: AppColors.onPrimary,
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import 'package:fruitshorts/core/theme/app_colors.dart';
|
|||||||
import 'package:fruitshorts/pages/player/widgets/player_center_toggle.dart';
|
import 'package:fruitshorts/pages/player/widgets/player_center_toggle.dart';
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
testWidgets('should_use_one_shared_72px_transparent_toggle_style', (
|
testWidgets('should_use_one_shared_84px_translucent_toggle_style', (
|
||||||
tester,
|
tester,
|
||||||
) async {
|
) async {
|
||||||
await tester.pumpWidget(
|
await tester.pumpWidget(
|
||||||
@@ -34,16 +34,18 @@ void main() {
|
|||||||
Key('test-center-toggle-a'),
|
Key('test-center-toggle-a'),
|
||||||
Key('player-play-toggle'),
|
Key('player-play-toggle'),
|
||||||
]) {
|
]) {
|
||||||
expect(tester.getSize(find.byKey(key)), const Size(72, 72));
|
expect(tester.getSize(find.byKey(key)), const Size(84, 84));
|
||||||
// 暂停按钮改为透明背景,容器已不再绘制任何底色或装饰。
|
// 圆形底改为半透明黑色,不再是完全透明或蓝色实底。
|
||||||
expect(
|
final container = tester.widget<Container>(
|
||||||
find.descendant(of: find.byKey(key), matching: find.byType(Container)),
|
find.descendant(of: find.byKey(key), matching: find.byType(Container)),
|
||||||
findsNothing,
|
|
||||||
);
|
);
|
||||||
|
final decoration = container.decoration! as BoxDecoration;
|
||||||
|
expect(decoration.color, Colors.black26);
|
||||||
|
expect(decoration.shape, BoxShape.circle);
|
||||||
final icon = tester.widget<Icon>(
|
final icon = tester.widget<Icon>(
|
||||||
find.descendant(of: find.byKey(key), matching: find.byType(Icon)),
|
find.descendant(of: find.byKey(key), matching: find.byType(Icon)),
|
||||||
);
|
);
|
||||||
expect(icon.size, 40);
|
expect(icon.size, 48);
|
||||||
expect(icon.color, AppColors.onPrimary);
|
expect(icon.color, AppColors.onPrimary);
|
||||||
expect(icon.shadows, isNotNull);
|
expect(icon.shadows, isNotNull);
|
||||||
expect(icon.shadows, isNotEmpty);
|
expect(icon.shadows, isNotEmpty);
|
||||||
|
|||||||
Reference in new issue
Block a user