如何创建子组件尺寸变化时不引发布局位移的自定义列组件？

搜索框下方的QuranPicker组件展开时需要绘制全屏遮罩，且此时其余UI的尺寸和位置不能发生变化。目前尝试多种方案都有缺陷：原本想自定义Scaffold或列组件，但缺乏实现经验；受官方ModalBottomSheet源码启发实现了Scrim组件，但因为根布局在Scaffold的body中，遮罩无法覆盖顶部栏和底部栏，只能在这些区域重复添加Scrim，这不是最优方案。

组件状态：

• 展开状态：
• 收起状态：

当前Scrim实现代码：

@Composable
fun Scrim(
    color: Color,
    onDismissRequest: () -> Unit,
    visible: Boolean,
) {

    if (visible) {
        val dismissSheet =
            Modifier
                .pointerInput(onDismissRequest) {
                    detectTapGestures {
                        Timber.i("child detected click")
                        onDismissRequest()
                    }
                }
                .clearAndSetSemantics { }

        Canvas(
            Modifier
                .fillMaxSize()
                .then(dismissSheet),
        ) {
            drawRect(color = color)
        }

    }
}

1. 用Popup承载遮罩与Picker组件 #

直接复用官方ModalBottomSheet的Popup思路，这是最省心的方案：

• 把QuranPicker和Scrim整体放到Popup里，Popup默认全屏覆盖，能自然盖住Scaffold的顶部栏、底部栏和body区域，不用重复加Scrim。
• 用同一个状态变量控制Popup的显示/隐藏和Picker的展开/收起状态。
• 原有Scaffold内的UI布局完全不受影响，不会出现尺寸或位置偏移。

示例代码结构：

var pickerExpanded by remember { mutableStateOf(false) }

Scaffold(
    topBar = { /* 你的顶部栏实现 */ },
    bottomBar = { /* 你的底部栏实现 */ },
    content = { padding ->
        // 原有body布局，包含搜索框和Picker触发区
        Column(modifier = Modifier.padding(padding)) {
            TextField(value = "", onValueChange = {})
            Text("打开QuranPicker", modifier = Modifier.clickable { pickerExpanded = true })
        }
    }
)

// 全屏遮罩+Picker的Popup
if (pickerExpanded) {
    Popup(
        onDismissRequest = { pickerExpanded = false },
        alignment = Alignment.TopCenter
    ) {
        // 先画全屏Scrim
        Scrim(
            color = Color.Black.copy(alpha = 0.5f),
            onDismissRequest = { pickerExpanded = false },
            visible = true
        )
        // 在Scrim上层放QuranPicker，按需调整位置和尺寸
        QuranPicker(
            modifier = Modifier.align(Alignment.TopCenter),
            onDismiss = { pickerExpanded = false }
        )
    }
}

2. 自定义带遮罩层的Scaffold（进阶） #

如果不想用Popup，可以封装一个扩展版Scaffold，把遮罩层整合进去：

• 基于官方Scaffold的结构，在所有内容的上层加一个可控制显示的遮罩层。
• 通过状态变量统一控制遮罩和Picker的显示状态，保持布局内聚性。

示例简化实现：

@Composable
fun ScaffoldWithOverlay(
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    overlayVisible: Boolean,
    overlayContent: @Composable () -> Unit,
    content: @Composable (PaddingValues) -> Unit
) {
    Scaffold(
        topBar = topBar,
        bottomBar = bottomBar,
        content = content
    )
    // 遮罩层，在Scaffold所有内容的上层
    if (overlayVisible) {
        Box(modifier = Modifier.fillMaxSize()) {
            Scrim(
                color = Color.Black.copy(alpha = 0.5f),
                onDismissRequest = { /* 这里写关闭遮罩的逻辑 */ },
                visible = true
            )
            overlayContent()
        }
    }
}

// 使用方式
var pickerExpanded by remember { mutableStateOf(false) }

ScaffoldWithOverlay(
    topBar = { /* 你的顶部栏 */ },
    bottomBar = { /* 你的底部栏 */ },
    overlayVisible = pickerExpanded,
    overlayContent = {
        QuranPicker(onDismiss = { pickerExpanded = false })
    }
) { padding ->
    // 原有body布局
    Column(modifier = Modifier.padding(padding)) {
        TextField(value = "", onValueChange = {})
        Text("打开QuranPicker", modifier = Modifier.clickable { pickerExpanded = true })
    }
}

3. 优化现有Scrim的层级布局 #

如果坚持在原有结构上改，可以用Box重新组织Scaffold的层级：

• 把Scaffold的顶部栏、body、底部栏都放到一个Box里，然后在Box的上层添加Scrim和Picker。
• 但这种方式需要重构现有布局结构，不如前两种方案高效。

内容的提问来源于stack exchange，提问作者Marthia Ghasemi