Как использовать вес в кнопке, чтобы выровнять текст слева и значок справа

Question

Я создаю повторно используемый компонент Button в Jetpack Compose, который в основном представляет собойRow. Кнопка должна иметь текст на левом конце и значок на правом конце. Это работает прямо так:

      @Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = { /* */ },
        modifier = modifier
    ) { // RowScope
        Text(
            text = text
        )
        Spacer(modifier = Modifier.width(8.dp))
        Icon(
            painter = painterResource(
                id = android.R.drawable.ic_dialog_info
            ),
            contentDescription = null
        )
    }
}

Однако, если кнопка имеет фиксированную ширину, текст и значок располагаются по центру, а не слева/справа.

Поэтому я попытался добавитьmodifier = Modifier.weight(1F)кTextпоэтому он заполняет любое дополнительное пространство. Но это приводит к тому, что кнопка без фиксированной ширины занимает столько места, сколько может.

Как я могу создать компонент Compose, который работает в обоих случаях: когда определена ширина и когда он обтекает содержимое?

Мой макет экрана:

      @Composable
fun MyScreen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Spacer(modifier = Modifier.height(8.dp))
        MyButton(
            text = "variable width",
            modifier = Modifier.wrapContentWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        MyButton(
            text = "fixed width",
            modifier = Modifier.width(300.dp)
        )
    }
}

Answer 1

СодержаниеButtonэтоRowScope.Просто применитеweight(1f)модификатор кTextвместе сTextOverflow.Ellipsis.

Что-то вроде:

      Button(
    onClick = { /* */ },
    modifier = modifier.width(IntrinsicSize.Max)
) { // RowScope
    Text(
        text = text,
        maxLines = 1,
        modifier = Modifier.weight(1f),
        overflow = TextOverflow.Ellipsis
    )
    Spacer(modifier = Modifier.width(8.dp))
    Icon(
        painter = painterResource(
            id = android.R.drawable.ic_dialog_info
        ),
        contentDescription = null
    )
}

Answer 2

Я считаю, что вам нужно установить внутреннюю ширину на вашей кнопке. Что-то вроде

      Button(
        onClick = { /* */ },
        modifier = modifier.width(IntrinsicSize.Min)
    )

См. документацию здесь, https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements .