Compose 布局与互操作

// Constraints 核心字段（简化）
// 实际实现使用 Long 位压缩，这里展开便于理解
data class Constraints(
    val minWidth: Int = 0,      // 允许的最小宽度（px）
    val maxWidth: Int = Infinity,// 允许的最大宽度（px），Infinity 表示不限
    val minHeight: Int = 0,     // 允许的最小高度（px）
    val maxHeight: Int = Infinity// 允许的最大高度（px）
)

// 一个简化的自定义布局，演示测量过程
@Composable
fun SimpleColumn(
    modifier: Modifier = Modifier,             // 接收外部修饰符
    content: @Composable () -> Unit             // 子内容 lambda
) {
    Layout(
        content = content,                      // 传入子 Composable
        modifier = modifier,                    // 传入修饰符链
        measurePolicy = { measurables, constraints ->
            // measurables: List<Measurable>，即所有子节点
            // constraints: 父节点传下来的约束
 
            // 第一步：逐个测量子节点，各自拿到 Placeable
            val placeables = measurables.map { measurable ->
                measurable.measure(constraints)  // 每个子节点只能调用一次 measure
            }
 
            // 第二步：根据所有子节点的尺寸，计算本容器的总尺寸
            val totalHeight = placeables.sumOf { it.height } // 高度累加（竖直排列）
            val maxWidth = placeables.maxOf { it.width }     // 宽度取最大值
 
            // 第三步：调用 layout() 声明本容器的尺寸，并进入放置阶段
            layout(maxWidth, totalHeight) {
                // 这里是 PlacementScope，进行 Place 操作（下一节详述）
                var yOffset = 0                               // 纵向偏移累加器
                placeables.forEach { placeable ->
                    placeable.placeRelative(0, yOffset)       // 将子节点放在 (0, yOffset)
                    yOffset += placeable.height               // 偏移量累加
                }
            }
        }
    )
}

// 放置阶段的几种方式对比
layout(totalWidth, totalHeight) {
    // 方式 1：绝对放置，不处理 RTL
    placeable.place(x = 0, y = 0)
 
    // 方式 2：相对放置，自动处理 RTL 镜像（推荐）
    placeable.placeRelative(x = 16, y = 0)
 
    // 方式 3：带图层放置，适合高频位移动画
    placeable.placeWithLayer(
        x = animatedOffsetX,   // 动画驱动的 x 偏移
        y = 0,
        layerBlock = {
            alpha = animatedAlpha       // 可在图层上直接设置透明度
            scaleX = animatedScale      // 也可设置缩放
            // translationX / rotationZ 等均可
        }
    )
}

@Composable
fun TextWithDivider() {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)           // 关键：让 Row 的高度等于子节点的最小固有高度
    ) {
        Text(
            text = "Hello Compose!",             // 文本子节点
            modifier = Modifier
                .weight(1f)                      // 占据剩余水平空间
                .padding(8.dp)                   // 内边距
        )
        Divider(                                 // 竖直分割线
            modifier = Modifier
                .fillMaxHeight()                 // 填满父容器高度（此时父高度已由 Intrinsics 确定）
                .width(1.dp),                    // 分割线宽度 1dp
            color = Color.Gray
        )
        Text(
            text = "World!",                     // 第二个文本
            modifier = Modifier
                .weight(1f)
                .padding(8.dp)
        )
    }
}

@Composable
fun TwoColumnLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier,
        measurePolicy = object : MeasurePolicy {
 
            // 正式测量逻辑
            override fun MeasureScope.measure(
                measurables: List<Measurable>,          // 子节点列表
                constraints: Constraints                // 父约束
            ): MeasureResult {
                // 将可用宽度平分给两列
                val halfWidth = constraints.maxWidth / 2 // 每列宽度
                val childConstraints = constraints.copy( // 构造子约束
                    minWidth = 0,                        // 子节点最小宽度为 0
                    maxWidth = halfWidth                 // 子节点最大宽度为一半
                )
                // 测量所有子节点
                val placeables = measurables.map { it.measure(childConstraints) }
                // 计算总高度（简化：取最大高度）
                val height = placeables.maxOfOrNull { it.height } ?: 0
                return layout(constraints.maxWidth, height) {
                    var x = 0                            // x 偏移
                    placeables.forEach { placeable ->
                        placeable.placeRelative(x, 0)    // 水平排列
                        x += halfWidth                   // 每个子节点偏移半宽
                    }
                }
            }
 
            // 自定义：给定高度约束，本布局的最小固有宽度
            override fun IntrinsicMeasureScope.minIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>, // 子节点（Intrinsic 版）
                height: Int                             // 给定的高度
            ): Int {
                // 两列布局：最小宽度 = 两个子节点最小宽度之和
                val maxChildMinWidth = measurables.maxOfOrNull {
                    it.minIntrinsicWidth(height)        // 查询每个子节点的最小固有宽度
                } ?: 0
                return maxChildMinWidth * 2             // 两列，所以乘 2
            }
 
            // 自定义：给定宽度约束，本布局的最小固有高度
            override fun IntrinsicMeasureScope.minIntrinsicHeight(
                measurables: List<IntrinsicMeasurable>,
                width: Int
            ): Int {
                val halfWidth = width / 2               // 每列可用宽度
                return measurables.maxOfOrNull {
                    it.minIntrinsicHeight(halfWidth)    // 在半宽约束下，子节点需要的最小高度
                } ?: 0
            }
 
            // maxIntrinsicWidth 和 maxIntrinsicHeight 同理，此处省略
            override fun IntrinsicMeasureScope.maxIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>,
                height: Int
            ): Int {
                val maxChildMaxWidth = measurables.maxOfOrNull {
                    it.maxIntrinsicWidth(height)
                } ?: 0
                return maxChildMaxWidth * 2
            }
 
            override fun IntrinsicMeasureScope.maxIntrinsicHeight(
                measurables: List<IntrinsicMeasurable>,
                width: Int
            ): Int {
                val halfWidth = width / 2
                return measurables.maxOfOrNull {
                    it.maxIntrinsicHeight(halfWidth)
                } ?: 0
            }
        }
    )
}

// ========== 写法 A：先 padding 后 background ==========
Box(
    modifier = Modifier
        .padding(16.dp)      // 第 1 层（最外层）：先在外围留出 16dp 空白
        .background(Color.Red) // 第 2 层（内层）：然后给剩余区域上色
        .size(100.dp)         // 第 3 层（最内层）：最终内容区 100x100
)
// 效果：红色区域周围有 16dp 透明间距，背景色不覆盖 padding
 
