# 跨框架样式语法映射表

> 设计稿参数到各框架代码的转换参考

## 📋 概述

本文档提供设计稿参数到不同框架（Flutter、Vue/CSS、React Native、小程序）的语法映射，用于设计稿还原时的快速查阅。

---

## 📐 尺寸与布局

### 宽高

| 设计稿 | Flutter | Vue/CSS | React Native | 小程序 |
|--------|---------|---------|--------------|--------|
| width: 100px | `width: 100` | `width: 100px` | `width: 100` | `width: 200rpx` |
| height: 50px | `height: 50` | `height: 50px` | `height: 50` | `height: 100rpx` |
| 100% 宽度 | `double.infinity` | `width: 100%` | `width: '100%'` | `width: 100%` |

### 内边距 (Padding)

| 设计稿 | Flutter | Vue/CSS | React Native | 小程序 |
|--------|---------|---------|--------------|--------|
| 全部 16px | `padding: EdgeInsets.all(16)` | `padding: 16px` | `padding: 16` | `padding: 32rpx` |
| 水平 16px | `padding: EdgeInsets.symmetric(horizontal: 16)` | `padding: 0 16px` | `paddingHorizontal: 16` | `padding: 0 32rpx` |
| 垂直 12px | `padding: EdgeInsets.symmetric(vertical: 12)` | `padding: 12px 0` | `paddingVertical: 12` | `padding: 24rpx 0` |
| 上20 右16 下12 左16 | `padding: EdgeInsets.fromLTRB(16, 20, 16, 12)` | `padding: 20px 16px 12px 16px` | `paddingTop: 20, ...` | `padding: 40rpx 32rpx 24rpx` |

### 外边距 (Margin)

| 设计稿 | Flutter | Vue/CSS | React Native | 小程序 |
|--------|---------|---------|--------------|--------|
| 底部 16px | `margin: EdgeInsets.only(bottom: 16)` | `margin-bottom: 16px` | `marginBottom: 16` | `margin-bottom: 32rpx` |
| 水平居中 | `Container(alignment: Alignment.center)` | `margin: 0 auto` | `alignSelf: 'center'` | `margin: 0 auto` |

---

## 🎨 颜色

### 纯色

| 设计稿 | Flutter | Vue/CSS | React Native |
|--------|---------|---------|--------------|
| #1C2B45 | `Color(0xFF1C2B45)` | `#1C2B45` | `'#1C2B45'` |
| #1C2B45 50%透明 | `Color(0x801C2B45)` | `rgba(28,43,69,0.5)` | `'rgba(28,43,69,0.5)'` |

### 透明度换算

| 透明度 | 十六进制 | 用法示例 |
|--------|---------|---------|
| 100% | FF | `0xFF1C2B45` |
| 90% | E6 | `0xE61C2B45` |
| 80% | CC | `0xCC1C2B45` |
| 70% | B3 | `0xB31C2B45` |
| 60% | 99 | `0x991C2B45` |
| 50% | 80 | `0x801C2B45` |
| 40% | 66 | `0x661C2B45` |
| 30% | 4D | `0x4D1C2B45` |
| 20% | 33 | `0x331C2B45` |
| 15% | 26 | `0x261C2B45` |
| 12% | 1F | `0x1F1C2B45` |
| 10% | 1A | `0x1A1C2B45` |
| 5% | 0D | `0x0D1C2B45` |
| 0% | 00 | `0x001C2B45` |

### 渐变色

**设计稿**: 从 #E01020 到 #B8101A，左上到右下

```dart
// Flutter
LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [Color(0xFFE01020), Color(0xFFB8101A)],
)
```

```css
/* CSS */
background: linear-gradient(135deg, #E01020 0%, #B8101A 100%);
```

```javascript
// React Native (需要 react-native-linear-gradient)
<LinearGradient
  colors={['#E01020', '#B8101A']}
  start={{x: 0, y: 0}}
  end={{x: 1, y: 1}}
/>
```

```css
/* 小程序 */
background: linear-gradient(135deg, #E01020, #B8101A);
```

---

## 📦 圆角

| 设计稿 | Flutter | Vue/CSS | React Native |
|--------|---------|---------|--------------|
| 全部 12px | `borderRadius: BorderRadius.circular(12)` | `border-radius: 12px` | `borderRadius: 12` |
| 只有顶部 12px | `borderRadius: BorderRadius.vertical(top: Radius.circular(12))` | `border-radius: 12px 12px 0 0` | `borderTopLeftRadius: 12, borderTopRightRadius: 12` |
| 各角不同 [8,12,16,20] | `borderRadius: BorderRadius.only(topLeft: Radius.circular(8), ...)` | `border-radius: 8px 12px 16px 20px` | 逐角设置 |

