fix(flutter): 优化二级页面返回按钮样式
This commit is contained in:
1 parent
457d2fa6f2
commit
8493c4ef3b
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 _heightWithSubtitle = 64;
|
||||
const double _horizontal = 14;
|
||||
const double _backSize = 36;
|
||||
const double _backSize = 40;
|
||||
const double _backGap = 12;
|
||||
const double _titleFontSize = 18;
|
||||
const double _subtitleFontSize = 12;
|
||||
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 {
|
||||
const AppSubpageBackButton({
|
||||
super.key,
|
||||
@@ -35,16 +42,40 @@ class AppSubpageBackButton extends StatelessWidget {
|
||||
height: _backSize,
|
||||
child: Tooltip(
|
||||
message: MaterialLocalizations.of(context).backButtonTooltip,
|
||||
child: Material(
|
||||
color: dark ? Colors.transparent : AppColors.card,
|
||||
shape: const CircleBorder(),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onBack ?? () => Navigator.of(context).maybePop(),
|
||||
child: Icon(
|
||||
Icons.chevron_left_rounded,
|
||||
color: dark ? Colors.white : AppColors.onSurface,
|
||||
size: _iconSize,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in new issue
Block a user