Android Jetpack Compose：带前置图标的Button左侧边距调整问题

问题描述 #

开发登录页面时，需要实现一个左侧带图标（距按钮左边缘10dp）、文字居中的Button组件，但当前代码中图标默认距左边缘24dp，无法达到预期效果。

代码示例 #

SignInScreen.kt：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SignInScreen(
    //navController: NavController,
    //viewModel: SignInViewModel = hiltViewModel()
) {
    Column(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.Start
    ) {
        // 省略其他代码
        ContinueWithButton(buttonText = "Google Sign In", id = R.drawable.google_icon , onClick = {  })
    }
}

ContinueWithButton.kt：

@Composable
fun ContinueWithButton(
    buttonText: String,
    @DrawableRes id: Int,
    onClick: () -> Unit = {},
) {
    Button(
        onClick = { onClick() },
        modifier = Modifier
            .fillMaxWidth()
            .height(36.dp),
        shape = RoundedCornerShape(12.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.White,
        ),
        border = BorderStroke(1.dp, Color.Black)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Row(
                modifier = Modifier
                    .align(Alignment.CenterStart)
            ) {
                Image(
                    painter = painterResource(id),
                    contentDescription = buttonText,
                    modifier = Modifier.size(20.dp)
                )
            }
            Text(
                modifier = Modifier.align(Alignment.Center),
                text = buttonText,
                color = Color.Black,
                textAlign = TextAlign.Center,
                fontSize = 12.sp
            )
        }
    }
}

问题根源 #

Material 3的Button组件默认带有contentPadding属性，其水平方向的默认值为24.dp。这个内边距作用在Button内部内容区域，所以图标左侧会被这个默认padding限制，始终保持24dp的距离，无法通过内部布局调整。

另外，原代码用Box嵌套图标和文字的写法存在逻辑问题：文字的居中是相对于Box的，而非整个Button，实际布局中文字会覆盖在图标所在区域（只是视觉上没重叠），不符合组件布局规范。

解决方案 #

方案1：覆盖Button的contentPadding，改用Row布局实现文字居中

直接修改ContinueWithButton的实现，覆盖Button的默认内边距，并用Row配合weight属性实现文字真正居中：

@Composable
fun ContinueWithButton(
    buttonText: String,
    @DrawableRes id: Int,
    onClick: () -> Unit = {},
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(36.dp),
        shape = RoundedCornerShape(12.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.White),
        border = BorderStroke(1.dp, Color.Black),
        // 覆盖默认contentPadding，设置水平左内边距为10dp
        contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 图标距左边缘10dp（由Button的contentPadding控制）
            Image(
                painter = painterResource(id),
                contentDescription = buttonText,
                modifier = Modifier.size(20.dp)
            )
            // 让文字占据剩余空间并居中，实现相对于整个Button的居中效果
            Text(
                text = buttonText,
                color = Color.Black,
                textAlign = TextAlign.Center,
                fontSize = 12.sp,
                modifier = Modifier.weight(1f)
            )
        }
    }
}

关键修改点说明

1. 覆盖contentPadding：通过contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp)直接将Button内部的水平左内边距设置为10dp，彻底解决默认24dp的问题。
2. 改用Row布局：用Row代替Box，更符合横向排列的布局逻辑，避免文字和图标重叠的潜在问题。
3. 文字居中优化：给Text添加Modifier.weight(1f)，让它占据Row中除图标外的所有剩余空间，再配合textAlign = TextAlign.Center，确保文字相对于整个Button居中，而非局部区域。

方案2：保留Box布局的修改方式（不推荐）

如果一定要保留原有的Box嵌套写法，需要先将Button的contentPadding设为0，再给图标添加10dp的左内边距：

@Composable
fun ContinueWithButton(
    buttonText: String,
    @DrawableRes id: Int,
    onClick: () -> Unit = {},
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(36.dp),
        shape = RoundedCornerShape(12.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.White),
        border = BorderStroke(1.dp, Color.Black),
        // 先取消默认contentPadding
        contentPadding = PaddingValues(0.dp)
    ) {
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id),
                contentDescription = buttonText,
                modifier = Modifier
                    .size(20.dp)
                    .align(Alignment.CenterStart)
                    .padding(start = 10.dp) // 手动设置图标左内边距为10dp
            )
            Text(
                text = buttonText,
                color = Color.Black,
                textAlign = TextAlign.Center,
                fontSize = 12.sp
            )
        }
    }
}

这种写法虽然能实现效果，但布局逻辑不如Row清晰，且存在文字和图标重叠的风险，因此更推荐方案1。

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