// ========== 写法 B：先 background 后 padding ==========
Box(
    modifier = Modifier
        .background(Color.Red) // 第 1 层（最外层）：先铺上红色背景
        .padding(16.dp)        // 第 2 层（内层）：在红色区域内部再向内缩 16dp
        .size(100.dp)          // 第 3 层（最内层）：最终内容区 100x100
)
// 效果：红色区域包含了 padding，整体尺寸为 132x132，内容区 100x100

Box(
    modifier = Modifier
        .padding(8.dp)          // 外层留白 8dp
        .background(Color.Blue) // 蓝色背景
        .padding(16.dp)         // 蓝色内部再留白 16dp
        .background(Color.Red)  // 红色背景
        .padding(4.dp)          // 红色内部留白 4dp
        .size(50.dp)            // 最终内容 50x50
)
// 最终效果：从外到内依次是 8dp透明 → 蓝色边框 → 16dp蓝色区域 → 红色背景 → 4dp红色区域 → 内容

// padding 区域可点击（clickable 在外层，尺寸包含 padding）
Modifier.clickable { }.padding(32.dp)
 
// 仅内容区域可点击（clickable 在内层，padding 已把区域缩小了）
Modifier.padding(32.dp).clickable { }

// Modifier.kt —— Compose 核心接口
interface Modifier {
 
    // 从左到右（从外到内）折叠：initial 是起始累加值，operation 对每个 Element 执行操作
    fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R
 
    // 从右到左（从内到外）折叠：initial 是起始累加值，operation 对每个 Element 执行操作
    fun <R> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R
 
    // 判断链中是否存在满足条件的 Element
    fun any(predicate: (Modifier.Element) -> Boolean): Boolean
 
    // 所有具体修饰符的基接口：每个 .padding()、.background() 都是一个 Element
    interface Element : Modifier {
        // Element 是叶子节点，foldIn 只需将自己交给 operation
        override fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R =
            operation(initial, this)
 
        // Element 是叶子节点，foldOut 同理
        override fun <R> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R =
            operation(this, initial)
    }
 
    // 伴生对象：空 Modifier，作为链的起点（类似数学中的单位元 identity）
    companion object : Modifier {
        override fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R = initial
        override fun <R> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R = initial
        override fun toString() = "Modifier"
    }
}

        CombinedModifier
       /                \
  CombinedModifier    SizeModifier
  /              \
PaddingModifier  BackgroundModifier

// Modifier 接口的默认 then 实现
fun then(other: Modifier): Modifier =
    if (other === Modifier) this   // 拼接单位元直接返回自身，短路优化
    else CombinedModifier(this, other) // 否则创建组合节点，this 为 outer，other 为 inner

// CombinedModifier.kt
class CombinedModifier(
    private val outer: Modifier,  // 链中先写的（外层）
    private val inner: Modifier   // 链中后写的（内层）
) : Modifier {
    override fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R =
        // 先折叠外层，结果作为累加值传给内层继续折叠
        inner.foldIn(outer.foldIn(initial, operation), operation)
 
    override fun <R> foldOut(initial: R, operation: (Modifier.Element, R) -> R): R =
        // 先折叠内层，结果作为累加值传给外层继续折叠
        outer.foldOut(inner.foldOut(initial, operation), operation)
}

foldIn(initial=R₀, op)
  ├── outer = CombinedModifier(Padding, Background)
  │     ├── outer = Padding  →  R₁ = op(R₀, Padding)     ← 第 1 个处理
  │     └── inner = Background → R₂ = op(R₁, Background)  ← 第 2 个处理
  └── inner = Size             → R₃ = op(R₂, Size)        ← 第 3 个处理
 
处理顺序：Padding → Background → Size（从外到内 ✓）

foldOut(initial=R₀, op)
  ├── inner = Size             → R₁ = op(Size, R₀)        ← 第 1 个处理
  │
  └── outer = CombinedModifier(Padding, Background)
        ├── inner = Background → R₂ = op(Background, R₁)  ← 第 2 个处理
        └── outer = Padding    → R₃ = op(Padding, R₂)     ← 第 3 个处理
 
处理顺序：Size → Background → Padding（从内到外 ✓）

// LayoutModifier 接口核心定义
interface LayoutModifier : Modifier.Element {
 
    /**
     * 在布局阶段被调用。
     * @param measurable   —— 代表"被此 Modifier 包裹的内层内容"，你可以对它进行测量
     * @param constraints  —— 父级传下来的约束（最小/最大 宽度/高度）
     * 返回值：MeasureResult —— 包含该 Modifier 节点自身的宽高，以及内层内容的放置逻辑
     */
    fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult
}

/**
 * 自定义 padding Modifier —— 经典 LayoutModifier 写法
 * @param horizontal 水平方向（左右各一半）的 padding 值
 * @param vertical   垂直方向（上下各一半）的 padding 值
 */
fun Modifier.customPadding(
    horizontal: Dp = 0.dp, // 水平 padding，默认 0
    vertical: Dp = 0.dp    // 垂直 padding，默认 0
): Modifier = this.then(  // 将自定义 Modifier 追加到现有链尾部
    CustomPaddingModifier(horizontal, vertical)
)
 
