merge: 合并 K39 返回按钮优化
This commit is contained in:
commit
a5c84b0297
7 files changed
+95
-21
No files matched your search
@@ -7,14 +7,21 @@ import '../theme/app_colors.dart';
|
|||||||
const double _height = 52;
|
const double _height = 52;
|
||||||
const double _heightWithSubtitle = 64;
|
const double _heightWithSubtitle = 64;
|
||||||
const double _horizontal = 14;
|
const double _horizontal = 14;
|
||||||
const double _backSize = 36;
|
const double _backSize = 40;
|
||||||
const double _backGap = 12;
|
const double _backGap = 12;
|
||||||
const double _titleFontSize = 18;
|
const double _titleFontSize = 18;
|
||||||
const double _subtitleFontSize = 12;
|
const double _subtitleFontSize = 12;
|
||||||
const double _actionGap = 8;
|
const double _actionGap = 8;
|
||||||
const double _iconSize = 20;
|
const double _iconSize = 22;
|
||||||
|
const double _iconWeight = 600;
|
||||||
|
const double _borderWidth = 1;
|
||||||
|
const double _shadowBlur = 8;
|
||||||
|
const Color _lightShadowColor = Color(0x14000000);
|
||||||
|
const Color _darkBackground = Color(0x59000000);
|
||||||
|
const Color _darkShadowColor = Color(0x33000000);
|
||||||
|
const Offset _lightShadowOffset = Offset(0, 2);
|
||||||
|
|
||||||
/// 二级页面统一返回按钮,浅色页使用 card 圆底,深色页使用透明底。
|
/// 二级页面统一返回按钮,浅色页使用白底描边,深色页使用半透明黑底。
|
||||||
class AppSubpageBackButton extends StatelessWidget {
|
class AppSubpageBackButton extends StatelessWidget {
|
||||||
const AppSubpageBackButton({
|
const AppSubpageBackButton({
|
||||||
super.key,
|
super.key,
|
||||||
@@ -35,16 +42,40 @@ class AppSubpageBackButton extends StatelessWidget {
|
|||||||
height: _backSize,
|
height: _backSize,
|
||||||
child: Tooltip(
|
child: Tooltip(
|
||||||
message: MaterialLocalizations.of(context).backButtonTooltip,
|
message: MaterialLocalizations.of(context).backButtonTooltip,
|
||||||
child: Material(
|
child: DecoratedBox(
|
||||||
color: dark ? Colors.transparent : AppColors.card,
|
key: const Key('subpage-back-shadow'),
|
||||||
shape: const CircleBorder(),
|
decoration: BoxDecoration(
|
||||||
clipBehavior: Clip.antiAlias,
|
shape: BoxShape.circle,
|
||||||
child: InkWell(
|
boxShadow: [
|
||||||
onTap: onBack ?? () => Navigator.of(context).maybePop(),
|
BoxShadow(
|
||||||
child: Icon(
|
color: dark ? _darkShadowColor : _lightShadowColor,
|
||||||
Icons.chevron_left_rounded,
|
blurRadius: _shadowBlur,
|
||||||
color: dark ? Colors.white : AppColors.onSurface,
|
offset: dark ? Offset.zero : _lightShadowOffset,
|
||||||
size: _iconSize,
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Material(
|
||||||
|
color: dark ? _darkBackground : AppColors.card,
|
||||||
|
shape: CircleBorder(
|
||||||
|
side: dark
|
||||||
|
? BorderSide.none
|
||||||
|
: const BorderSide(
|
||||||
|
color: AppColors.border,
|
||||||
|
width: _borderWidth,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
clipBehavior: Clip.antiAlias,
|
||||||
|
child: InkWell(
|
||||||
|
customBorder: const CircleBorder(),
|
||||||
|
onTap: onBack ?? () => Navigator.of(context).maybePop(),
|
||||||
|
child: Center(
|
||||||
|
child: Icon(
|
||||||
|
Icons.chevron_left_rounded,
|
||||||
|
color: dark ? Colors.white : AppColors.onSurface,
|
||||||
|
size: _iconSize,
|
||||||
|
weight: _iconWeight,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ void main() {
|
|||||||
expect(tester.getSize(find.byKey(const Key('subpage-header'))).height, 52);
|
expect(tester.getSize(find.byKey(const Key('subpage-header'))).height, 52);
|
||||||
expect(
|
expect(
|
||||||
tester.getSize(find.byKey(const Key('sample-back'))),
|
tester.getSize(find.byKey(const Key('sample-back'))),
|
||||||
const Size(36, 36),
|
const Size(40, 40),
|
||||||
);
|
);
|
||||||
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
||||||
expect(title.style?.fontSize, 18);
|
expect(title.style?.fontSize, 18);
|
||||||
@@ -32,6 +32,24 @@ void main() {
|
|||||||
final back = tester.getRect(find.byKey(const Key('sample-back')));
|
final back = tester.getRect(find.byKey(const Key('sample-back')));
|
||||||
final titleRect = tester.getRect(find.byKey(const Key('subpage-title')));
|
final titleRect = tester.getRect(find.byKey(const Key('subpage-title')));
|
||||||
expect(titleRect.left - back.right, closeTo(12, 0.5));
|
expect(titleRect.left - back.right, closeTo(12, 0.5));
|
||||||
|
final surface = tester.widget<Material>(
|
||||||
|
find.descendant(
|
||||||
|
of: find.byKey(const Key('sample-back')),
|
||||||
|
matching: find.byType(Material),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
expect(surface.color, AppColors.card);
|
||||||
|
expect((surface.shape! as CircleBorder).side.color, AppColors.border);
|
||||||
|
final shadow =
|
||||||
|
tester
|
||||||
|
.widget<DecoratedBox>(
|
||||||
|
find.byKey(const Key('subpage-back-shadow')),
|
||||||
|
)
|
||||||
|
.decoration
|
||||||
|
as BoxDecoration;
|
||||||
|
expect(shadow.boxShadow!.single.color, const Color(0x14000000));
|
||||||
|
expect(shadow.boxShadow!.single.blurRadius, 8);
|
||||||
|
expect(shadow.boxShadow!.single.offset, const Offset(0, 2));
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('should_use_64_height_when_subtitle_exists', (tester) async {
|
testWidgets('should_use_64_height_when_subtitle_exists', (tester) async {
|
||||||
@@ -52,7 +70,7 @@ void main() {
|
|||||||
expect(find.byKey(const Key('subpage-subtitle')), findsOneWidget);
|
expect(find.byKey(const Key('subpage-subtitle')), findsOneWidget);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('should_use_transparent_dark_back_button', (tester) async {
|
testWidgets('should_use_translucent_dark_back_button', (tester) async {
|
||||||
await tester.pumpWidget(
|
await tester.pumpWidget(
|
||||||
MaterialApp(
|
MaterialApp(
|
||||||
theme: AppTheme.light(),
|
theme: AppTheme.light(),
|
||||||
@@ -79,8 +97,18 @@ void main() {
|
|||||||
matching: find.byIcon(Icons.chevron_left_rounded),
|
matching: find.byIcon(Icons.chevron_left_rounded),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
expect(material.color, Colors.transparent);
|
expect(material.color, const Color(0x59000000));
|
||||||
expect(icon.color, Colors.white);
|
expect(icon.color, Colors.white);
|
||||||
expect(icon.size, 20);
|
expect(icon.size, 22);
|
||||||
|
expect(icon.weight, 600);
|
||||||
|
final shadow =
|
||||||
|
tester
|
||||||
|
.widget<DecoratedBox>(
|
||||||
|
find.byKey(const Key('subpage-back-shadow')),
|
||||||
|
)
|
||||||
|
.decoration
|
||||||
|
as BoxDecoration;
|
||||||
|
expect(shadow.boxShadow!.single.color, const Color(0x33000000));
|
||||||
|
expect(shadow.boxShadow!.single.blurRadius, 8);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -186,7 +186,7 @@ final List<Drama> _filterDramas = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
void _expectUnifiedHeader(WidgetTester tester, Key backKey) {
|
void _expectUnifiedHeader(WidgetTester tester, Key backKey) {
|
||||||
expect(tester.getSize(find.byKey(backKey)), const Size(36, 36));
|
expect(tester.getSize(find.byKey(backKey)), const Size(40, 40));
|
||||||
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
||||||
expect(title.style?.fontSize, 18);
|
expect(title.style?.fontSize, 18);
|
||||||
expect(title.style?.fontWeight, FontWeight.w800);
|
expect(title.style?.fontWeight, FontWeight.w800);
|
||||||
|
|||||||
@@ -220,7 +220,7 @@ List<Drama> _rankDramas(int count) => [
|
|||||||
];
|
];
|
||||||
|
|
||||||
void _expectUnifiedHeader(WidgetTester tester, Key backKey) {
|
void _expectUnifiedHeader(WidgetTester tester, Key backKey) {
|
||||||
expect(tester.getSize(find.byKey(backKey)), const Size(36, 36));
|
expect(tester.getSize(find.byKey(backKey)), const Size(40, 40));
|
||||||
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
||||||
expect(title.style?.fontSize, 18);
|
expect(title.style?.fontSize, 18);
|
||||||
expect(title.style?.fontWeight, FontWeight.w800);
|
expect(title.style?.fontWeight, FontWeight.w800);
|
||||||
|
|||||||
@@ -58,6 +58,21 @@ void main() {
|
|||||||
tester.getSize(find.byKey(const Key('detail-poster'))),
|
tester.getSize(find.byKey(const Key('detail-poster'))),
|
||||||
const Size(96, 128),
|
const Size(96, 128),
|
||||||
);
|
);
|
||||||
|
expect(
|
||||||
|
tester.getSize(find.byKey(const Key('detail-back'))),
|
||||||
|
const Size(40, 40),
|
||||||
|
);
|
||||||
|
expect(
|
||||||
|
tester
|
||||||
|
.widget<Material>(
|
||||||
|
find.descendant(
|
||||||
|
of: find.byKey(const Key('detail-back')),
|
||||||
|
matching: find.byType(Material),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.color,
|
||||||
|
const Color(0x59000000),
|
||||||
|
);
|
||||||
expect(
|
expect(
|
||||||
tester
|
tester
|
||||||
.widget<Text>(find.byKey(const Key('detail-title')))
|
.widget<Text>(find.byKey(const Key('detail-title')))
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ void main() {
|
|||||||
expect(find.byKey(const Key('settings-page')), findsOneWidget);
|
expect(find.byKey(const Key('settings-page')), findsOneWidget);
|
||||||
expect(
|
expect(
|
||||||
tester.getSize(find.byKey(const Key('settings-back'))),
|
tester.getSize(find.byKey(const Key('settings-back'))),
|
||||||
const Size(36, 36),
|
const Size(40, 40),
|
||||||
);
|
);
|
||||||
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
||||||
expect(title.style?.fontSize, 18);
|
expect(title.style?.fontSize, 18);
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ void main() {
|
|||||||
expect(find.byKey(const Key('notices-page')), findsOneWidget);
|
expect(find.byKey(const Key('notices-page')), findsOneWidget);
|
||||||
expect(
|
expect(
|
||||||
tester.getSize(find.byKey(const Key('notices-back'))),
|
tester.getSize(find.byKey(const Key('notices-back'))),
|
||||||
const Size(36, 36),
|
const Size(40, 40),
|
||||||
);
|
);
|
||||||
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
final title = tester.widget<Text>(find.byKey(const Key('subpage-title')));
|
||||||
expect(title.style?.fontSize, 18);
|
expect(title.style?.fontSize, 18);
|
||||||
|
|||||||
Reference in new issue
Block a user