feat: 新增 AppLoadingIndicator 和 AppPressable 组件

- 新增 AppLoadingIndicator 加载指示器组件
- 新增 AppPressable 按压反馈组件
- 新增 AppSheetInputField 输入框组件
- 更新 AppButton 和其他共享组件
This commit is contained in:
qzl
2026-03-16 16:11:16 +08:00
parent e55f12cdc1
commit a75c868bca
6 changed files with 360 additions and 38 deletions
+79 -17
View File
@@ -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,
),
),
),
),
),
),
);