[Compose] 두 Text 기준선 맞추기

두개의 글자 크기가 다른 Text를 row로 나란히 놔두려는데

 

            Row (verticalAlignment = Alignment.CenterVertically){
                Text(
                    text = calorie.toString(),
                    style = HabitTheme.typography.extraLargeBoldTextPurpleNormal
                )
                Spacer(modifier = Modifier.size(4.dp))
                Text(
                    text = stringResource(id = R.string.home_bottom_sheet_kcal),
                    style = HabitTheme.typography.headTextPurpleNormal
                )
            }

이렇게 하니깐

묘하게 틀어진 모습....

 

Row (verticalAlignment = Alignment.CenterVertically){
                Text(
                    modifier = Modifier.alignByBaseline(),
                    text = calorie.toString(),
                    style = HabitTheme.typography.extraLargeBoldTextPurpleNormal
                )
                Spacer(modifier = Modifier.size(4.dp))
                Text(
                    modifier = Modifier.alignByBaseline(),
                    text = stringResource(id = R.string.home_bottom_sheet_kcal),
                    style = HabitTheme.typography.headTextPurpleNormal
                )
            }

글자 아래를 기준으로 두 Text 가 정렬된 모습

Text의 Modifier.alignByBaseline을 사용하면된다