| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import 'package:flutter/material.dart';
- import 'package:flutter/services.dart';
- import '../../core/theme/app_colors.dart';
- /// Pencil Component/NavBar — 对齐 Pencil 设计的导航栏
- ///
- /// 白色背景、居中深色标题、左侧返回按钮(绝对定位)、右侧可选操作按钮(绝对定位)
- /// 高度 56,padding [0, 16],自动设置白色状态栏
- class PencilNavBar extends StatelessWidget implements PreferredSizeWidget {
- final String title;
- final VoidCallback? onBack;
- final Widget? rightWidget;
- final bool showBack;
- final bool showRight;
- const PencilNavBar({
- super.key,
- required this.title,
- this.onBack,
- this.rightWidget,
- this.showBack = true,
- this.showRight = false,
- });
- @override
- Widget build(BuildContext context) {
- // 设置状态栏样式
- SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
- statusBarColor: AppColors.bgCard,
- statusBarIconBrightness: Brightness.dark,
- statusBarBrightness: Brightness.light,
- ));
- return Container(
- height: 56,
- padding: const EdgeInsets.symmetric(horizontal: 16),
- decoration: const BoxDecoration(
- color: AppColors.bgCard,
- ),
- child: Stack(
- alignment: Alignment.center,
- children: [
- // 标题 — 居中
- Text(
- title,
- style: const TextStyle(
- fontSize: AppFontSizes.title,
- fontWeight: FontWeight.w600,
- color: AppColors.textPrimary,
- ),
- textAlign: TextAlign.center,
- ),
- // 左侧返回按钮 — 绝对定位
- if (showBack)
- Positioned(
- left: 0,
- top: 0,
- bottom: 0,
- child: SizedBox(
- width: 56,
- height: 56,
- child: GestureDetector(
- onTap: onBack ?? () => Navigator.of(context).maybePop(),
- behavior: HitTestBehavior.opaque,
- child: const Center(
- child: Icon(
- Icons.chevron_left,
- size: 22,
- color: AppColors.textPrimary,
- ),
- ),
- ),
- ),
- ),
- // 右侧操作按钮 — 绝对定位
- if (showRight && rightWidget != null)
- Positioned(
- right: 0,
- top: 0,
- bottom: 0,
- child: SizedBox(
- width: 56,
- height: 56,
- child: Center(child: rightWidget!),
- ),
- ),
- ],
- ),
- );
- }
- @override
- Size get preferredSize => const Size.fromHeight(56);
- }
|