Como envolver a altura do conteúdo de um Column
que tem vários Composables, um deles sendo outro Column
? Eu tenho um Card
com um Column
com 3 itens, um título, um corpo ( Column
com n textos e rolagem) e um texto inferior. A ideia é que se o Card
tem mais altura do que a tela, então, o usuário terá a possibilidade de rolar o corpo (o corpo tem uma rolagem). O problema é que se o corpo tem muito conteúdo (preenchendo toda a altura da tela), o texto inferior do cartão não é exibido.
Com o próximo exemplo, você pode clicar para ampliar ou encurtar o texto para testar o problema.
var long by remember{ mutableStateOf(true) }
Card(modifier = modifier.widthIn(max = 400.dp).fillMaxWidth().padding(16.dp),
onClick = { long = !long }
) {
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
Column(modifier = Modifier.padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
Text(text = "1")
Text(text = "2")
val scrollState = rememberScrollState()
Column(modifier = Modifier.verticalScroll(scrollState)) {
if (long)
repeat(50) { Text(text = "body") }
else
repeat(3) { Text(text = "body") }
}
Text(text = "3")
}
}
}
Tentei usar wrapContentHeight
na coluna pai (mesmo resultado), também tentei usar weight(1f)
na coluna filho (então o texto inferior fica sempre visível, mas o cartão fica sempre esticado na altura da tela cheia), etc... não consigo obter o comportamento desejado.
Atribuir
Modifier.weight(1f, fill = false)
à coluna rolável.O modificador de peso em linha ou coluna faz com que os elementos componíveis com esse modificador sejam medidos depois de outros elementos componíveis e o espaço definido seja dividido entre aqueles com o modificador de peso com base em suas frações de peso.
Se você definir,
fill = false
eles ainda serão medidos depois de outros Composables, mas eles ocuparão espaços tão grandes quanto seu conteúdo na maioria das vezes, não espaço disponível o tempo todo, depois que outros Composables forem medidos.