动态行宽组合
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)。希望对您有所帮助。
我需要创建一个如下所示的搜索栏(严格组合):
现在我设法让没有文本的文本工作,但我无法让取消文本无错误地显示出来。
例如,当使用约束行和一些填充时,我得到这样的效果
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)。希望对您有所帮助。