// 实现 LayoutModifier 接口的具体类
private class CustomPaddingModifier(
    private val horizontal: Dp, // 存储水平 padding 参数
    private val vertical: Dp    // 存储垂直 padding 参数
) : LayoutModifier {
 
    // 核心：参与测量与放置
    override fun MeasureScope.measure(
        measurable: Measurable,    // "内层内容"的测量代理
        constraints: Constraints   // 父级传入的约束范围
    ): MeasureResult {
 
        // Step 1：将 Dp 转换为像素值（roundToPx 使用 MeasureScope 提供的 density）
        val horizontalPx = horizontal.roundToPx() // 水平 padding 像素值
        val verticalPx = vertical.roundToPx()     // 垂直 padding 像素值
 
        // Step 2：缩小约束 —— 内层可用空间要减去左右和上下的 padding
        val newConstraints = constraints.offset(   // offset 是 Constraints 的工具函数
            horizontal = -horizontalPx * 2,        // 左右各占 horizontalPx，所以总共减 2 倍
            vertical = -verticalPx * 2             // 上下各占 verticalPx，所以总共减 2 倍
        )
 
        // Step 3：用缩小后的约束测量内层内容，得到 Placeable（含宽高信息）
        val placeable = measurable.measure(newConstraints)
 
        // Step 4：自身的总宽高 = 内层宽高 + 两侧 padding
        val totalWidth = placeable.width + horizontalPx * 2  // 总宽 = 内容宽 + 左右 padding
        val totalHeight = placeable.height + verticalPx * 2  // 总高 = 内容高 + 上下 padding
 
        // Step 5：调用 layout() 声明自身尺寸，并在 lambda 中放置内层
        return layout(totalWidth, totalHeight) {
            // 将内层内容偏移到 padding 之后的位置
            placeable.placeRelative(
                x = horizontalPx, // 向右偏移 horizontalPx（左 padding）
                y = verticalPx    // 向下偏移 verticalPx（上 padding）
            )
        }
    }
 
    // equals/hashCode 对于重组时的 Modifier 比较非常重要
    override fun equals(other: Any?): Boolean {
        if (this === other) return true                      // 同一引用直接相等
        if (other !is CustomPaddingModifier) return false    // 类型不匹配直接不等
        return horizontal == other.horizontal                // 比较水平值
                && vertical == other.vertical                // 比较垂直值
    }
 
    override fun hashCode(): Int {
        var result = horizontal.hashCode()   // 以 horizontal 的 hash 为基础
        result = 31 * result + vertical.hashCode() // 混入 vertical 的 hash
        return result
    }
}

/**
 * 新架构：Modifier.Node 版本的自定义 padding
 * 对外 API 不变，内部实现切换到 Node 架构
 */
fun Modifier.customPadding(
    horizontal: Dp = 0.dp,
    vertical: Dp = 0.dp
): Modifier = this then CustomPaddingElement(horizontal, vertical)
// 注意：这里用的是中缀 then，效果与 .then() 相同
 
/**
 * ModifierNodeElement —— 无状态工厂，负责创建和更新 Node
 * data class 自动生成 equals/hashCode，框架据此判断是否需要更新
 */
private data class CustomPaddingElement(
    val horizontal: Dp, // padding 参数（水平）
    val vertical: Dp    // padding 参数（垂直）
) : ModifierNodeElement<CustomPaddingNode>() {
 
    // 首次附加到 LayoutNode 时调用，创建 Node 实例
    override fun create() = CustomPaddingNode(horizontal, vertical)
 
    // 重组时参数发生变化，更新已有 Node（避免重建）
    override fun update(node: CustomPaddingNode) {
        node.horizontal = horizontal // 直接修改 Node 的属性
        node.vertical = vertical     // 直接修改 Node 的属性
    }
}
 
/**
 * Modifier.Node —— 有状态节点，实现 LayoutModifierNode 接口以参与测量/放置
 */
private class CustomPaddingNode(
    var horizontal: Dp, // 可变属性，update() 时会被修改
    var vertical: Dp    // 可变属性，update() 时会被修改
) : Modifier.Node(),    // 继承 Modifier.Node 基类
    LayoutModifierNode { // 实现布局修饰符能力接口
 
    // 与经典 LayoutModifier.measure() 签名几乎一致
    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult {
        // 将 Dp 转为 px
        val hPx = horizontal.roundToPx()
        val vPx = vertical.roundToPx()
 
        // 缩小约束，测量内层
        val placeable = measurable.measure(
            constraints.offset(
                horizontal = -hPx * 2, // 水平方向总共减去左右 padding
                vertical = -vPx * 2    // 垂直方向总共减去上下 padding
            )
        )
 
        // 声明自身尺寸并放置内层
        return layout(placeable.width + hPx * 2, placeable.height + vPx * 2) {
            placeable.placeRelative(hPx, vPx) // 内层向右下偏移一个 padding 的距离
        }
    }
}

Box(
    modifier = Modifier
        .size(200.dp)
        .padding(20.dp)
        .background(Color.Green)
        .padding(30.dp)
)

@Composable
fun UserCard(
    name: String,          // 用户名
    subtitle: String,      // 副标题
    avatarUrl: String,     // 头像地址
    isOnline: Boolean      // 是否在线
) {
    // 最外层 Row：头像在左，文字信息在右，水平排列
    Row(
        modifier = Modifier
            .fillMaxWidth()                    // 宽度撑满父容器
            .padding(16.dp),                   // 四周留白 16dp
        verticalAlignment = Alignment.CenterVertically // 子元素在垂直方向居中
    ) {
        // Box 用于层叠：头像 + 在线状态小绿点
        Box(
            contentAlignment = Alignment.BottomEnd // 默认内容对齐到右下角
        ) {
            // 头像图片（底层）
            AsyncImage(
                model = avatarUrl,             // 图片 URL
                contentDescription = "头像",    // 无障碍描述
                modifier = Modifier
                    .size(48.dp)               // 固定 48dp 大小
                    .clip(CircleShape)          // 裁剪为圆形
            )
            // 在线状态指示器（上层，叠在头像右下角）
            if (isOnline) {
                Box(
                    modifier = Modifier
                        .size(12.dp)                        // 小圆点 12dp
                        .background(Color(0xFF4CAF50), CircleShape) // 绿色圆形背景
                        .border(2.dp, Color.White, CircleShape)     // 白色描边避免与头像融合
                )
            }
        }
 
        // Spacer 在 Row 中充当水平间距
        Spacer(modifier = Modifier.width(12.dp)) // 头像与文字之间留 12dp
 
        // Column 用于垂直排列用户名和副标题
        Column(
            modifier = Modifier.weight(1f),     // 占据 Row 中剩余的所有水平空间
            verticalArrangement = Arrangement.Center // 文字在垂直方向居中分布
        ) {
            // 用户名（主标题）
            Text(
                text = name,                    // 显示用户名
                style = MaterialTheme.typography.titleMedium, // Material 中等标题样式
                maxLines = 1,                   // 最多一行
                overflow = TextOverflow.Ellipsis // 超出部分显示省略号
            )
            // 副标题
            Text(
                text = subtitle,                // 显示副标题文字
                style = MaterialTheme.typography.bodySmall, // Material 小号正文样式
                color = MaterialTheme.colorScheme.onSurfaceVariant, // 使用次要文字颜色
                maxLines = 1,                   // 最多一行
                overflow = TextOverflow.Ellipsis // 超出部分省略
            )
        }
    }
}

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,                          // 整体修饰符
    topBar: @Composable () -> Unit = {},                     // 顶部栏插槽
    bottomBar: @Composable () -> Unit = {},                  // 底部栏插槽
    snackbarHost: @Composable () -> Unit = {},               // Snackbar 宿主插槽
    floatingActionButton: @Composable () -> Unit = {},       // FAB 插槽
    floatingActionButtonPosition: FabPosition = FabPosition.End, // FAB 位置（End 或 Center）
    containerColor: Color = MaterialTheme.colorScheme.background, // 容器背景色
    contentColor: Color = contentColorFor(containerColor),   // 内容默认颜色
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets, // 内容区域的窗口 insets
    content: @Composable (PaddingValues) -> Unit             // 主内容插槽（核心）
) { /* ... */ }

