feat: 新增 AppLoadingIndicator 和 AppPressable 组件
- 新增 AppLoadingIndicator 加载指示器组件 - 新增 AppPressable 按压反馈组件 - 新增 AppSheetInputField 输入框组件 - 更新 AppButton 和其他共享组件
This commit is contained in:
@@ -17,6 +17,7 @@ class PageHeader extends StatelessWidget {
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
leading ?? const SizedBox.shrink(),
|
||||
trailing ?? const SizedBox.shrink(),
|
||||
@@ -27,30 +28,91 @@ class PageHeader extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class BackButton extends StatelessWidget {
|
||||
class BackButton extends StatefulWidget {
|
||||
final VoidCallback? onPressed;
|
||||
|
||||
const BackButton({super.key, this.onPressed});
|
||||
|
||||
@override
|
||||
State<BackButton> createState() => _BackButtonState();
|
||||
}
|
||||
|
||||
class _BackButtonState extends State<BackButton> {
|
||||
bool _isPressed = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: AppSpacing.xxl * 2,
|
||||
height: AppSpacing.xxl * 2,
|
||||
child: TextButton(
|
||||
onPressed: onPressed ?? () => Navigator.of(context).pop(),
|
||||
style: TextButton.styleFrom(
|
||||
padding: const EdgeInsets.all(AppSpacing.none),
|
||||
backgroundColor: AppColors.surfaceTertiary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
side: const BorderSide(color: AppColors.borderTertiary),
|
||||
),
|
||||
final background = _isPressed ? AppColors.surfaceInfo : AppColors.white;
|
||||
final borderColor = _isPressed
|
||||
? AppColors.borderQuaternary
|
||||
: AppColors.borderTertiary;
|
||||
|
||||
return AnimatedScale(
|
||||
scale: _isPressed ? 0.96 : 1,
|
||||
duration: const Duration(milliseconds: 110),
|
||||
curve: Curves.easeOut,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 110),
|
||||
decoration: BoxDecoration(
|
||||
color: background,
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
border: Border.all(color: borderColor),
|
||||
boxShadow: _isPressed
|
||||
? const []
|
||||
: [
|
||||
const BoxShadow(
|
||||
color: AppColors.white,
|
||||
blurRadius: AppRadius.sm,
|
||||
offset: Offset(0, -1),
|
||||
),
|
||||
BoxShadow(
|
||||
color: AppColors.slate200.withValues(alpha: 0.42),
|
||||
blurRadius: AppRadius.md,
|
||||
offset: const Offset(0, AppSpacing.xs),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.chevron_left,
|
||||
size: AppSpacing.lg + AppSpacing.xs,
|
||||
color: AppColors.slate700,
|
||||
child: SizedBox(
|
||||
width: AppSpacing.xl * 2,
|
||||
height: AppSpacing.xl * 2,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
onTap: widget.onPressed ?? () => Navigator.of(context).pop(),
|
||||
onTapDown: (_) {
|
||||
if (_isPressed) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_isPressed = true;
|
||||
});
|
||||
},
|
||||
onTapCancel: () {
|
||||
if (!_isPressed) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_isPressed = false;
|
||||
});
|
||||
},
|
||||
onTapUp: (_) {
|
||||
if (!_isPressed) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_isPressed = false;
|
||||
});
|
||||
},
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.chevron_left,
|
||||
size: AppSpacing.lg + AppSpacing.xs,
|
||||
color: _isPressed ? AppColors.blue600 : AppColors.slate700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user