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配置细节淹没。二、三层结构参数处理示例对比维度结构层 (ProfileCardLayout)中间层 (UserInfoCard)调用层 (UserInfoCard)背景图backgroundImage: Composable? nullbg: Int R.drawable.ic_default(不传用默认)图标leftContent: Composableicon: IconRes IconRes(R.id.vip)icon IconRes(R.id.svip)内边距写死在 Row 上 (Layout 规定)不涉及不涉及三、三层结构设计的核心优势易于维护UI视觉改版时如所有卡片内边距从16dp改为20dp仅需修改结构层一处即可生效。视觉统一业务元素改版时如VIP图标样式统一更换仅需修改中间层的默认值。开发效率编写新页面时仅需传递1-2个差异化参数即可完成卡片UI渲染。四、结构层代码示例ComposablefunProfileCardLayout(modifier:ModifierModifier,backgroundImage:(Composable()-Unit)?null,// 若左侧内容是核心可不设 null强制传入leftContent:Composable()-Unit,rightContent:(Composable()-Unit)?null,overlayContent:(Composable()-Unit)?null){Box(modifiermodifier){// 背景层backgroundImage?.invoke()Row(modifierModifier.fillMaxSize().padding(...)// 布局定义的内边距结构层规定){// 给左侧 Box 设置 weight避免右侧内容被挤压Box(modifierModifier.weight(1f)){leftContent()}rightContent?.let{Box{it()}}}// ... overlay}}五、业务层补充说明UserInfoCard 中间层已包含backgroundImage默认值符合设计规范。针对details文字过长的处理规则自动换行/单行显示加省略号建议在中间层定义为业务规则。总结结构层仅负责布局规则不包含任何业务默认值和资源中间层承接业务默认配置调用层仅传差异化数据。三层结构设计可实现单点维护、视觉统一、高效开发的核心目标。文字超长显示规则属于业务规则建议在中间层UserInfoCard统一定义。