@OptIn(ExperimentalMaterial3Api::class) // TopAppBar 在 Material3 中仍标记为实验性
@Composable
fun MainScreen(
    onNavigateToSettings: () -> Unit // 导航到设置页的回调
) {
    // SnackbarHostState 用于控制 Snackbar 的显示
    val snackbarHostState = remember { SnackbarHostState() }
    // 协程作用域，用于在点击事件中启动 Snackbar
    val scope = rememberCoroutineScope()
 
    Scaffold(
        // 顶部栏：使用 Material3 的 TopAppBar
        topBar = {
            TopAppBar(
                title = { Text("首页") },          // 标题文字
                actions = {                          // 右侧操作按钮区域
                    IconButton(onClick = onNavigateToSettings) { // 点击跳转设置
                        Icon(
                            imageVector = Icons.Default.Settings,   // 齿轮图标
                            contentDescription = "设置"             // 无障碍描述
                        )
                    }
                }
            )
        },
        // 底部栏：底部导航
        bottomBar = {
            NavigationBar {                           // Material3 底部导航栏
                NavigationBarItem(                    // 导航项 - 首页
                    selected = true,                  // 当前选中
                    onClick = { },                    // 点击回调
                    icon = { Icon(Icons.Default.Home, contentDescription = "首页") },
                    label = { Text("首页") }          // 标签文字
                )
                NavigationBarItem(                    // 导航项 - 消息
                    selected = false,                 // 未选中
                    onClick = { },                    // 点击回调
                    icon = { Icon(Icons.Default.Email, contentDescription = "消息") },
                    label = { Text("消息") }          // 标签文字
                )
            }
        },
        // Snackbar 宿主
        snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
        // 浮动操作按钮
        floatingActionButton = {
            FloatingActionButton(
                onClick = {                           // FAB 点击时弹出 Snackbar
                    scope.launch {                    // 在协程中调用 suspend 函数
                        snackbarHostState.showSnackbar(
                            message = "新建成功",     // Snackbar 消息
                            duration = SnackbarDuration.Short // 短暂显示
                        )
                    }
                }
            ) {
                Icon(Icons.Default.Add, contentDescription = "新建") // FAB 图标
            }
        }
    ) { innerPadding ->
        // ⚠️ 必须使用 innerPadding，否则内容会被 TopBar/BottomBar 遮挡
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()                        // 撑满可用空间
                .padding(innerPadding)                // 应用 Scaffold 计算的内边距
        ) {
            items(50) { index ->                      // 生成 50 个列表项
                Text(
                    text = "Item #$index",            // 显示序号
                    modifier = Modifier
                        .fillMaxWidth()               // 宽度撑满
                        .padding(16.dp)               // 内边距
                )
            }
        }
    }
}

LazyColumn(
    contentPadding = innerPadding // 内容内边距，不影响滚动条和边缘效果的位置
) { /* ... */ }

@Composable
fun InfoCard(
    title: String,                               // 卡片标题
    description: String,                          // 卡片描述
    onClick: () -> Unit,                          // 点击回调
    modifier: Modifier = Modifier                 // 外部传入的修饰符
) {
    // 使用可点击版本的 Surface，自带 ripple 和无障碍标记
    Surface(
        onClick = onClick,                        // 点击回调
        modifier = modifier.fillMaxWidth(),       // 宽度撑满
        shape = RoundedCornerShape(12.dp),        // 12dp 圆角
        shadowElevation = 2.dp,                   // 2dp 投影阴影
        tonalElevation = 1.dp,                    // 1dp 色调提升（Dark Theme 中生效明显）
        color = MaterialTheme.colorScheme.surface, // 使用 Material 主题的 surface 颜色
        // contentColor 会自动推导为 onSurface，无需手动指定
    ) {
        // Surface 内部使用 Column 排列标题和描述
        Column(
            modifier = Modifier.padding(16.dp)    // 内边距 16dp
        ) {
            // 标题文字——自动继承 Surface 提供的 contentColor
            Text(
                text = title,                     // 标题内容
                style = MaterialTheme.typography.titleMedium // 中等标题字体
            )
            Spacer(modifier = Modifier.height(8.dp)) // 标题与描述之间 8dp 间距
            // 描述文字——使用 onSurfaceVariant 次要颜色
            Text(
                text = description,               // 描述内容
                style = MaterialTheme.typography.bodyMedium, // 中号正文字体
                color = MaterialTheme.colorScheme.onSurfaceVariant // 次要文字色
            )
        }
    }
}

// 引入 Compose 版本的 ConstraintLayout 依赖：
// implementation("androidx.constraintlayout:constraintlayout-compose:1.1.x")
 
