wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
68 lines
2.0 KiB
Dart
68 lines
2.0 KiB
Dart
// pangolin_button.dart — 胶囊按钮(primary / secondary / ghost / danger)
|
|
// 对应 React UI Kit 的 .btn / Pill 组件。
|
|
import 'package:flutter/material.dart';
|
|
import '../pangolin_theme.dart';
|
|
|
|
enum PangolinButtonVariant { primary, secondary, ghost, danger }
|
|
|
|
class PangolinButton extends StatelessWidget {
|
|
const PangolinButton({
|
|
super.key,
|
|
required this.label,
|
|
this.onPressed,
|
|
this.icon,
|
|
this.variant = PangolinButtonVariant.primary,
|
|
this.expand = false,
|
|
});
|
|
|
|
final String label;
|
|
final VoidCallback? onPressed;
|
|
final IconData? icon;
|
|
final PangolinButtonVariant variant;
|
|
final bool expand;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final c = context.pangolin;
|
|
final disabled = onPressed == null;
|
|
|
|
late final Color bg, fg;
|
|
Border? border;
|
|
switch (variant) {
|
|
case PangolinButtonVariant.primary:
|
|
bg = c.accent; fg = c.fgOnAccent; break;
|
|
case PangolinButtonVariant.secondary:
|
|
bg = c.surface; fg = c.fg1; border = Border.all(color: c.borderStrong, width: 1.5); break;
|
|
case PangolinButtonVariant.ghost:
|
|
bg = Colors.transparent; fg = c.accent; break;
|
|
case PangolinButtonVariant.danger:
|
|
bg = c.dangerSubtle; fg = c.danger; break;
|
|
}
|
|
|
|
final child = Row(
|
|
mainAxisSize: expand ? MainAxisSize.max : MainAxisSize.min,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
if (icon != null) ...[Icon(icon, size: 18, color: fg), const SizedBox(width: 8)],
|
|
Text(label, style: PangolinText.sm.copyWith(color: fg, fontWeight: FontWeight.w600, fontSize: 15)),
|
|
],
|
|
);
|
|
|
|
return Opacity(
|
|
opacity: disabled ? 0.45 : 1,
|
|
child: Material(
|
|
color: bg,
|
|
shape: StadiumBorder(side: border?.top ?? BorderSide.none),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: InkWell(
|
|
onTap: onPressed,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 13),
|
|
child: child,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|