垂直居中行中的项目

Question

我正在尝试使我的 Row() 中的图标和文本垂直居中，但似乎有些东西不起作用。我感觉项目没有垂直居中。这是为什么？我是否遗漏了什么或图标会引起麻烦？它们都是 .xml 但它们的大小不同。（正如您在代码中看到的，我将它们的大小设置为 15 和 20.dp ）

Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp)
    ) {
        BottomIconItem(icon = R.drawable.ic_thumb_up, size = 15.dp, action = {}, data = (4..98).random())
        BottomIconItem(icon = R.drawable.ic_thumb_down, size = 15.dp, action = {}, data = (1..10).random())
        BottomIconItem(icon = R.drawable.ic_eye, action = {}, data = (765..2311).random())
        BottomIconItem(icon = R.drawable.ic_share, action = {}, data = null)
        BottomIconItem(icon = R.drawable.ic_more, action = {}, data = null)
    }

@Composable
private fun BottomIconItem(@DrawableRes icon: Int, size: Dp = 20.dp, action: () -> Unit, data: Int? = null) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.wrapContentSize()
    ) {
        Icon(
            painterResource(id = icon),
            modifier = Modifier
                .size(size)
                .clickable(onClick = { action.invoke() }),
            tint = MaterialTheme.colors.lightDarkModeTint,
            contentDescription = ""
        )
        if (data != null) {
            Text(
                text = "($data)",
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal,
                color = MaterialTheme.colors.lightDarkModeTint,
                modifier = Modifier.padding(start = 5.dp)
            )
        }
    }
}

Answer 1

在你Row设置verticalAlignment = Alignment.CenterVertically.

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
        .fillMaxWidth()
        .padding(top = 10.dp)
) {
    ...
}

Answer 2

删除 10.dp 的顶部填充。如果这不起作用，请检查您的可绘制对象以查看它们是否没有填充。我试过你的代码，但使用矢量图像代替，它工作正常：

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
         .fillMaxWidth()
         .background(Color.Yellow)
) {
    BottomIconItem(icon = Icons.Filled.ArrowDownward, size = 15.dp, action = {}, data = (4..98).random())
    BottomIconItem(icon = Icons.Filled.ArrowUpward, size = 15.dp, action = {}, data = (1..10).random())
    BottomIconItem(icon = Icons.Filled.ArrowLeft, action = {}, data = (765..2311).random())
    BottomIconItem(icon = Icons.Filled.ArrowBack, action = {}, data = null)
    BottomIconItem(icon = Icons.Filled.ArrowBackIos, action = {}, data = null)
}

垂直居中行中的项目

Center vertically items in Row

user-interface

android

kotlin

android-jetpack-compose