@Composable
fun ProfileCard() {
    // ConstraintLayout 本身是一个 Composable，接收 Modifier 和一个 lambda
    // lambda 的 receiver 是 ConstraintLayoutScope，提供了 createRefs() 等 DSL 方法
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()       // 宽度充满父布局
            .padding(16.dp)       // 四周留 16dp 内边距
    ) {
        // 1. 创建引用（Reference）—— 每个引用对应一个子组件的"锚点身份"
        //    createRefs() 通过解构声明，一次可创建多个引用
        val (avatar, name, bio) = createRefs()
 
        // 2. 通过 Modifier.constrainAs(ref) { ... } 为组件绑定引用并声明约束
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "头像",                     // 无障碍描述
            modifier = Modifier
                .size(64.dp)                                  // 头像尺寸 64x64
                .clip(CircleShape)                            // 裁剪为圆形
                .constrainAs(avatar) {                        // 绑定到 avatar 引用
                    top.linkTo(parent.top)                    // 顶部对齐父布局顶部
                    start.linkTo(parent.start)                // 起始边对齐父布局起始边
                }
        )
 
        Text(
            text = "Claude",
            style = MaterialTheme.typography.titleMedium,     // Material 标题样式
            modifier = Modifier.constrainAs(name) {           // 绑定到 name 引用
                top.linkTo(avatar.top)                        // 顶部对齐头像顶部
                start.linkTo(avatar.end, margin = 12.dp)     // 起始边在头像右侧，间距 12dp
            }
        )
 
        Text(
            text = "Android Application Architect",
            style = MaterialTheme.typography.bodyMedium,      // Material 正文样式
            modifier = Modifier.constrainAs(bio) {            // 绑定到 bio 引用
                top.linkTo(name.bottom, margin = 4.dp)        // 顶部在 name 底部下方 4dp
                start.linkTo(name.start)                      // 起始边对齐 name 的起始边
                end.linkTo(parent.end)                        // 结束边对齐父布局结束边
                width = Dimension.fillToConstraints            // 宽度填充到约束边界之间
            }
        )
    }
}

@Composable
fun DecoupledExample() {
    // 1. 在 Composable 外部（或提前）定义 ConstraintSet
    //    ConstraintSet 是一个纯数据描述，不依赖任何 Composable 上下文
    val constraints = ConstraintSet {
        // 通过 createRefFor(id) 创建具名引用，id 使用字符串标识
        val title = createRefFor("title")           // 用 "title" 作为唯一标识
        val subtitle = createRefFor("subtitle")     // 用 "subtitle" 作为唯一标识
 
        // 使用 constrain(ref) { ... } 为引用声明约束（注意不是 constrainAs）
        constrain(title) {
            top.linkTo(parent.top)                  // 标题顶部对齐父布局顶部
            start.linkTo(parent.start)              // 标题起始边对齐父布局起始边
        }
 
        constrain(subtitle) {
            top.linkTo(title.bottom, margin = 8.dp) // 副标题在标题下方 8dp
            start.linkTo(title.start)               // 副标题与标题左对齐
        }
    }
 
    // 2. 将 ConstraintSet 传入 ConstraintLayout
    ConstraintLayout(
        constraintSet = constraints,                 // 传入预定义的约束集合
        modifier = Modifier.fillMaxSize()            // 充满整个屏幕
    ) {
        // 3. 子组件通过 layoutId 与 ConstraintSet 中的引用匹配
        //    layoutId("title") 将此 Text 与 constraints 中 "title" 引用绑定
        Text(
            text = "解耦模式标题",
            modifier = Modifier.layoutId("title")    // 关键：通过 layoutId 映射
        )
        Text(
            text = "副标题内容",
            modifier = Modifier.layoutId("subtitle") // 映射到 "subtitle" 引用
        )
    }
}

// createRef() —— 单个引用
val button = createRef()
 
// createRefs() —— 解构声明，一次创建多个
// 内部利用 operator fun componentN() 实现解构
val (header, body, footer) = createRefs()

val constraints = ConstraintSet {
    // createRefFor 接收一个 id 参数，用于和子组件的 layoutId 配对
    val card = createRefFor("card")           // id = "card"
    val badge = createRefFor("badge")         // id = "badge"
    // ...
}

constrain(myRef) {
    // 水平居中：左边和右边同时连接 parent 的左右两边
    start.linkTo(parent.start)       // 起始边连接父布局起始边
    end.linkTo(parent.end)           // 结束边连接父布局结束边
    // 当左右都连接 parent 时，组件默认水平居中（偏移量为 0.5）
    // 等价于直接调用：centerHorizontallyTo(parent)
}

constrain(myRef) {
    start.linkTo(parent.start)        // 左约束
    end.linkTo(parent.end)            // 右约束
    // bias = 0f → 完全贴左，0.5f → 居中（默认），1f → 完全贴右
    horizontalBias = 0.3f             // 偏向起始边 30% 的位置
}

@Composable
fun FormLayout() {
    ConstraintLayout(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        // 创建所有引用
        val (label1, label2, input1, input2) = createRefs()
 
        // 创建一个"结束边屏障"，监控 label1 和 label2 的 end 边
        // 屏障的位置 = max(label1.end, label2.end)
        // margin 参数为屏障在最远边基础上额外增加的间距
        val labelsBarrier = createEndBarrier(label1, label2, margin = 12.dp)
 
        Text(
            text = "用户名",
            modifier = Modifier.constrainAs(label1) {        // 标签 1
                top.linkTo(parent.top)                        // 顶部对齐父布局
                start.linkTo(parent.start)                    // 起始边对齐父布局
            }
        )
 
        Text(
            text = "电子邮箱地址",                              // 比"用户名"更长
            modifier = Modifier.constrainAs(label2) {         // 标签 2
                top.linkTo(label1.bottom, margin = 16.dp)     // 在标签 1 下方 16dp
                start.linkTo(parent.start)                    // 起始边对齐父布局
            }
        )
 
        // 输入框 1 的 start 边约束到 Barrier 而非某个具体标签
        OutlinedTextField(
            value = "", onValueChange = {},
            modifier = Modifier.constrainAs(input1) {
                top.linkTo(label1.top)                        // 垂直对齐标签 1
                start.linkTo(labelsBarrier)                   // 关键：起始边对齐屏障
                end.linkTo(parent.end)                        // 结束边对齐父布局
                width = Dimension.fillToConstraints            // 宽度填充约束空间
            }
        )
 
        // 输入框 2 同样约束到 Barrier
        OutlinedTextField(
            value = "", onValueChange = {},
            modifier = Modifier.constrainAs(input2) {
                top.linkTo(label2.top)                        // 垂直对齐标签 2
                start.linkTo(labelsBarrier)                   // 起始边对齐同一个屏障
                end.linkTo(parent.end)                        // 结束边对齐父布局
                width = Dimension.fillToConstraints            // 宽度填充约束空间
            }
        )
    }
}

