1

I have a Row with some text and different sizes, then in the end of the Row I have a Column where I have two Text so the output is something like this :

enter image description here

Perhaps the image is not the best one but as you can see there's a Row where I have two Text one with different size, and in the end I have a Column with two Text the problem I'm having is that if I use Column(modifier = Modifier.alignBy(LastBaseline)) it solves one problem that I was having, but creating a new one that is that is moving all the Column to the top, so what I'm looking for is without losing this Baseline (since I have different size this command works perfect to avoid playing with margin) I want to avoid moving this column, note that the first Text of the Column the best is that should have a alignTopToTop="secondText" but I don't know if it's possible.

There's the two options, one is if I add the alignBy(LastBaseline) make the column fixed and don't move anything just align the Text from the bottom and another one is, somehow add this constraint to the second Text of the Row to don't move the Column

My code

ConstraintLayout {
            val (text1, text2) = createRefs()
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.constrainAs(text1) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                }
            ) {
                Text(
                    text = "Hello",
                    style = TextStyle(
                        fontWeight = FontWeight.Bold,
                        fontSize = 12.sp,
                        lineHeight = 18.sp,
                        color = Black,
                    ),
                )
                Row(verticalAlignment = Alignment.Bottom) {
                    Text(
                        text = "World",
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            fontSize = 12.sp,
                            lineHeight = 18.sp,
                            color = Black,
                        ),
                        modifier = Modifier
                            .alignByBaseline()
                    )
                    Text(
                        text = "WORLD",
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            fontSize = 24.sp,
                            lineHeight = 18.sp,
                            color = Black,
                        ),
                        modifier = Modifier
                            .alignByBaseline()
                    )
                    Column(modifier = Modifier.alignBy(LastBaseline)) {
                        Text(
                            text = "^",
                            style = TextStyle(
                                fontWeight = FontWeight.Bold,
                                fontSize = 12.sp,
                                lineHeight = 18.sp,
                                color = Black,
                            ),
                        )
                        Text(
                            text = "^",
                            style = TextStyle(
                                fontWeight = FontWeight.Bold,
                                fontSize = 12.sp,
                                lineHeight = 18.sp,
                                color = Black,
                            ),
                        )

                    }
                }
            }
        }

The problem as you can see here enter image description here Is that when I do the modifier = Modifier.alignBy(LastBaseline) the column goes up and it makes to make this extra space between the text 2 and text 1, is there any way to avoid this column moving up?

StuartDTO
  • 783
  • 7
  • 26
  • 72

0 Answers0