Исправить положение текста в центре кнопки «Создать» Jetpack.

Question

В настоящее время я работаю над кнопкой, которая состоит из 3 элементов: значок (с фиксированным размером), заголовок (например, «Купить сейчас») и цена предмета. Цена, которая должна отображаться, является адаптивной, это может быть 2,00 или 2000,00 евро. Предполагается, что заголовок располагается по центру самой кнопки, а не области, которую она может занимать.

Цена объекта имеет приоритет внутри кнопки и всегда должна отображаться полностью с заданным стилем. В связи с этим размер этого объекта является переменным и не может быть определен заранее.

Когда длина ценового объекта увеличивается, естественно, доступное пространство заголовка уменьшается. Однако при попытке центрировать текст я мог только центрировать его в зависимости от доступного места, в результате чего текст смещался по центру.

Как можно решить эту проблему, позволяя центрировать текст на основе родителя (кнопки), а не доступного размера текста?

Answer 1

Я постарался подготовить для вас понятный пример, если он был полезен, пожалуйста, выберите мой ответ как правильный ответ

      
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import stackoverflow.answers.ui.theme.StackOverflowAnswersTheme


@Composable
private fun StandardToolbar(
    onProfileButtonClick: () -> Unit,
    onFilterButtonClick: () -> Unit,
    onBackButtonClick: () -> Unit
) {
    val constraintSet = ConstraintSet {
        val startReference = createRefFor("startReference")
        val endReference = createRefFor("endReference")
        val titleReference = createRefFor("titleReference")
        constrain(startReference) {
            start.linkTo(parent.start, 16.dp)
            top.linkTo(parent.top, 16.dp)
            bottom.linkTo(parent.bottom, 16.dp)
            width = Dimension.value(48.dp)
        }
        constrain(endReference) {
            end.linkTo(parent.end, 16.dp)
            top.linkTo(parent.top, 16.dp)
            bottom.linkTo(parent.bottom, 16.dp)
            width = Dimension.value(48.dp)
        }
        constrain(titleReference) {
            start.linkTo(startReference.end, 8.dp)
            end.linkTo(endReference.start, 8.dp)
            top.linkTo(parent.top, 16.dp)
            bottom.linkTo(parent.bottom, 16.dp)
            width = Dimension.fillToConstraints
        }
    }
    Surface(
        elevation = AppBarDefaults.TopAppBarElevation,
        shape = RoundedCornerShape(
            bottomStart = 50f,
            bottomEnd = 50f
        ),
        color = Color(0XFF2F364E),
        modifier = Modifier
            .fillMaxWidth()
            .height(72.dp)
    ) {
        ConstraintLayout(
            modifier = Modifier.fillMaxSize(),
            constraintSet = constraintSet
        ) {
            Box(
                modifier = Modifier
                    .layoutId("startReference")
                    .size(48.dp)
                    .background(Color.Blue)
            ) {

            }
            Text(
                modifier = Modifier
                    .layoutId("titleReference"),
                text = "Title",
                style = MaterialTheme.typography.h5.copy(fontWeight = FontWeight.Bold),
                color = Color.White,
                overflow = TextOverflow.Ellipsis,
                textAlign = TextAlign.Center,
                maxLines = 1
            )
            Box(
                modifier = Modifier
                    .layoutId("endReference")
                    .size(48.dp)
                    .background(Color.Green)
            ) {
                Text(text = "E 20,000", modifier = Modifier.align(Alignment.Center), style = MaterialTheme.typography.caption)
            }
        }
    }
}


@Composable
@Preview
fun StandardToolbarPreview() {
    CompositionLocalProvider(
        LocalLayoutDirection provides LayoutDirection.Ltr
    ) {
        StackOverflowAnswersTheme {
            StandardToolbar(
                onProfileButtonClick = { },
                onFilterButtonClick = { },
                onBackButtonClick = {}
            )
        }
    }
}

Answer 2

Вы можете попробовать это:

      Button(
    modifier = Modifier
      .wrapContentHeight()
      .padding(horizontal = 8.dp),
    onClick = {}
) {
      Row(
          modifier = Modifier.fillMaxWidth(),
          verticalAlignment = Alignment.CenterVertically,
          horizontalArrangement = Arrangement.SpaceAround
      ) {

           Box(
               modifier = Modifier.weight(1f),
               contentAlignment = Alignment.TopStart
           ) {
               Icon(
                  imageVector = Icons.Default.ImageSearch,
                  contentDescription = null
               )
           }

           Box(
               modifier = Modifier.weight(1f),
               contentAlignment = Alignment.Center
           ) {
               Text(
                     text = "Buy Now"
               )
           }

           Box(
                modifier = Modifier.weight(1f),
                contentAlignment = Alignment.TopEnd
           ) {
               Text(
                   text = "€ 2.00"
                 // text = "€ 2000.00"
               )
           }
       }
 }

The Buttonимеет параметр содержимого, который вы можете использовать для установки его содержимого, в этом случае мы используем для установки содержимого по горизонтальной оси.

Обратите внимание, что каждый из компонентов и заключен внутри a сweightиз1f, делая каждый из этих ящиков своим контейнером, который также занимает равное разделенное пространство родителя.

Средний позиционирует своего дочернего элемента в центре, а первый и последний размещают своих дочерних элементов (т.е.IconиText) вTopStartиTopEndвыравнивание, хотя вам не нужно беспокоиться о «верхнем» позиционировании, поскольку здесь им пренебрегают, потому что родительRowвыравнивает всех своих детейcenter-vertically

Если мы положимbackgroundцвет на каждомBox,

      Modifier.background(Color.LightGray/Gray/DarkGray)

мы можем ясно видеть их равныеwidth