@Composable
fun GuidelineDemo() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        // ---- 垂直引导线（竖线）----
        // 方式一：距离起始边固定距离
        val startGuide = createGuidelineFromStart(offset = 80.dp)
 
        // 方式二：按父布局宽度的百分比定位
        // fraction = 0.3f 表示距离起始边 30% 的位置
        val percentGuide = createGuidelineFromStart(fraction = 0.3f)
 
        // 方式三：距离结束边固定距离
        val endGuide = createGuidelineFromEnd(offset = 24.dp)
 
        // ---- 水平引导线（横线）----
        // 距离顶部 56dp（常用于 Toolbar 下方基准线）
        val topGuide = createGuidelineFromTop(offset = 56.dp)
 
        // 距离顶部 50% 的位置（屏幕垂直中线）
        val centerGuide = createGuidelineFromTop(fraction = 0.5f)
 
        val (header, content) = createRefs()
 
        // 使用引导线作为约束锚点
        Text(
            text = "Header Area",
            modifier = Modifier.constrainAs(header) {
                top.linkTo(parent.top)             // 顶部对齐父布局
                bottom.linkTo(topGuide)            // 底部对齐到水平引导线
                start.linkTo(parent.start)         // 水平充满
                end.linkTo(parent.end)             // 水平充满
                height = Dimension.fillToConstraints // 高度填充约束空间
            }
        )
 
        Text(
            text = "Content starts after guideline",
            modifier = Modifier.constrainAs(content) {
                top.linkTo(topGuide, margin = 8.dp)  // 顶部在引导线下方 8dp
                start.linkTo(startGuide)              // 起始边对齐垂直引导线
            }
        )
    }
}

@Composable
fun LoginScreen() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        // 创建两条垂直引导线，划定输入区域的左右边界
        val leftGuide = createGuidelineFromStart(fraction = 0.15f)  // 15% 位置
        val rightGuide = createGuidelineFromEnd(fraction = 0.15f)   // 距结束边 15%
 
        // 创建一条水平引导线，确定输入区域的起始高度
        val topGuide = createGuidelineFromTop(fraction = 0.35f)     // 35% 位置
 
        val (emailField, passField, loginBtn) = createRefs()
 
        OutlinedTextField(
            value = "", onValueChange = {},
            label = { Text("Email") },                     // 输入框标签
            modifier = Modifier.constrainAs(emailField) {
                top.linkTo(topGuide)                        // 在 35% 高度处开始
                start.linkTo(leftGuide)                     // 左边界对齐 15% 引导线
                end.linkTo(rightGuide)                      // 右边界对齐 85% 引导线
                width = Dimension.fillToConstraints          // 宽度充满两条引导线之间
            }
        )
 
        OutlinedTextField(
            value = "", onValueChange = {},
            label = { Text("Password") },                  // 密码框标签
            modifier = Modifier.constrainAs(passField) {
                top.linkTo(emailField.bottom, margin = 12.dp) // 在邮箱框下方 12dp
                start.linkTo(leftGuide)                       // 同样对齐引导线
                end.linkTo(rightGuide)
                width = Dimension.fillToConstraints
            }
        )
 
        Button(
            onClick = { /* 登录逻辑 */ },
            modifier = Modifier.constrainAs(loginBtn) {
                top.linkTo(passField.bottom, margin = 24.dp)  // 在密码框下方 24dp
                start.linkTo(leftGuide)                        // 对齐引导线
                end.linkTo(rightGuide)
                width = Dimension.fillToConstraints
            }
        ) {
            Text("登录")                                       // 按钮文字
        }
    }
}

@Composable
fun ChainExample() {
    ConstraintLayout(modifier = Modifier.fillMaxWidth().height(120.dp)) {
        val (btn1, btn2, btn3) = createRefs()
 
        // 创建一条水平链，将三个按钮串联起来
        // chainStyle 控制分布方式：
        //   Spread       → 等间距分布（默认），两端也有间距
        //   SpreadInside → 等间距但两端贴边
        //   Packed       → 所有元素紧凑聚拢在中间
        createHorizontalChain(
            btn1, btn2, btn3,                               // 链中的成员
            chainStyle = ChainStyle.SpreadInside             // 两端贴边，中间等距
        )
 
        Button(
            onClick = {},
            modifier = Modifier.constrainAs(btn1) {
                centerVerticallyTo(parent)                   // 垂直居中
            }
        ) { Text("A") }
 
        Button(
            onClick = {},
            modifier = Modifier.constrainAs(btn2) {
                centerVerticallyTo(parent)                   // 垂直居中
            }
        ) { Text("B") }
 
        Button(
            onClick = {},
            modifier = Modifier.constrainAs(btn3) {
                centerVerticallyTo(parent)                   // 垂直居中
            }
        ) { Text("C") }
    }
}

// LazyColumn 基本用法示例
LazyColumn(
    // Modifier 定义列表整体的大小、边距等外观属性
    modifier = Modifier.fillMaxSize(),
    // contentPadding 为列表内容区域添加内边距，不会裁剪滚动内容
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
    // verticalArrangement 控制子项之间的垂直间距
    verticalArrangement = Arrangement.spacedBy(8.dp),
    // state 用于观察和控制滚动位置
    state = rememberLazyListState()
) {
    // item {} 声明单个条目
    item {
        // 这里放置列表头部的 Composable
        HeaderSection()
    }
    // items() 接收一个列表，为每个数据元素生成条目
    items(
        items = userList,       // 数据源列表
        key = { it.id }         // 为每个条目提供唯一且稳定的 key
    ) { user ->
        // 这里是每个数据条目对应的 Composable
        UserCard(user = user)
    }
    // item {} 声明列表尾部
    item {
        FooterSection()
    }
}

LazyColumn {
    // 为不同类型的 item 指定不同的 contentType
    items(
        items = feedItems,
        key = { it.id },
        // contentType 告诉 Compose 这个 item 的 UI 结构类型
        contentType = { item ->
            when (item) {
                is TextPost -> "text"       // 纯文本帖子
                is ImagePost -> "image"     // 图片帖子
                is VideoPost -> "video"     // 视频帖子
            }
        }
    ) { item ->
        // 根据类型渲染不同的 Composable
        when (item) {
            is TextPost -> TextPostCard(item)
            is ImagePost -> ImagePostCard(item)
            is VideoPost -> VideoPostCard(item)
        }
    }
}

// ✅ 正确做法：使用业务数据的唯一标识符
items(
    items = messages,
    key = { message -> message.id } // 数据库主键 / 服务端 ID
) { message ->
    MessageBubble(message)
}
 
// ❌ 错误做法 1：使用 index 作为 key（等于没设 key）
items(
    items = messages,
    key = { index -> index } // 插入/删除时 index 会变化，无法稳定标识
) { message ->
    MessageBubble(message)
}
 
