162 lines
4.9 KiB
Dart
162 lines
4.9 KiB
Dart
// Author: fruit.com.cn
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import '../theme/app_colors.dart';
|
|
|
|
const double _height = 52;
|
|
const double _heightWithSubtitle = 64;
|
|
const double _horizontal = 14;
|
|
const double _backSize = 40;
|
|
const double _backGap = 12;
|
|
const double _titleFontSize = 18;
|
|
const double _subtitleFontSize = 12;
|
|
const double _actionGap = 8;
|
|
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);
|
|
|
|
/// 二级页面统一返回按钮，浅色页使用白底描边，深色页使用半透明黑底。
|
|
class AppSubpageBackButton extends StatelessWidget {
|
|
const AppSubpageBackButton({
|
|
super.key,
|
|
required this.backKey,
|
|
this.dark = false,
|
|
this.onBack,
|
|
});
|
|
|
|
final Key backKey;
|
|
final bool dark;
|
|
final VoidCallback? onBack;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
key: backKey,
|
|
width: _backSize,
|
|
height: _backSize,
|
|
child: Tooltip(
|
|
message: MaterialLocalizations.of(context).backButtonTooltip,
|
|
child: DecoratedBox(
|
|
key: const Key('subpage-back-shadow'),
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: dark ? _darkShadowColor : _lightShadowColor,
|
|
blurRadius: _shadowBlur,
|
|
offset: dark ? Offset.zero : _lightShadowOffset,
|
|
),
|
|
],
|
|
),
|
|
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,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 二级页面统一页头：返回按钮、左对齐标题、可选副标题与右侧操作。
|
|
class AppSubpageHeader extends StatelessWidget {
|
|
const AppSubpageHeader({
|
|
super.key,
|
|
required this.title,
|
|
required this.backKey,
|
|
this.subtitle,
|
|
this.actions,
|
|
this.onBack,
|
|
this.dark = false,
|
|
});
|
|
|
|
final String title;
|
|
final Key backKey;
|
|
final String? subtitle;
|
|
final Widget? actions;
|
|
final VoidCallback? onBack;
|
|
final bool dark;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final foreground = dark ? Colors.white : AppColors.onSurface;
|
|
final secondary = dark ? Colors.white70 : AppColors.muted;
|
|
return SizedBox(
|
|
key: const Key('subpage-header'),
|
|
height: subtitle == null ? _height : _heightWithSubtitle,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: _horizontal),
|
|
child: Row(
|
|
children: [
|
|
AppSubpageBackButton(backKey: backKey, dark: dark, onBack: onBack),
|
|
const SizedBox(width: _backGap),
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
key: const Key('subpage-title'),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
color: foreground,
|
|
fontSize: _titleFontSize,
|
|
fontWeight: FontWeight.w800,
|
|
),
|
|
),
|
|
if (subtitle != null) ...[
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
subtitle!,
|
|
key: const Key('subpage-subtitle'),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
color: secondary,
|
|
fontSize: _subtitleFontSize,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
if (actions != null) ...[
|
|
const SizedBox(width: _actionGap),
|
|
actions!,
|
|
],
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|