Flutter + OpenHarmony 设计系统实战：构建统一、美观、无障碍的跨端 UI 体系

┌──────────────────────────────────────┐
│           Design Tokens              │ ← 色彩 / 间距 / 字体 / 圆角
├──────────────────────────────────────┤
│           Foundation                 │ ← 布局 / 网格 / 响应式规则
├──────────────────────────────────────┤
│           Components                 │ ← 按钮 / 卡片 / 导航 / 表单
├──────────────────────────────────────┤
│           Patterns                   │ ← 页面模板 / 交互流程
└──────────────────────────────────────┘

// lib/theme/colors.dart
class OhColors {
  static const primary = Color(0xFF007AFF);
  static const surface = Color(0xFFFFFFFF);
  static const textPrimary = Color(0xFF1D1D1F);
}

// lib/theme/spacing.dart
class OhSpacing {
  static const xs = 4.0;
  static const s = 8.0;
  static const m = 16.0;
}

Widget build(BuildContext context) {
  final device = OhDeviceType.of(context); // 自定义设备类型检测

  return Scaffold(
    body: device.isTv || device.isCar
        ? TvOptimizedLayout()      // 焦点 + 大字体
        : device.isWearable
            ? WatchCompactLayout() // 单列滚动
            : ResponsivePhoneLayout(), // 默认手机布局
  );
}

// 使用 flutter_staggered_grid_view
StaggeredGrid.count(
  crossAxisCount: device.isTv ? 12 : device.isTablet ? 8 : 4,
  mainAxisSpacing: OhSpacing.s,
  crossAxisSpacing: OhSpacing.s,
  children: [...],
)

// lib/components/oh_button.dart
class OhButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final OhButtonVariant variant;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    Color bgColor = variant == OhButtonVariant.primary 
        ? OhColors.primary 
        : Colors.transparent;

    return Container(
      height: 48,
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(OhRadius.s),
        border: variant == OhButtonVariant.secondary 
            ? Border.all(color: OhColors.outline) 
            : null,
      ),
      child: Text(text, style: theme.textTheme.labelLarge),
    );
  }
}

// 页面切换淡入
PageRouteBuilder(
  pageBuilder: (_, __, ___) => NextPage(),
  transitionsBuilder: (_, anim, __, child) {
    return FadeTransition(opacity: anim, child: child);
  },
)

// 按钮点击反馈
InkWell(
  onTap: () {},
  borderRadius: BorderRadius.circular(OhRadius.s),
  child: OhButton(...),
)

// 为图标按钮添加语义
Semantics(
  label: '打开设置',
  child: IconButton(icon: Icon(Icons.settings), onPressed: _openSettings),
)

// 动态调整字体（响应系统设置）
Text(
  'Hello',
  style: TextStyle(fontSize: MediaQuery.textScaleFactorOf(context) * 17),
)