// ❌ 错误做法 2：使用不稳定的值作为 key
items(
    items = messages,
    key = { message -> message.hashCode() } // hashCode 可能冲突，且不稳定
) { message ->
    MessageBubble(message)
}
 
// ❌ 错误做法 3：使用可变数据作为 key
items(
    items = messages,
    key = { message -> message.content } // content 可能被编辑，key 不应变化
) { message ->
    MessageBubble(message)
}

items(
    items = notes,
    key = { it.id }
) { note ->
    // ✅ 使用 rememberSaveable，即使 item 滑出视口再回来，展开状态也不会丢失
    var isExpanded by rememberSaveable { mutableStateOf(false) }
    
    // ❌ 使用 remember，item 滑出视口再回来后 isExpanded 会重置为 false
    // var isExpanded by remember { mutableStateOf(false) }
    
    NoteCard(
        note = note,
        isExpanded = isExpanded,
        onToggle = { isExpanded = !isExpanded }
    )
}

// 假设 contacts 已按首字母分组：Map<Char, List<Contact>>
val grouped: Map<Char, List<Contact>> = contacts.groupBy { it.name.first() }
 
LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    grouped.forEach { (initial, contactsForInitial) ->
        // stickyHeader 声明一个粘性标题
        stickyHeader(
            key = "header_$initial" // 为 header 也提供稳定的 key
        ) {
            // 标题的 Composable 内容
            Text(
                text = initial.toString(),
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MaterialTheme.colorScheme.primaryContainer)
                    .padding(horizontal = 16.dp, vertical = 8.dp),
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.onPrimaryContainer
            )
        }
        // items 声明该分组下的所有联系人
        items(
            items = contactsForInitial,
            key = { it.id } // 每个联系人也有唯一 key
        ) { contact ->
            ContactRow(contact)
        }
    }
}

@Composable
fun GroupedContactList(
    // 接收已按首字母分组的联系人数据
    groupedContacts: Map<Char, List<Contact>>
) {
    // 创建并记住 LazyListState，可用于程序化滚动控制
    val listState = rememberLazyListState()
 
    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize(),
        // 内容区域顶部和底部留出间距，避免被 StatusBar / NavigationBar 遮挡
        contentPadding = PaddingValues(vertical = 8.dp)
    ) {
        // 遍历每个分组
        groupedContacts.forEach { (letter, contacts) ->
 
            // 粘性标题：显示分组字母
            stickyHeader(key = "header_$letter") {
                // Surface 提供背景色和阴影，确保粘住时能遮盖下方内容
                Surface(
                    modifier = Modifier.fillMaxWidth(),
                    color = MaterialTheme.colorScheme.surfaceVariant,
                    // tonalElevation 提供微妙的层次感
                    tonalElevation = 2.dp
                ) {
                    Text(
                        text = letter.toString(),
                        modifier = Modifier.padding(
                            horizontal = 16.dp,
                            vertical = 12.dp
                        ),
                        style = MaterialTheme.typography.titleSmall
                    )
                }
            }
 
            // 该分组下的联系人列表
            items(
                items = contacts,
                // 业务唯一 ID 确保数据变更时精准 diff
                key = { contact -> contact.id },
                // 同一 contentType 确保滑出/滑入时 Composition 高效复用
                contentType = { "contact_item" }
            ) { contact ->
                // 使用 rememberSaveable 保存展开状态
                // 即使滑出视口再回来，状态不丢失
                var expanded by rememberSaveable { mutableStateOf(false) }
                
                ContactCard(
                    contact = contact,
                    isExpanded = expanded,
                    onToggleExpand = { expanded = !expanded },
                    modifier = Modifier
                        // animateItem 为 item 增/删/移动提供动画
                        // 需要稳定的 key 才能正确工作
                        .animateItem(
                            fadeInSpec = tween(durationMillis = 250),
                            fadeOutSpec = tween(durationMillis = 250),
                            placementSpec = spring(
                                dampingRatio = Spring.DampingRatioMediumBouncy,
                                stiffness = Spring.StiffnessLow
                            )
                        )
                )
            }
        }
    }
}

@Composable
fun Layout(
    content: @Composable () -> Unit,   // 子 Composable 内容（槽位 Slot）
    modifier: Modifier = Modifier,     // 应用于该布局节点自身的修饰符链
    measurePolicy: MeasurePolicy       // 测量与放置策略（核心）
)

@Composable
fun SimpleColumn(
    modifier: Modifier = Modifier,               // 外部传入的修饰符
    content: @Composable () -> Unit               // 子 Composable 槽位
) {
    Layout(                                        // 调用 Layout Composable
        content = content,                         // 传递子元素内容
        modifier = modifier,                       // 传递修饰符链
        measurePolicy = { measurables, constraints ->
            // ── 第一步：测量所有子元素 ──
            // measurables 是子元素的可测量代理列表（List<Measurable>）
            // constraints 是父布局传下来的约束（最小/最大 宽度/高度）
            val placeables = measurables.map { measurable ->
                // 用父级约束直接测量每个子元素
                // 这里没有修改约束，子元素会拿到和父级相同的约束范围
                measurable.measure(constraints)
            }
 
            // ── 第二步：确定自身尺寸 ──
            // 宽度取所有子元素中最宽的那个
            val width = placeables.maxOfOrNull { it.width } ?: 0
            // 高度为所有子元素高度之和
            val height = placeables.sumOf { it.height }
 
            // layout() 函数：声明自身尺寸并进入放置作用域
            layout(width, height) {
                // ── 第三步：放置子元素 ──
                var yOffset = 0                    // 记录当前 y 轴偏移量
                placeables.forEach { placeable ->
                    // 将子元素放置在 (0, yOffset) 位置
                    placeable.placeRelative(
                        x = 0,
                        y = yOffset
                    )
                    // 累加 y 偏移量，下一个子元素紧接在下方
                    yOffset += placeable.height
                }
            }
        }
    )
}

Measurable  ──measure(constraints)──▶  Placeable
（未测量）                                （已测量，持有 width/height）

val placeables = measurables.map { measurable ->
    // 创建一份新约束：将最小宽度/高度设为 0，最大值保持不变
    // 这样子元素可以自由决定自己的最小尺寸，不被强制撑满
    val looseConstraints = constraints.copy(
        minWidth = 0,       // 子元素宽度下限放开为 0
        minHeight = 0       // 子元素高度下限放开为 0
    )
    measurable.measure(looseConstraints)  // 用宽松约束测量子元素
}

