android - 如何在 TextButton 中分离文本和图标

Question

如何在 TextButton 中分离文本和图标，使其像 whatsapp 设置一样

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
) {
    TextButton(
        onClick = { /*TODO*/  },
        modifier = Modifier.fillMaxSize(),
    ) {

        Text(text = "$name")
        Icon(
            imageVector = Icons.Filled.KeyboardArrowRight,
            contentDescription = "",
            modifier = Modifier.size(40.dp)
        )
    }
}

显示

但我想喜欢这个

我尝试了 Spacer 和 Padding 但它没有用，因为我有有趣的 SettingsButtons(name: String)

@Composable
fun SettingsButtons(name: String) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
    ) {
        TextButton(
            onClick = { /*TODO*/ },
            modifier = Modifier.fillMaxSize(),
        ) {

            Text(text = "$name")
            Icon(
                imageVector = Icons.Filled.KeyboardArrowRight,
                contentDescription = "",
                modifier = Modifier.size(40.dp)
            )
        }
    }

}

根据我传递给 {name} 的参数，文本将被更改

SettingsButtons(name = "Account")
SettingsButtons(name = "Order History")
SettingsButtons(name = "Favorite")

所以我认为为什么 Spacer 和 Padding 不起作用，因为文本大小不同或者我没有正确使用它

Answer 1

TextButton 的内容是一个 RowScope。
您可以将 weight(1f) 修饰符应用于 Text

TextButton(
    onClick = { /*TODO*/ },
    modifier = Modifier.fillMaxWidth(),
) {

    Text(text = "Name", modifier = Modifier.weight(1f))
    Icon(
        imageVector = Icons.Filled.KeyboardArrowRight,
        contentDescription = "",
        modifier = Modifier.size(40.dp)
    )
}