wangjia
65c672b4ad
- 新组件 DsSwitch（原型 atoms .switch 对照，L1 已登记：38×22 pill，on=primary） - 商品抽屉状态行：三态徽章后跟挂售 switch（在售⇄库存 即时生效，已售只读， readonly 禁用），桌面 drawer / 移动 sheet 同组件 - 列表状态列/卡片徽章三态化（在售绿/库存蓝/已售灰，icons BADGE_ICON 补两词）； 状态筛选改「全部/在售/库存/已售」走服务端；预警缺货退出状态维度由数量染色承担 - KPI 第四卡「缺货预警」→「已售」（sold_count，点击筛选已售） - 原型同步：atoms/index 登记 switch 与 b-库存/b-已售、inventory 两屏三态数据、 抽屉状态行 switch；12 道 ds 闸 + L1 同源闸全过 - golden 重录 ×9（三态徽章 + 已售卡形态） Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
56 lines
1.9 KiB
Dart
56 lines
1.9 KiB
Dart
// widgets/ds/ds_switch.dart — 原型 atoms.css .switch 的 Flutter 对照（2026-07-07 登记）。
|
||
// 38×22 pill 轨道 + 18px 圆点滑块：on=primary / off=border / disabled 45% 透明。
|
||
// 用于布尔即时生效场景（库存⇄在售挂售切换）；不同于 Material Switch 的尺寸与配色。
|
||
import 'package:flutter/material.dart';
|
||
|
||
import '../../core/theme/context_tokens.dart';
|
||
|
||
class DsSwitch extends StatelessWidget {
|
||
final bool value;
|
||
final ValueChanged<bool>? onChanged; // null = disabled
|
||
const DsSwitch({super.key, required this.value, this.onChanged});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final t = context.tokens;
|
||
final enabled = onChanged != null;
|
||
return Semantics(
|
||
toggled: value,
|
||
button: true,
|
||
child: GestureDetector(
|
||
onTap: enabled ? () => onChanged!(!value) : null,
|
||
child: Opacity(
|
||
opacity: enabled ? 1 : .45,
|
||
child: AnimatedContainer(
|
||
duration: const Duration(milliseconds: 180),
|
||
width: 38,
|
||
height: 22,
|
||
padding: const EdgeInsets.all(2),
|
||
decoration: BoxDecoration(
|
||
color: value ? t.primary : t.border,
|
||
borderRadius: BorderRadius.circular(999),
|
||
),
|
||
child: AnimatedAlign(
|
||
duration: const Duration(milliseconds: 180),
|
||
curve: Curves.easeOut,
|
||
alignment: value ? Alignment.centerRight : Alignment.centerLeft,
|
||
child: Container(
|
||
width: 18,
|
||
height: 18,
|
||
decoration: BoxDecoration(
|
||
color: t.surface,
|
||
shape: BoxShape.circle,
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: t.shadow, blurRadius: 3, offset: const Offset(0, 1)),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|