在Jetpack Compose中实现OOP设计模式：适配类结构到函数式Composable

Jetpack Compose以函数式编程为核心，但依然可以结合OOP设计模式来组织复杂UI结构和业务逻辑，下面以Composite模式为例，讲解具体实现方式和通用适配原则。

一、Composite模式在Compose中的实现 #

Composite模式允许你将单个对象和对象组合统一处理，非常适合构建层级化的UI结构（比如时间线、菜单树等）。基于你提供的代码，我们可以扩展出完整的Composite实现：

1. 定义组件接口 #

统一单个组件和组合组件的渲染契约：

interface TimelineComponent {
    @Composable
    fun Render()
}

2. 实现叶子节点（单个时间线项） #

封装独立的UI单元，负责自身的渲染逻辑：

class TimelineItem(
    private val id: String,
    private val type: String,
    private val title: String,
    private val subtitle: String
) : TimelineComponent {
    @Composable
    override fun Render() {
        Card(modifier = Modifier.padding(8.dp)) {
            Box(modifier = Modifier.padding(16.dp)) {
                Text(text = "Title: $title\nType: $type\nSubtitle: $subtitle")
            }
        }
    }
}

3. 实现容器节点（时间线组） #

封装多个子组件，负责遍历渲染所有子元素：

class TimelineGroup(
    private val groupTitle: String,
    private val children: List<TimelineComponent>
) : TimelineComponent {
    @Composable
    override fun Render() {
        Column(modifier = Modifier.padding(8.dp)) {
            Text(
                text = groupTitle,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(bottom = 8.dp)
            )
            // 统一渲染所有子组件，无需区分是单个项还是组
            children.forEach { it.Render() }
        }
    }
}

4. 使用示例 #

在Composable中统一处理所有组件：

@Composable
fun TimelineDemo() {
    val timelineContent = listOf<TimelineComponent>(
        TimelineItem(
            id = "1",
            type = "Event",
            title = "Compose 1.0 Release",
            subtitle = "Stable version launched in 2021"
        ),
        TimelineGroup(
            groupTitle = "Workshops",
            children = listOf(
                TimelineItem(
                    id = "2",
                    type = "Workshop",
                    title = "Compose Basics",
                    subtitle = "State management fundamentals"
                ),
                TimelineItem(
                    id = "3",
                    type = "Workshop",
                    title = "Advanced Compose",
                    subtitle = "Custom layouts & animations"
                )
            )
        )
    )

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        timelineContent.forEach { it.Render() }
    }
}

二、Compose环境下适配OOP模式的通用最佳实践 #

1. 分离状态与UI渲染 #

OOP类优先负责封装状态和业务逻辑，UI渲染交给纯Composable函数实现，避免将渲染逻辑硬编码在类的方法中。比如可以重构为：

// 仅负责持有状态的OOP类
class TimelineItemState(
    val id: String,
    val type: String,
    val title: String,
    val subtitle: String
)

// 纯UI渲染的Composable函数
@Composable
fun TimelineItem(state: TimelineItemState) {
    Card(modifier = Modifier.padding(8.dp)) {
        Box(modifier = Modifier.padding(16.dp)) {
            Text(text = "Title: ${state.title}\nType: ${state.type}\nSubtitle: ${state.subtitle}")
        }
    }
}

2. 用remember持有OOP实例 #

如果OOP类需要在Compose重组中保持状态，必须用remember创建实例，避免每次重组都重新初始化：

@Composable
fun EditableTimelineGroup() {
    // 用remember持有可变状态的组实例
    val groupState = remember {
        MutableTimelineGroupState(
            groupTitle = "Upcoming Events",
            children = mutableListOf(
                TimelineItemState("4", "Webinar", "Compose for Desktop", "Cross-platform dev")
            )
        )
    }

    Column {
        Button(onClick = {
            // 修改状态会触发UI重组
            groupState.children.add(
                TimelineItemState("5", "Conference", "Droidcon", "Compose deep dives")
            )
        }) {
            Text("Add New Item")
        }
        // 渲染组UI
        TimelineGroup(state = groupState)
    }
}

3. 避免过度封装 #

对于简单的UI组件，直接用Composable函数即可，无需创建OOP类。比如一个基础卡片组件，直接写@Composable fun BasicCard(title: String) { ... }比封装成类更简洁高效。

4. 结合Compose状态系统 #

如果OOP类的状态需要触发UI重组，要使用Compose的MutableState或StateFlow等状态容器，确保状态变化能被Compose的重组机制感知。比如在类中使用MutableState：

class MutableTimelineGroupState(
    groupTitle: String,
    initialChildren: List<TimelineItemState>
) {
    val groupTitle = mutableStateOf(groupTitle)
    val children = mutableStateListOf<TimelineItemState>().apply { addAll(initialChildren) }
}

内容的提问来源于stack exchange，提问作者Marc Rasmussen