动态行宽组合

Dynamic row width compose

我需要创建一个如下所示的搜索栏(严格组合):

现在我设法让没有文本的文本工作,但我无法让取消文本无错误地显示出来。

例如,当使用约束行和一些填充时,我得到这样的效果

link 到工作代码:

https://gist.github.com/piotrsedlak/d71da26299946ef6fc5125042e04a154

我也尝试过使用 animateContentSize 但这并没有真正帮助。

我认为这可以使用 weight 修饰符轻松实现。有条件地调整权重,你会得到想要的效果。这是相同的片段:

@Composable
fun DynamicToolbar() {
    var text by remember { mutableStateOf(TextFieldValue()) }
    val fieldWeight = if (text.text.isNotBlank()) 0.8f else 1f
    Row(modifier = Modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            leadingIcon = { Icon(Icons.Default.Search, null, tint = Color.DarkGray) },
            trailingIcon = {
                if (text.text.isNotBlank()) {
                    Icon(
                        Icons.Default.Close,
                        null,
                        tint = Color.LightGray,
                        modifier = Modifier.clickable { text = text.copy("") }
                    )
                }
            },
            modifier = Modifier
                .weight(fieldWeight)
                .alignBy(FirstBaseline)
        )
        if (text.text.isNotBlank()) {
            TextButton(
                onClick = { },
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1 - fieldWeight)
                    .alignBy(FirstBaseline)
            ) {
                Text("Cancel")
            }
        }
    }
}

我正在使用 Compose 1.0.0-alpha11

PS:我也修复了基线对齐问题(credits)。希望对您有所帮助。