android - 如何在 Compose 中将 Icon 与 Text 组件的第一行集中对齐？

Question

我已经构建了下面的大部分组件，但我被困在一个细节上。细节是整个内容应该垂直居中，另外 Icon组件应与 Text 的第一行居中对齐组件。(以下是所需的输出)

@Composable
private fun MyBaseComponent(
    @DrawableRes iconResId: Int? = null,
    title: String? = null,
    subtitle: String,
    backgroundColor: Color,
    itemColor: Color
) {
    Box(
        modifier = Modifier
            .heightIn(min = 48.dp)
            .fillMaxWidth()
            .background(color = backgroundColor, shape = RoundedCornerShape(2.dp))
    ) {
        Row(
            modifier = Modifier.padding(MyTheme.spacing.double),
            verticalAlignment = Alignment.CenterVertically
        ) {
            iconResId?.let {
                MyIcon(iconResId = iconResId, tint = itemColor)
                Spacer(modifier = Modifier.padding(end = MyTheme.spacing.double))
            }

            Column(verticalArrangement = Arrangement.spacedBy(MyTheme.spacing.small)) {
                title?.let { MyTitle(text = title, color = itemColor) }
                MySubtitle(text = subtitle, color = itemColor)
            }
        }
    }
}

此刻的样子。一切似乎都很好，但除了图标定位。

Answer 1

一种简单的方法是使用父可组合填充来对齐图标的顶部和文本:

@Preview
@Composable
fun IconText(
) {
    val title =
        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed do."
    val subtitle =
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Box(
        modifier = Modifier
            .heightIn(min = 48.dp)
            .background(color = Color.White, shape = RoundedCornerShape(2.dp))
    ) {
        Box(modifier = Modifier.padding(top = 40.dp, bottom = 40.dp)) {
            Image(
                painter = painterResource(id = R.drawable.ic_check),
                colorFilter = ColorFilter.tint(Color.Gray),
                contentDescription = "",
                modifier = Modifier.padding(start = 10.dp)
            )
            Column(
                verticalArrangement = Arrangement.spacedBy(10.dp),
                modifier = Modifier.padding(start = 40.dp, end = 40.dp)
            ) {
                Text(
                    text = title,
                    color = Color.Black,
                    fontSize = 15.sp,
                    fontWeight = FontWeight.Bold
                )
                Text(text = subtitle, color = Color.Black)
            }
        }
    }
}

结果:

更复杂的方法是使用 'onTextLayout' 来查找行的位置:

@Composable
fun TextLineIcon(
    text: String,
    icon: ImageVector,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    iconRightPadding: Dp = 0.dp,
    iconLine: Int = 0,
    iconTint: Color = Color.Black
    // etc
) {
    val painter = rememberVectorPainter(image = icon)
    var lineTop = 0f
    var lineBottom = 0f
    var lineLeft = 0f
    with(LocalDensity.current) {
        val imageSize = Size(icon.defaultWidth.toPx(), icon.defaultHeight.toPx())
        val rightPadding = iconRightPadding.toPx()
        Text(
            text = text,
            color = color,
            fontSize = fontSize,
            fontWeight = fontWeight,
            onTextLayout = { layoutResult ->
                val nbLines = layoutResult.lineCount
                if (nbLines > iconLine) {
                    lineTop = layoutResult.getLineTop(iconLine)
                    lineBottom = layoutResult.getLineBottom(iconLine)
                    lineLeft = layoutResult.getLineLeft(iconLine)
                }
            },
            modifier = modifier.drawBehind {
                with(painter) {
                    translate(
                        left = lineLeft - imageSize.width - rightPadding,
                        top = lineTop + (lineBottom - lineTop) / 2 - imageSize.height / 2,
                    ) {
                        draw(painter.intrinsicSize, colorFilter = ColorFilter.tint(iconTint))
                    }
                }
            }
        )
    }
}

用法:

@Preview
@Composable
fun IconText2(
) {
    val title =
        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed do."
    val subtitle =
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Box(
        modifier = Modifier
            .heightIn(min = 48.dp)
            .background(color = Color.White, shape = RoundedCornerShape(2.dp))
    ) {
        Box {
            Column(
                verticalArrangement = Arrangement.spacedBy(10.dp),
                modifier = Modifier.padding(40.dp)
            ) {
                TextLineIcon(
                    title,
                    Icons.Filled.Check,
                    fontWeight = FontWeight.Bold,
                    fontSize = 15.sp,
                    iconRightPadding = 4.dp,
                    iconTint = Color.Gray
                )
                Text(text = subtitle, color = Color.Black)
                TextLineIcon(
                    title,
                    Icons.Filled.PlusOne,
                    fontWeight = FontWeight.Bold,
                    fontSize = 15.sp,
                    iconRightPadding = 4.dp,
                    iconLine = 1,
                    iconTint = Color.Red
                )

                Text(text = subtitle, color = Color.Black)
            }
        }
    }
}

您甚至可以选择要与图标对齐的行。
结果: