Web 卡片显示了长名称，Flutter 卡片却只显示两行省略号。两张图看起来都整齐，但如果业务要求完整识别资料主体，这已经不是圆角或间距的差异，而是内容契约不同。
跨端生成先要确定两端在什么状态下表达同一份信息。本文用虚构资料卡片给出生成约束、核心布局与人工对照表，没有真实模型调用，也没有编译或运行两端代码。配图为概念示意，不是生成组件的运行截图。
先冻结内容与缺失值规则
用同一份构造数据：名称是较长的资料主体名称，摘要说明资料用途，头像为空，操作文案为“查看资料”。不要让 AI 在 Web 里生成一个简短英文名，在 Flutter 里换成另一条中文资料，再宣布两端布局一致。
| 名称 | 允许换行，保留全文，不靠缩小字体塞入固定行 |
| 摘要 | 缺失时不展示空段落，不编造简介 |
| 头像 | 无资源时显示明确占位；失败与缺失按项目策略处理 |
| 操作 | 文案可变长，窄容器下允许移到下一行 |
| 忙碌 | 明确操作暂不可用的原因，避免重复触发 |
| 错误 | 显示在对应资料上下文，保留恢复方式 |
这份规则适合以完整阅读为主的卡片。若产品要求紧凑列表与截断，应另行提供完整信息入口，并在两端采用同一内容策略。不能把某端默认截断当成不可讨论的平台习惯。
生成输入要允许各端采用自己的布局工具
用同一份资料数据分别草拟Web和Flutter卡片。
保留名称全文，摘要缺失不生成替代内容；头像缺失使用占位。
操作区在窄容器中允许换行或下移，不挤压名称。
使用已有文字与间距Token，不强求CSS px和Flutter逻辑像素数值完全相同。
分别输出核心布局、状态映射和待运行核对项。
不要生成真实人物资料，不宣称两端截图或大字体测试已经完成。
这里统一的是内容与行为约束。Web 可以用 Grid/Flex，Flutter 可以用 Row/Column 或按父约束切换结构。没有必要要求两端生成相同的节点层数；同样，也不能因为工具不同就放弃检查内容是否丢失。
Web：先给文字留出可收缩的区域
假设结构中头像、文字与操作依次排列，以下只展示宽卡片的核心声明：
.profile {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1rem;
}
.profile__content { min-inline-size: 0; }
.profile__name { margin: 0; overflow-wrap: anywhere; }
.profile__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-block-start: 0.75rem;
}
这里把操作放在文字区域下方，不要求它永久占用第三列。三个间距数值只是便于说明的初稿，真实项目应引用现有 Token。头像与卡片在极窄容器下还可能需要改成单列，不能由这几行 CSS 推断任意宽度都成立。
Flutter：用有限约束决定行内还是上下排列
下面展示父宽度有界时的结构选择，avatar、details、actions 是由项目构造的 Widget。details 内应允许名称换行，并保持完整内容策略：
LayoutBuilder(
builder: (context, constraints) {
if (!constraints.hasBoundedWidth || constraints.maxWidth < 360) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [avatar, details, actions],
);
}
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
avatar,
const SizedBox(width: 16),
Expanded(child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [details, actions],
)),
],
);
},
)
360 和 16 是这个说明片段的候选值，不是跨端标准断点。LayoutBuilder 提供父布局约束；不能简单读取整台设备宽度，就断言卡片在侧栏里也宽。Expanded 也需要处于合适的 Flex 祖先与有意义的可用空间中，不能随意包到任意层级。
无界宽度分支这里只避开了横向 Expanded，不保证后续内容会自动得到合适宽度。组件宿主仍应提供可理解的边界；如果放进水平滚动区域，要单独决定卡片最大宽度。片段也没有实现间距主题、头像错误回调或动作布局，不能称作完整组件。
操作区可根据实际需求采用 Wrap，但 Wrap 只处理子项分行，不会自动给一个过长按钮定义内部文本策略。长操作名称仍需要真实运行检查。
比较时写清楚差异属于哪一层
一份静态对照记录可以先这样写：
| 名称全文 | overflow-wrap 支持长串策略 | Text 不设置主动截断 | 仍需真实换行检查 |
| 文字空间 | 中间轨道允许收缩 | Row 下文字使用 Expanded | 机制不同，不能直接推断同表现 |
| 操作区 | 容器内允许换行 | 可采用 Wrap 或下移 | 长文案待运行 |
| 缺失头像 | 明确占位状态 | 同一业务含义的占位 | 非真实图片加载验证 |
| 状态反馈 | 依据相同状态字段 | 依据相同状态字段 | 名称、焦点和播报待检查 |
这不是两端实测结果。要形成运行对照，需要固定数据、卡片宿主宽度、字体与缩放设置，分别运行，保存实际观察，再按内容、布局和语义归因。不能只拿两张不同宽度的截图做叠图，然后把差异都归为某个框架的问题。
真实字体度量、系统文字缩放、平台控件默认内边距和输入方式可能不同。允许合理差异，但差异要能解释；完整名称在一端丢失、错误状态在一端没有恢复入口，不能用“尊重平台”带过。
本篇适合短资料展示卡片的生成初稿。复杂行内编辑、虚拟化列表与大量操作菜单需要额外状态和焦点设计。先用同一组内容检查两端各自怎样承载，再讨论外观接近程度，比较才有意义。
官方依据（2026-10-21 核对，Flutter 为当日在线 API，未运行本地 SDK）：CSS Grid Level 1、CSS Text Level 3、Flutter LayoutBuilder、Flutter Expanded、Flutter Wrap。本例内容与布局阈值为自定义分析材料。
