android - 如果 Jetpack Compose 中的文本太长，图标会消失

Question

@Composable
fun TopAppBar(
    name: String,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(20.dp, 0.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Icon(
            imageVector = Icons.Default.ArrowBack,
            contentDescription = "Back",
            tint = Color.Black,
            modifier = Modifier.size(24.dp)
        )
        Text(
            text = name,
            overflow = TextOverflow.Ellipsis,
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp,
            maxLines = 1
        )

        Row {
            Icon(
                painter = painterResource(id = R.drawable.ic_bell),
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier
                    .padding(8.dp, 8.dp)
                    .size(24.dp)
            )
            Icon(
                painter = painterResource(id = R.drawable.ic_dotmenu),
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier
                    .padding(8.dp, 8.dp)
                    .size(24.dp)
            )
        }

    }
}

Answer 1

您可以添加 weight Text 的修饰符可组合的

Row(){
    Icon()
    Text(
        text = ".....",
        overflow = TextOverflow.Ellipsis,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp,
        maxLines = 1,
        modifier = Modifier.weight(1f)
    )
    //...
}

.