Jetpack Compose中如何实现按钮内图片下方显示文本

你的问题核心是Button默认使用Row作为内容布局容器，导致图片和文本横向排列，空间不足时文本被截断。要实现文本在图片下方，只需将内容改为纵向的Column布局即可，具体修改如下：

修改后的代码 #

Button(
    onClick = { navigateToSearch("wtf") },
    shape = RoundedCornerShape(25.dp),
    modifier = Modifier
        .width(178.dp)
        .height(230.dp)
) {
    // 用Column替换默认的Row布局，实现纵向排列
    Column(
        horizontalAlignment = Alignment.CenterHorizontally, // 让内容水平居中
        verticalArrangement = Arrangement.Center, // 垂直方向居中分布
        modifier = Modifier.fillMaxSize() // 占满按钮内部空间
    ) {
        Image(
            painter = painterResource(id = R.drawable.favourites),
            contentDescription = "Favourites icon", // 建议设置有意义的描述
            modifier = Modifier.size(64.dp) // 限制图片大小，避免占满按钮空间
        )
        Text(
            text = "Favourites",
            modifier = Modifier.padding(top = 16.dp) // 给文本和图片之间加间距
        )
    }
}

关键说明 #

• 原代码中paddingFromBaseline仅用于调整文本相对于基线的位置，无法改变布局方向，所以达不到纵向排列的效果。
• 使用Column并设置horizontalAlignment可以让图片和文本在按钮内水平居中，保证视觉美观。
• 给Image设置size可以避免图片过大挤压文本空间，根据你的需求调整尺寸即可。

内容的提问来源于stack exchange，提问作者Vanessa Lau