---

## 🌑 阴影

### 单一阴影

**设计稿**: x=8, y=8, blur=20, color=#1C2B45 15%

```dart
// Flutter
BoxShadow(
  color: Color(0x261C2B45),  // 15% = 0x26
  blurRadius: 20,
  offset: Offset(8, 8),
  spreadRadius: 0,
)
```

```css
/* CSS */
box-shadow: 8px 8px 20px 0px rgba(28, 43, 69, 0.15);
```

```javascript
// React Native
shadowColor: '#1C2B45',
shadowOffset: { width: 8, height: 8 },
shadowOpacity: 0.15,
shadowRadius: 20,
elevation: 8,  // Android
```

### 新拟态双阴影

**设计稿**: 右下深色 + 左上浅色

```dart
// Flutter
boxShadow: [
  // 右下阴影（深色）
  BoxShadow(
    color: Color(0x261C2B45),  // 15%
    blurRadius: 20,
    offset: Offset(8, 8),
  ),
  // 左上高光（浅色）
  BoxShadow(
    color: Color(0xE6FFFFFF),  // 90%
    blurRadius: 20,
    offset: Offset(-8, -8),
  ),
]
```

```css
/* CSS */
box-shadow: 
  8px 8px 20px rgba(28, 43, 69, 0.15),
  -8px -8px 20px rgba(255, 255, 255, 0.9);
```

---

## ✏️ 字体

### 基础属性

| 设计稿 | Flutter | Vue/CSS | React Native |
|--------|---------|---------|--------------|
| 字号 16px | `fontSize: 16` | `font-size: 16px` | `fontSize: 16` |
| 字重 SemiBold(600) | `fontWeight: FontWeight.w600` | `font-weight: 600` | `fontWeight: '600'` |
| 字重 Bold(700) | `fontWeight: FontWeight.bold` | `font-weight: bold` | `fontWeight: 'bold'` |
| 行高 24px (字号16) | `height: 1.5` (比例!) | `line-height: 24px` | `lineHeight: 24` |
| 字间距 0.5px | `letterSpacing: 0.5` | `letter-spacing: 0.5px` | `letterSpacing: 0.5` |

### 字重映射

| 名称 | 数值 | Flutter | CSS |
|------|------|---------|-----|
| Thin | 100 | `FontWeight.w100` | `font-weight: 100` |
| ExtraLight | 200 | `FontWeight.w200` | `font-weight: 200` |
| Light | 300 | `FontWeight.w300` | `font-weight: 300` |
| Regular | 400 | `FontWeight.w400` / `FontWeight.normal` | `font-weight: 400` |
| Medium | 500 | `FontWeight.w500` | `font-weight: 500` |
| SemiBold | 600 | `FontWeight.w600` | `font-weight: 600` |
| Bold | 700 | `FontWeight.w700` / `FontWeight.bold` | `font-weight: 700` |
| ExtraBold | 800 | `FontWeight.w800` | `font-weight: 800` |
| Black | 900 | `FontWeight.w900` | `font-weight: 900` |

### ⚠️ Flutter 行高注意

Flutter 的 `TextStyle.height` 是**比例值**，不是像素值！

```dart
// 设计稿：字号 16px，行高 24px
TextStyle(
  fontSize: 16,
  height: 1.5,  // 24 / 16 = 1.5
)
```

---

## 🔲 边框

| 设计稿 | Flutter | Vue/CSS | React Native |
|--------|---------|---------|--------------|
| 1px #E5E5E5 实线 | `border: Border.all(color: Color(0xFFE5E5E5), width: 1)` | `border: 1px solid #E5E5E5` | `borderWidth: 1, borderColor: '#E5E5E5'` |
| 只有底边框 | `border: Border(bottom: BorderSide(...))` | `border-bottom: 1px solid #E5E5E5` | `borderBottomWidth: 1, ...` |

---

## 📱 单位换算

### 小程序 rpx

小程序设计稿通常基于 750px 宽度：

```
rpx = px * 2

设计稿 16px → 小程序 32rpx
设计稿 100px → 小程序 200rpx
```

### React Native

React Native 使用逻辑像素（dp/pt），通常与设计稿 1:1：

```javascript
// 设计稿 16px
style={{ fontSize: 16 }}
```

如需适配，使用 `PixelRatio` 或响应式方案。

---

## 📚 相关规范

- [设计稿还原规范](./workflows/design-restoration.md)
- [Sketch MCP 最佳实践](./mcp-tools/sketch-mcp.md)

---

**维护者**: MTA工作室  
**创建日期**: 2026-01-20  
**适用版本**: 通用