Compose笔记(七十)--movableContentWithReceiverOf

这一节主要了解一下Compose中的movableContentWithReceiverOf，在Jetpack Compose开发中movableContentWithReceiverOf是用于创建可移动的组合内容的API，其核心作用是通过保留组合状态，实现将一段Composable内容封装为可在不同组合节点间"移动"的对象，避免重复重组和重新布局，提升性能。简单总结:

API:

MovableContent:可移动内容的核心类型，是封装后的Composable内容句柄

movableContentWithReceiverOf:创建带"接收者（Receiver）"的可移动内容，接收者可传递上下文数据

栗子:

Kotlin 复制代码

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.movableContentWithReceiverOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

data class ContentReceiver(
    val title: String,
    val color: Color,
    val count: Int 
)

@Composable
fun MovableContentWithReceiverDemo() {

    var count by remember { mutableStateOf(0) }
    var isRed by remember { mutableStateOf(false) }

    val movableContent = remember {
        movableContentWithReceiverOf<ContentReceiver> {
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .background(this.color.copy(alpha = 0.6f))
                        .padding(16.dp),
                    contentAlignment = androidx.compose.ui.Alignment.Center
                ) {
                    Column(horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally) {
                        Text(text = this@movableContentWithReceiverOf.title, color = Color.White, fontSize = 18.sp)
                        Text(text = "计数：${this@movableContentWithReceiverOf.count}", color = Color.White, fontSize = 14.sp)
                    }
                }
        }
    }

    val receiver = ContentReceiver(
        title = "带接收者的可复用内容",
        color = if (isRed) Color.Red else Color.Green,
        count = count
    )

    Column(modifier = Modifier.padding(16.dp)) {
        movableContent(receiver)

        Button(
            onClick = { count++ },
            modifier = Modifier.padding(top = 16.dp)
        ) {
            Text(text = "增加计数")
        }

        Button(
            onClick = { isRed = !isRed },
            modifier = Modifier.padding(top = 8.dp)
        ) {
            Text(text = "切换颜色")
        }
    }
}

Kotlin 复制代码

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Arrangement
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.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.ExperimentalComposeApi
import androidx.compose.runtime.InternalComposeApi
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.runtime.movableContentWithReceiverOf

data class CardReceiver(
    val cardId: Int,
    val title: String,
    val desc: String,
    val bgColor: Color,
    val isSelected: Boolean
)

@OptIn(ExperimentalComposeApi::class, InternalComposeApi::class) 
@Composable
fun ReusableCardGroup() {

    var selectedCardId by remember { mutableStateOf(1) }
    var clickCount by remember { mutableStateOf(0) }


    val cardContent = remember {
        movableContentWithReceiverOf<CardReceiver> {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                shape = RoundedCornerShape(12.dp),
                border = if (this.isSelected) {
                    BorderStroke(2.dp, Color.Black) 
                } else {
                    BorderStroke(1.dp, Color.Gray) 
                },
                colors = CardDefaults.cardColors(
                    containerColor = this.bgColor.copy(alpha = if (this.isSelected) 0.9f else 0.7f)
                ),
                elevation = CardDefaults.cardElevation(
                    defaultElevation = if (this.isSelected) 8.dp else 2.dp
                )
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {

                    Text(
                        text = this@movableContentWithReceiverOf.title,
                        fontSize = 18.sp,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )

                    Text(
                        text = "${this@movableContentWithReceiverOf.desc} | 全局点击数：$clickCount",
                        fontSize = 14.sp,
                        color = Color.White.copy(alpha = 0.8f),
                        modifier = Modifier.padding(top = 4.dp)
                    )

                    Text(
                        text = "卡片ID：${this@movableContentWithReceiverOf.cardId}",
                        fontSize = 12.sp,
                        color = Color.White.copy(alpha = 0.6f),
                        modifier = Modifier.padding(top = 8.dp)
                    )
                }
            }
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Button(
                onClick = {
                    selectedCardId = if (selectedCardId == 1) 2 else 1
                },
                modifier = Modifier.padding(4.dp)
            ) {
                Text(text = "切换选中卡片")
            }

            Button(
                onClick = { clickCount++ },
                modifier = Modifier.padding(4.dp)
            ) {
                Text(text = "点击计数+1")
            }
        }

     
        Column(modifier = Modifier.fillMaxWidth()) {
            val receiver1 = CardReceiver(
                cardId = 1,
                title = "用户信息卡片",
                desc = "姓名：张三 | 年龄：25",
                bgColor = Color(0xFF64B5F6), // 蓝色
                isSelected = selectedCardId == 1
            )
          
            val card1 = cardContent(receiver1)



           
            val receiver2 = CardReceiver(
                cardId = 2,
                title = "订单信息卡片",
                desc = "订单号：20260117 | 金额：99元",
                bgColor = Color(0xFF81C784), // 绿色
                isSelected = selectedCardId == 2
            )
           
            cardContent(receiver2)
        }

       
    }
}


@Composable
fun MovableContentDemoApp() {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(
            text = "movableContentWithReceiverOf Demo",
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(16.dp)
        )
        ReusableCardGroup()
    }
}

注意:

1 必须配合remember使用:movableContentWithReceiverOf需在remember块内调用，以确保组合内容在重新组合时不会被回收。

2 接收者类型需明确指定正确的接收者类型，否则无法访问布局相关的上下文。

3 参数传递需显式依赖项应通过参数传入。