如何在 jetpack compose 中的按钮中的图像下方添加文本

Question

我有一个带有图像和文本的按钮，但由于我的按钮是方形的，所以它只显示文本（因为文本位于按钮的右侧，因此被切断）。如何使文本位于按钮中图像的下方，以便两者都可见？

我的代码目前是这样的

Button(
                onClick = { navigateToSearch("wtf") },
                shape = RoundedCornerShape(25.dp),
                modifier = Modifier
                    .width(178.dp)
                    .height(230.dp)
            ) {
                Image(
                    painter = painterResource(id = R.drawable.favourites),
                    contentDescription = "null"
                )
                Text(
                    modifier = Modifier.padding(8.dp),
                    text = "Favourites"

                )
            }

它目前看起来像上面的图片，但我希望文本格式化在图像下方，而不是压在一边。我尝试过使用：

 modifier = Modifier.paddingFromBaseline(top = 24.dp, bottom = 8.dp)

但是仍然不起作用，文本仍然没有显示在图像下方

Answer 1

按钮内内容的容器是

Row

，这解释了为什么文本出现在图像的右侧。 要显示图像下方的文本，请添加

Column

，如下所示：

Button(
    onClick = { },
    shape = RoundedCornerShape(25.dp),
    modifier = Modifier
        .width(178.dp)
        .height(230.dp)
) {
    Column {
        Image(
            painter = painterResource(id = R.drawable.favourites),
            contentDescription = "null"
        )
        Text(text = "Favourites")
    }
}