Jetpack Compose中点击视图实现宽度动态调整的方法

云上老周

2026-8-1

实现Jetpack Compose视图点击后扩展宽度的功能

要实现点击视图后从固定宽度扩展到目标范围的效果，核心是利用Compose的状态管理动态控制视图尺寸。以下是修改后的完整代码：

@Composable
fun InputBar(
    hint: String,
    onClick: () -> Unit
) {
    // 状态变量记录视图是否展开，初始为未展开状态
    val isExpanded = remember { mutableStateOf(false) }
    
    Card(
        onClick = { 
            // 点击时切换展开状态
            isExpanded.value = !isExpanded.value
            onClick.invoke()
        },
        modifier = Modifier
            // 根据状态动态设置宽度：展开时填满父布局，未展开时用固定150dp
            .width(if (isExpanded.value) {
                Modifier.fillMaxWidth().width
            } else {
                150.dp
            })
            .height(44.dp),
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(
                value = "",
                onValueChange = {
                    // 可添加输入内容的状态管理，比如用 mutableStateOf<String>("") 绑定输入值
                },
                placeholder = { Text(hint) },
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

关键说明：

状态变量isExpanded：通过remember和mutableStateOf创建可观察状态，Compose会自动监听状态变化，触发视图重组实现动态更新。
动态宽度控制：如果需要限制扩展后的最大宽度（比如最大300dp），可将fillMaxWidth()替换为widthIn(min = 150.dp, max = 300.dp)，让宽度在指定范围内自适应。
点击事件逻辑：点击Card时切换展开状态，同时保留传入的onClick回调调用，不破坏原有业务逻辑。
TextField适配：给TextField添加Modifier.fillMaxWidth()，确保它能跟随Card的宽度变化自动填充空间。