O caso é bem simples. Estou tentando atingir uma largura de item responsiva dentro de LazyRow.
- Se apenas um item estiver presente, preencha a largura do item pai.
- Se for 2, divida a largura igualmente.
- Se for maior, e a largura for menor que a especificada
defaultMinSize, mantenha a largura mínima.
Meus testes até agora deram resultados bastante inesperados.
Vamos considerar LazyRowapenas um item, Boxcom altura 100.dp neste exemplo.
@Composable
fun SingleBox(
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
) {
val size = 1
LazyRow {
items(size) {
Box(
modifier = Modifier
.height(100.dp)
.defaultMinSize(minWidth = 100.dp)
.fillParentMaxWidth(1f / size)
.background(Color.Red)
.border(
BorderStroke(
2.dp,
Color.White,
),
),
)
}
}
}
}
O resultado seria 1 Boxpreenchendo todoLazyRow
Tornando size2 igual, dividirá bem.
Mas quando tentamos ir além e especificar sizeque seja 10, obtemos algo bastante estranho.
Parece que o tamanho mínimo é aplicado para o Box, mas as restrições onde o Boxconteúdo pode ser colocado ainda são iguais ao fillParentMaxWidth(1f / size)modificador.
Primeiro pensei na ordem dos modificadores e backgroundsubi borderna cadeia.
Box(
modifier = Modifier
.height(100.dp)
.border(
BorderStroke(
2.dp,
Color.White,
),
)
.background(Color.Red)
.defaultMinSize(minWidth = 100.dp)
.fillParentMaxWidth(1f / size),
)
E isso pareceu resolver o problema... Mas agora vamos colocar algo dentro do Box. Por exemplo, um diferente Box:D.
Box(
modifier = Modifier
.height(100.dp)
.border(
BorderStroke(
2.dp,
Color.White,
),
)
.background(Color.Red)
.defaultMinSize(minWidth = 100.dp)
.fillParentMaxWidth(1f / size),
) {
Box(
modifier = Modifier
.background(Color.Black)
.border(
BorderStroke(
2.dp,
Color.White,
),
)
.fillMaxSize()
)
}
Parece que o tamanho informado à criança Boxé o calculado com o fillParentMaxWidthmodificador.
Estou esquecendo de algo aqui? Esse é o comportamento correto?
Para algo que funciona mais ou menos da maneira que eu quero (exceto pela necessidade de definir a altura para o pai, em vez de obtê-la dos filhos), aqui está um trecho:
Box(
Modifier
.defaultMinSize(100.dp)
.height(100.dp),
) {
Spacer(
modifier = Modifier
.fillParentMaxWidth(1f / size)
)
Box(
modifier = Modifier
.background(Color.Red)
.border(
BorderStroke(
2.dp,
Color.White,
),
)
.matchParentSize(),
)
}
