Hi, we updated the library from version 1.0.1 to 1.1.1 and noticed this problem: the width = Dimension.fillToConstraints of the content is not set depending on the availability of other content.
screen 1 the layout looks like it is in version 1.1.1 screen 2 the layout looked like it was in version 1.0.1 screen 3 if you remove width = Dimension.fillToConstraints in version 1.1.1
Description
Hi, we updated the library from version 1.0.1 to 1.1.1 and noticed this problem: the width = Dimension.fillToConstraints of the content is not set depending on the availability of other content.
@Composable
private fun SimpleItem(
title: @Composable () -> Unit,
subtitle: @Composable () -> Unit,
onClick: () -> Unit,
isEnabled: Boolean,
isShowDivider: Boolean,
isReversed: Boolean,
modifier: Modifier = Modifier,
rightTitle: (@Composable () -> Unit)? = null,
rightSubtitle: (@Composable () -> Unit)? = null,
image: (@Composable () -> Unit)? = null,
icon: (@Composable () -> Unit)? = null,
) {
ConstraintLayout(
modifier = modifier
.defaultMinSize(minHeight = 64.dp)
.fillMaxWidth()
.clickable(enabled = isEnabled, onClick = onClick)
.padding(horizontal = 16.dp)
) {
val (imageRef, titleRef, subtitleRef, rightBoxRef, rightTitleRef, rightSubtitleRef, divider) = createRefs()
val rightBarrier = createStartBarrier(rightBoxRef, rightTitleRef, rightSubtitleRef)
val imageBarrier = createEndBarrier(imageRef)
Box(modifier = Modifier.constrainAs(imageRef) {
start.linkTo(parent.start)
top.linkTo(anchor = if (isReversed) subtitleRef.top else titleRef.top)
bottom.linkTo(anchor = if (isReversed) titleRef.bottom else subtitleRef.bottom)
}) {
image?.let {
Row {
image.invoke()
Spacer(modifier = Modifier.width(16.dp))
}
}
}
if (isReversed) {
Box(modifier = Modifier.constrainAs(subtitleRef) {
linkTo(
start = imageBarrier,
end = rightBarrier,
bias = 0f,
endMargin = 16.dp
)
top.linkTo(parent.top, margin = if (image == null) 16.dp else 12.dp)
width = Dimension.fillToConstraints
}) {
subtitle.invoke()
}
Box(modifier = Modifier.constrainAs(titleRef) {
linkTo(
start = imageBarrier,
top = subtitleRef.bottom,
end = rightBarrier,
bottom = if (isShowDivider) divider.top else parent.bottom,
bottomMargin = if (image == null) 16.dp else 12.dp,
topMargin = 4.dp,
endMargin = 16.dp,
horizontalBias = 0f
)
width = Dimension.fillToConstraints
}) {
title.invoke()
}
RightBoxReversed(
rightTitle = rightTitle,
rightSubtitle = rightSubtitle,
rightBoxRef = rightBoxRef,
imageRef = imageRef,
icon = icon,
titleRef = titleRef,
subtitleRef = subtitleRef
)
} else {
Box(modifier = Modifier.constrainAs(titleRef) {
linkTo(
start = imageBarrier,
end = rightBarrier,
endMargin = 16.dp,
bias = 0f
)
top.linkTo(parent.top, margin = if (image == null) 16.dp else 12.dp)
width = Dimension.fillToConstraints
}) {
title.invoke()
}
Box(modifier = Modifier.constrainAs(subtitleRef) {
linkTo(
start = imageBarrier,
top = titleRef.bottom,
end = rightBarrier,
bottom = if (isShowDivider) divider.top else parent.bottom,
bottomMargin = if (image == null) 16.dp else 12.dp,
topMargin = 4.dp,
horizontalBias = 0f,
endMargin = 16.dp
)
width = Dimension.fillToConstraints
}) {
subtitle.invoke()
}
RightBox(
rightTitle = rightTitle,
rightSubtitle = rightSubtitle,
rightBoxRef = rightBoxRef,
imageRef = imageRef,
icon = icon,
titleRef = titleRef,
subtitleRef = subtitleRef
)
}
Box(modifier = Modifier.constrainAs(divider) {
top.linkTo(anchor = if (isReversed) titleRef.bottom else subtitleRef.bottom)
}) {
if (isShowDivider) {
Column {
Spacing12()
Divider()
}
}
}
}
}
@Composable
private fun ConstraintLayoutScope.RightBox(
rightTitle: @Composable (() -> Unit)?,
rightSubtitle: @Composable (() -> Unit)?,
rightBoxRef: ConstrainedLayoutReference,
imageRef: ConstrainedLayoutReference,
icon: @Composable (() -> Unit)?,
titleRef: ConstrainedLayoutReference,
subtitleRef: ConstrainedLayoutReference,
) {
when {
rightTitle != null && rightSubtitle != null -> {
Column(
horizontalAlignment = Alignment.End,
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
start.linkTo(titleRef.end)
end.linkTo(parent.end)
top.linkTo(imageRef.top)
bottom.linkTo(imageRef.bottom)
width = Dimension.fillToConstraints
}) {
rightTitle.invoke()
Spacer(modifier = Modifier.height(4.dp))
rightSubtitle.invoke()
}
}
rightTitle != null && icon != null -> {
Column(
horizontalAlignment = Alignment.End,
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
top.linkTo(imageRef.top)
bottom.linkTo(imageRef.bottom)
}) {
rightTitle.invoke()
Spacer(modifier = Modifier.height(4.dp))
icon.invoke()
}
}
rightTitle != null -> {
Box(
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
top.linkTo(titleRef.top)
}) {
rightTitle.invoke()
}
}
rightSubtitle != null -> {
Box(
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
bottom.linkTo(subtitleRef.bottom)
}) {
rightSubtitle.invoke()
}
}
}
}
@Composable
private fun ConstraintLayoutScope.RightBoxReversed(
rightTitle: @Composable (() -> Unit)?,
rightSubtitle: @Composable (() -> Unit)?,
rightBoxRef: ConstrainedLayoutReference,
imageRef: ConstrainedLayoutReference,
icon: @Composable (() -> Unit)?,
titleRef: ConstrainedLayoutReference,
subtitleRef: ConstrainedLayoutReference,
) {
when {
rightTitle != null && rightSubtitle != null -> {
Column(
horizontalAlignment = Alignment.End,
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
top.linkTo(imageRef.top)
bottom.linkTo(imageRef.bottom)
}) {
rightSubtitle.invoke()
Spacer(modifier = Modifier.height(4.dp))
rightTitle.invoke()
}
}
rightTitle != null && icon != null -> {
Column(
horizontalAlignment = Alignment.End,
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
top.linkTo(imageRef.top)
bottom.linkTo(imageRef.bottom)
}) {
icon.invoke()
Spacer(modifier = Modifier.height(4.dp))
rightTitle.invoke()
}
}
rightTitle != null -> {
Box(
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
bottom.linkTo(titleRef.bottom)
}) {
rightTitle.invoke()
}
}
rightSubtitle != null -> {
Box(
modifier = Modifier.Companion.constrainAs(rightBoxRef) {
end.linkTo(parent.end)
top.linkTo(subtitleRef.top)
}) {
rightSubtitle.invoke()
)
}
}
}
}
Preview
SimpleItem(
title = "Titledgfgdfgfgfgfdgdfgfgfggfgfd",
subtitle = "Subtitdsfdgdfgdfgdfgdfggfdgdfgdfgfdgdfggdfgdfgfgfdgfgfgfgfggfdgdle",
onClick = { },
image = {
Icon(
imageVector = ImageVector.vectorResource(id = icons.lightning)
tint = colors.icon.primary,
modifier = Modifier.size(48.dp)
)
Icon(
iconRes = icons.lightning,
)
},
isReversed = true,
isShowDivider = true,
rightTitle = "Right Title",
icon = {
Icon(
imageVector = ImageVector.vectorResource(id = icons.cross),
tint = colors.icon.primary
)
}
)
screen 1 the layout looks like it is in version 1.1.1
screen 2 the layout looked like it was in version 1.0.1
screen 3 if you remove width = Dimension.fillToConstraints in version 1.1.1