Jetpack Compose层级感知：如何让Chip组件优雅感知兄弟节点与父容器状态

Great question! This is a common pain point when building compound components in Jetpack Compose—we want to avoid passing redundant state down to children and let components automatically adapt to their context. Let's break down solutions for both of your requirements:

1. Let Chips Automatically Detect Their First/Last Position #

Instead of manually passing isFirst/isLast to each Chip, we can use ParentData and a custom Layout in the Chips container to communicate position info to child chips. Here's how:

Step 1: Define ParentData for Chip Context #

First, create a data class to hold position state, and a modifier extension to attach this data to chips:

import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ParentDataModifier

private data class ChipParentData(
    var isFirst: Boolean = false,
    var isLast: Boolean = false
) : ParentDataModifier {
    override fun Density.modifyParentData(parentData: Any?): Any = this@ChipParentData
}

private val Modifier.chipParentData: ChipParentData
    get() = parentData as? ChipParentData ?: ChipParentData().also {
        this.then(it)
    }

Step 2: Build a Custom Chips Container Layout #

The Chips container will measure its children, calculate their positions, and update the ChipParentData for each child:

import androidx.compose.foundation.layout.Layout
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp

@Composable
fun Chips(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        val chipCount = measurables.size
        val spacing = 8.dp.roundToPx()

        // Measure each chip and set its position state
        val placeables = measurables.mapIndexed { index, measurable ->
            measurable.chipParentData.apply {
                isFirst = index == 0
                isLast = index == chipCount - 1
            }
            measurable.measure(constraints)
        }

        // Calculate total layout size
        val totalWidth = placeables.sumOf { it.width } + max(0, chipCount - 1) * spacing
        val totalHeight = placeables.maxOfOrNull { it.height } ?: 0

        // Place chips in the layout
        layout(totalWidth, totalHeight) {
            var xOffset = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = xOffset, y = 0)
                xOffset += placeable.width + spacing
            }
        }
    }
}

Step 3: Update Chip to Use ParentData #

Modify the Chip component to read the position state from ParentData and apply appropriate styles:

import androidx.compose.foundation.background
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun Chip(
    text: String,
    modifier: Modifier = Modifier
) {
    val parentData = modifier.chipParentData
    val isFirst = parentData.isFirst
    val isLast = parentData.isLast

    // Apply dynamic shape based on position
    val chipShape = when {
        isFirst && isLast -> RoundedCornerShape(16.dp)
        isFirst -> RoundedCornerShape(topStart = 16.dp, bottomStart = 16.dp)
        isLast -> RoundedCornerShape(topEnd = 16.dp, bottomEnd = 16.dp)
        else -> RoundedCornerShape(0.dp)
    }

    // Apply dynamic background color based on position
    val chipColor = when {
        isFirst -> Color.Red.copy(alpha = 0.2f)
        isLast -> Color.Green.copy(alpha = 0.2f)
        else -> Color.Gray.copy(alpha = 0.2f)
    }

    Text(
        text = text,
        modifier = modifier
            .background(chipColor, chipShape)
            .padding(horizontal = 16.dp, vertical = 8.dp)
    )
}

Usage #

Now you can use Chips without manually setting position flags:

Chips {
    Chip(text = "Apple")
    Chip(text = "Banana")
    Chip(text = "Cherry")
}

2. Adapt Chips Container Style Based on Child Count #

To make the Chips container automatically adjust its color based on whether it has children, we can extend the custom layout to track child count and update the container's styling:

Updated Chips Container #

Wrap the custom Layout in a Box and use the child count to set the background:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color

@Composable
fun Chips(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    val chipCount = remember { mutableStateOf(0) }
    val containerColor = if (chipCount.value > 0) Color.LightGray.copy(alpha = 0.3f) else Color.Transparent

    Box(
        modifier = modifier.background(containerColor)
    ) {
        Layout(
            content = content
        ) { measurables, constraints ->
            chipCount.value = measurables.size
            val spacing = 8.dp.roundToPx()

            val placeables = measurables.mapIndexed { index, measurable ->
                measurable.chipParentData.apply {
                    isFirst = index == 0
                    isLast = index == chipCount.value - 1
                }
                measurable.measure(constraints)
            }

            val totalWidth = placeables.sumOf { it.width } + max(0, chipCount.value - 1) * spacing
            val totalHeight = placeables.maxOfOrNull { it.height } ?: 0

            layout(totalWidth, totalHeight) {
                var xOffset = 0
                placeables.forEach { placeable ->
                    placeable.placeRelative(x = xOffset, y = 0)
                    xOffset += placeable.width + spacing
                }
            }
        }
    }
}

Usage with Dynamic Children #

Now when you add/remove chips dynamically, the container will automatically update its color:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.material3.Button
import androidx.compose.foundation.layout.Column

@Composable
fun DynamicChipsDemo() {
    var addCherry by remember { mutableStateOf(true) }

    Column {
        Button(onClick = { addCherry = !addCherry }) {
            Text(text = if (addCherry) "Remove Cherry" else "Add Cherry")
        }

        Chips {
            Chip(text = "Apple")
            Chip(text = "Banana")
            if (addCherry) Chip(text = "Cherry")
        }
    }
}

This approach keeps your code clean, avoids redundant state passing, and lets components adapt to their context automatically!

内容的提问来源于stack exchange，提问作者Pascal Ganaye