Блог

Я пытаюсь выровнять поле в Jetpack, которое содержит 2 значка в вертикальном центре столбца

Код для деталей коробки следующий:

 @Composable
    private fun passwordValidate() {
        Box(){
            Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
            Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" ) 
        }
    }

 

Поле загружается в колонку и не отображается, как показано ниже:

 
Row(Modifier.padding(top = 20.dp)) {
                Column(modifier = Modifier
                    .weight(0.95f)) {
                    passwordField()
                }
                Column(modifier = Modifier          <------ Box part to be centered
                    .weight(0.05f),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally) {
                    passwordValidate()
                }
            }


 

Прямо сейчас это выглядит так:

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

Есть идеи ?

Column Размер содержимого вашей обертки. Таким образом, его размер равен размеру значка, поэтому Column расположение не работает.

Вы могли бы передать fillMaxHeight() модификатор в Column , чтобы исправить это, но на самом деле вам это не нужно Column , так как у вас есть только один дочерний элемент( Box ) внутри. Передайте модификатор в качестве параметра passwordValidate :

 @Composable
private fun passwordValidate(modifier: Modifier) {
    Box(modifier){
        Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
        Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" )
    }
}
 

Затем выберите один из двух:

1. Сосредоточьте всех своих Row детей с verticalAlignment помощью параметра:

 Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.padding(top = 20.dp)
) {
    Column(
        modifier = Modifier
            .weight(0.95f)
    ) {
        passwordField()
    }
    passwordValidate(
        Modifier
            .weight(0.05f)
    )
}
 

2. Центрируйте определенного ребенка с align помощью модификатора.

 passwordValidate(
    Modifier
        .weight(0.05f)
        .align(Alignment.CenterVertically)
)