Compose笔记(六十五)--插槽模式

这一节主要了解一下Compose中的插槽模式,在Jetpack Compose开发中，插槽模式（Slot Pattern）是一种核心的UI组合设计模式，用于构建高度可复用、灵活且语义清晰的可组合函数。它借鉴Web开发中的"插槽（slot）"思想，允许父组件向子组件"注入"自定义内容，而子组件负责布局和行为逻辑。简单总结如下:

特点:

1 子组件（容器）定义布局结构和交互逻辑。

2 父组件提供具体显示的内容（文本、图标、按钮等）。

3 内容以lambda参数形式传入，通常命名为content、title、icon、actions等。

场景:

1 通用布局组件当需要构建可复用的布局容器时，插槽模式允许外部灵活控制不同区域的内容。

2 动态内容组合在需要根据状态或数据动态切换内容的场景中，插槽模式可以避免复杂的条件分支逻辑。

3 主题与样式定制插槽模式可以结合Modifier或样式对象实现外观定制。

栗子:

Kotlin 复制代码

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@Composable
fun CardContainer(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Card(modifier = modifier) {
        content()
    }
}
@Composable
fun ShowCardDemo() {
    CardContainer {
        Text("Hello from parent!")
        Icon(Icons.Default.Favorite, contentDescription = null)
    }
}

Kotlin 复制代码

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ArrowBack
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CustomTopAppBar(
    titleText: String,
    title: @Composable (String) -> Unit, 
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable (() -> Unit)? = null,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .height(56.dp)
            .padding(horizontal = 4.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        
        navigationIcon?.let {
            IconButton(onClick = {  }) {
                it()
            }
        }
        
        Box(
            modifier = Modifier.weight(1f),
            contentAlignment = Alignment.Center
        ) {
            title(titleText)
        }
      
        actions?.let {
            it()
        }
    }
}


@Composable
fun CustomTopAppBarDemo() {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        
        CustomTopAppBar(
            titleText = "首页",
            title = { text -> 
                Text(
                    text = text,
                    style = MaterialTheme.typography.titleLarge,
                    color = MaterialTheme.colorScheme.primary
                )
            },
            navigationIcon = {
                Icon(
                    imageVector = Icons.Outlined.ArrowBack,
                    contentDescription = "返回",
                    modifier = Modifier.size(24.dp)
                )
            },
            actions = {
                IconButton(onClick = {  }) {
                    Icon(
                        imageVector = Icons.Outlined.MoreVert,
                        contentDescription = "更多",
                        modifier = Modifier.size(24.dp)
                    )
                }
            }
        )

        CustomTopAppBar(
            titleText = "我的",
            title = { text ->
                Text(
                    text = text,
                    style = MaterialTheme.typography.titleLarge
                )
            },
            modifier = Modifier.padding(top = 20.dp)
        )
    }
}

注意:

1 避免不必要的重组：使用 remember 缓存插槽内容，减少重复计算。

2 单个插槽：命名为content并作为尾随lambda。

3 默认参数：为可选插槽提供合理的默认值。
原理:

1 Compose的组合性，Compose的UI是通过函数调用树（Composition Tree）构建的，每个@Composable函数代表一个UI节点。插槽模式利用这一特性，将子组件的某些部分暴露为参数，允许父组件通过传递不同的@Composable lambda来填充这些插槽，从而动态改变子组件的内部结构。

2 重组与状态管理，当父组件的状态变化时，传递的@Composable lambda会重新执行，导致子组件中对应的插槽内容更新。这种机制确保了UI的响应式更新，同时保持了代码的模块化。