Compose 三层结构设计规范1（基于Slot API）

Compose 三层结构设计规范（基于Slot API）

结构层：简洁，不包含业务资源和默认值
中间层：尽可能复用参数，写常用到的默认值
调用层：只写差异的数据

一、三层结构角色定位与默认值策略

1. 结构层 (ProfileCardLayout)：“纯骨架”

• 默认值策略：尽量不给业务默认值。
• 核心职责：仅定义“坑位”位置、层级（Z-axis）堆叠规则、基础物理规则（内边距padding、间距spacing）。
• 参数处理规则：
  • Modifier：默认赋值为Modifier。
  • Slot (Composable 类型)：默认赋值为null。
  • 禁止写死任何R.drawable或R.color等业务资源。

2. 中间层/业务层 (UserInfoCard)：“配置员”

• 默认值策略：大胆定义业务默认值。
• 核心职责：将结构层抽象为具体业务组件，定义卡片默认背景、默认图标等业务级UI规则。
• 参数处理规则：
  • 为IconRes、backgroundImage、TextStyle等参数赋予具体业务默认值。
  • 实现调用层在90%场景下仅需传递title和details等核心数据。

3. 调用层 (Screen/Page)：“使用者”

• 默认值策略：仅传递“差异化”数据。
• 核心职责：仅关注具体业务数据（如显示“陈奕迅”或“周杰伦”），不处理UI配置细节。
• 核心优势：代码简洁，业务逻辑清晰，避免被UI配置细节淹没。

二、三层结构参数处理示例对比

三、三层结构设计的核心优势

1. 易于维护：UI视觉改版时（如所有卡片内边距从16dp改为20dp），仅需修改结构层一处即可生效。
2. 视觉统一：业务元素改版时（如VIP图标样式统一更换），仅需修改中间层的默认值。
3. 开发效率：编写新页面时，仅需传递1-2个差异化参数，即可完成卡片UI渲染。

四、结构层代码示例

@ComposablefunProfileCardLayout(modifier:Modifier=Modifier,backgroundImage:(@Composable()->Unit)?=null,// 若左侧内容是核心，可不设 null，强制传入leftContent:@Composable()->Unit,rightContent:(@Composable()->Unit)?=null,overlayContent:(@Composable()->Unit)?=null){Box(modifier=modifier){// 背景层backgroundImage?.invoke()Row(modifier=Modifier.fillMaxSize().padding(...)// 布局定义的内边距（结构层规定）){// 给左侧 Box 设置 weight，避免右侧内容被挤压Box(modifier=Modifier.weight(1f)){leftContent()}rightContent?.let{Box{it()}}}// ... overlay}}

五、业务层补充说明

UserInfoCard 中间层已包含backgroundImage默认值，符合设计规范。针对details文字过长的处理规则（自动换行/单行显示加省略号），建议在中间层定义为业务规则。

总结

1. 结构层仅负责布局规则，不包含任何业务默认值和资源；中间层承接业务默认配置，调用层仅传差异化数据。
2. 三层结构设计可实现单点维护、视觉统一、高效开发的核心目标。
3. 文字超长显示规则属于业务规则，建议在中间层（UserInfoCard）统一定义。