91成人版：解锁未知，探索深度——不止于表象的视觉盛宴
整体架构分析一个典型的组合式UI架构使用了Slot API 设计模式。
图表示意MediaItemLayout (核心布局容器) ├── 参数 │ ├── leading: () - Unit // 左侧内容 │ ├── center: () - Unit // 中间内容 │ └── trailing: () - Unit // 右侧内容可选 │ ├── 内部结构 │ ├── Row (水平布局) │ │ ├── leading() // 左侧 │ │ ├── center() // 中间有weight1 │ │ └── trailing() // 右侧 │ └── HorizontalDivider // 分割线 │ └── 两种具体实现 ├── MediaItemNormal // 普通样式封面 标题/副标题 └── MediaItemWithIndex // 带序号样式序号 封面 标题/副标题 时长详细解析
核心布局组件MediaItemLayoutComposablefunMediaItemLayout(modifier:ModifierModifier,leading:Composable()-Unit,// 左侧插槽center:Composable()-Unit,// 中间插槽trailing:(Composable()-Unit)?null,// 右侧插槽可选showDivider:Booleantrue)这是一个布局容器组件特点Slot API 设计通过函数参数接收内容可复用性强同样的布局可以展示不同内容灵活配置可以选择是否显示分割线、是否显示右侧内容
两种具体实现A.MediaItemNormal- 普通媒体项[ 封面图片 ] [ 标题 ] [ 副标题 ]用于播放列表、专辑列表等不需要序号的地方B.MediaItemWithIndex- 带序号媒体项[ 01 ] [ 封面图片 ] [ 标题 ] [ 3:45 ] [ 副标题 ]用于歌曲列表、播客列表等需要显示序号和时长的场景
子组件分工组件功能备注IndexBox显示序号/播放动画选中时显示音乐波动画CoverBox显示封面图片可显示播放动画TitleSubtitleColumn标题和副标题垂直排列支持省略DurationText显示时长格式化时间显示数据流MediaItemUiModel (数据模型) ├── imageSrc → CoverBox ├── title → TitleSubtitleColumn ├── subTitle → TitleSubtitleColumn ├── index → IndexBox (仅MediaItemWithIndex) └── duration → DurationText (仅MediaItemWithIndex)设计模式优势
开闭原则新增样式只需创建新的组合函数不需要修改MediaItemLayout
单一职责每个组件只做一件事MediaItemLayout只负责布局CoverBox只负责封面显示TitleSubtitleColumn只负责文字显示
Slot API 优势// 可以轻松创建新的变体ComposablefunMediaItemWithAction(uiModel:MediaItemUiModel,onActionClick:()-Unit){MediaItemLayout(leading{CoverBox(...)},center{TitleSubtitleColumn(...)},trailing{IconButton(onClickonActionClick){Icon(Icons.Default.MoreVert,更多)}})}使用示例// 普通样式MediaItemNormal(uiModelMediaItemUiModel(imageSrcalbum_cover_url,titleSong Title,subTitleArtist Name),isSelectedfalse,isPlayingfalse)// 带序号样式MediaItemWithIndex(uiModelMediaItemUiModel(imageSrcalbum_cover_url,titleSong Title,subTitleArtist Name,index5,// 显示 06duration225000// 显示 3:
,isSelectedtrue,// 显示播放动画isPlayingtrue// 动画播放状态)
总结这个文件展示了优秀的Compose架构设计MediaItemLayout是核心作为布局容器定义了整体的三栏结构Slot API 提供灵活性通过函数参数接收内容支持多种变体函数组合实现复用小组件可以独立使用也可以组合成复杂组件数据驱动UIMediaItemUiModel包含所有显示数据状态驱动交互通过isSelected、isPlaying控制UI状态这种设计让代码✅ 易于维护每个组件职责清晰✅ 易于扩展添加新样式很简单✅ 易于测试组件可以独立测试✅ 易于理解逻辑分层清晰
贵在真实老中医SPA-贵在真实老中医应用