@JvmDefaultWithCompatibility
fun interface MeasurePolicy {
    // ── 核心方法：测量与放置 ──
    // MeasureScope 提供了 layout() 函数和布局方向等上下文信息
    // measurables：子元素的可测量代理列表
    // constraints：父级传递下来的约束
    fun MeasureScope.measure(
        measurables: List<Measurable>,       // 所有子元素
        constraints: Constraints              // 父级约束
    ): MeasureResult                          // 返回测量结果（含自身尺寸 + 放置逻辑）
 
    // ── 固有特性方法（可选重写）──
    // 最小固有宽度：给定高度下，布局内容能正常显示所需的最小宽度
    fun IntrinsicMeasureScope.minIntrinsicWidth(
        measurables: List<IntrinsicMeasurable>,
        height: Int
    ): Int = 0  // 默认返回 0
 
    // 最小固有高度：给定宽度下，布局内容能正常显示所需的最小高度
    fun IntrinsicMeasureScope.minIntrinsicHeight(
        measurables: List<IntrinsicMeasurable>,
        width: Int
    ): Int = 0  // 默认返回 0
 
    // 最大固有宽度
    fun IntrinsicMeasureScope.maxIntrinsicWidth(
        measurables: List<IntrinsicMeasurable>,
        height: Int
    ): Int = 0  // 默认返回 0
 
    // 最大固有高度
    fun IntrinsicMeasureScope.maxIntrinsicHeight(
        measurables: List<IntrinsicMeasurable>,
        width: Int
    ): Int = 0  // 默认返回 0
}

@Composable
fun EqualWidthColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier,
        measurePolicy = object : MeasurePolicy {
            // ── 核心测量逻辑 ──
            override fun MeasureScope.measure(
                measurables: List<Measurable>,
                constraints: Constraints
            ): MeasureResult {
                // 第一步：用宽松约束预测量，获取每个子元素的自然宽度
                val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
                val placeables = measurables.map { it.measure(looseConstraints) }
                // 第二步：取最大宽度作为统一宽度
                val maxChildWidth = placeables.maxOfOrNull { it.width } ?: 0
                // 第三步：自身高度为所有子元素高度之和
                val totalHeight = placeables.sumOf { it.height }
                // 第四步：放置
                return layout(maxChildWidth, totalHeight) {
                    var y = 0
                    placeables.forEach { placeable ->
                        placeable.placeRelative(0, y)  // 左对齐放置
                        y += placeable.height           // 累加垂直偏移
                    }
                }
            }
 
            // ── 固有特性：最小固有宽度 ──
            // 语义："要让所有子元素都能正常显示，最少需要多宽？"
            // 答案：所有子元素的最小固有宽度中的最大值
            override fun IntrinsicMeasureScope.minIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>,
                height: Int
            ): Int {
                // 遍历所有子元素，取它们各自最小固有宽度的最大值
                return measurables.maxOfOrNull {
                    it.minIntrinsicWidth(height)       // 递归查询子元素
                } ?: 0
            }
 
            // ── 固有特性：最小固有高度 ──
            override fun IntrinsicMeasureScope.minIntrinsicHeight(
                measurables: List<IntrinsicMeasurable>,
                width: Int
            ): Int {
                // 垂直堆叠：高度为所有子元素最小固有高度之和
                return measurables.sumOf {
                    it.minIntrinsicHeight(width)       // 递归查询子元素
                }
            }
 
            // maxIntrinsicWidth / maxIntrinsicHeight 同理，此处省略
            // ...
        }
    )
}

@Composable
fun CircularLayout(
    modifier: Modifier = Modifier,
    radius: Dp = 100.dp,                          // 圆的半径
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // ── 测量所有子元素（使用无限制约束，让子元素自由决定大小）──
        val placeables = measurables.map { measurable ->
            measurable.measure(
                Constraints()                      // 默认构造 = 无最小/无最大限制
            )
        }
 
        // ── 将半径从 dp 转换为 px ──
        val radiusPx = radius.roundToPx()          // MeasureScope 自带 density
 
        // ── 计算自身尺寸：直径 + 最大子元素尺寸（确保不裁剪）──
        val maxChildWidth = placeables.maxOfOrNull { it.width } ?: 0
        val maxChildHeight = placeables.maxOfOrNull { it.height } ?: 0
        val diameter = radiusPx * 2
        val layoutWidth = diameter + maxChildWidth
        val layoutHeight = diameter + maxChildHeight
 
        // ── 放置子元素 ──
        layout(layoutWidth, layoutHeight) {
            val centerX = layoutWidth / 2          // 布局中心 X
            val centerY = layoutHeight / 2         // 布局中心 Y
            val angleStep = 2 * Math.PI / placeables.size  // 每个子元素的角度间隔
 
            placeables.forEachIndexed { index, placeable ->
                // 计算当前子元素在圆周上的角度（从 12 点钟方向开始）
                val angle = angleStep * index - Math.PI / 2
                // 计算子元素中心点的目标坐标
                val x = centerX + (radiusPx * cos(angle)).toInt() - placeable.width / 2
                val y = centerY + (radiusPx * sin(angle)).toInt() - placeable.height / 2
                // 放置到计算出的位置
                placeable.place(x, y)              // 环形布局一般不需要 RTL 镜像
            }
        }
    }
}

// 第一步：定义数据类
data class CircularParentData(
    val angularOffset: Float = 0f              // 子元素额外的角度偏移
)
 
// 第二步：创建扩展修饰符，附加 ParentData
fun Modifier.angularOffset(degrees: Float): Modifier = this.then(
    object : ParentDataModifier {
        // 将角度偏移信息注入到 parentData 中
        override fun Density.modifyParentData(parentData: Any?): Any {
            return CircularParentData(angularOffset = degrees)
        }
    }
)
 
// 第三步：在 MeasurePolicy 中读取
// ...在 CircularLayout 的放置阶段...
placeables.forEachIndexed { index, placeable ->
    // 从对应的 measurable 中读取 parentData
    val data = measurables[index].parentData as? CircularParentData
    // 获取额外角度偏移（如果有的话）
    val extraAngle = Math.toRadians((data?.angularOffset ?: 0f).toDouble())
    // 叠加到基础角度上
    val angle = angleStep * index - Math.PI / 2 + extraAngle
    // ... 后续坐标计算同上 ...
}