为什么我的 JetPack 撰写文本这么大（材料设计）

Question

I am practicing Jetpack compose, by making a simple Application with multiple destinations (screen), I happen to be referencing an Android Developer codelab , for a destination. But the final looks is very different from the codelab's, most noticably the fonts are way bigger on my code than it is in the codelab even though I'm using the same font style, h3, and I've tried as much as possible to be using the same or a more recent dependecency than was used in the codelab.

Here's what I mean.

The Android Developer look;

And my code looks like;

Here's the Android Developer compose code;

@Composable
fun FavoriteCollectionCard(
    @StringRes text: Int,
    @DrawableRes drawable: Int,
    modifier: Modifier = Modifier
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        modifier = modifier
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .width(192.dp)
        ) {
            Image(
                painter = painterResource(drawable),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(56.dp)
            )
            Text(
                text = stringResource(text),
                style = MaterialTheme.typography.h3,
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }

    }
}

Here's the Android Developer compose code;

@Composable
fun DashBoardCard(
    @StringRes text: Int,
    @DrawableRes drawable: Int,
    modifier: Modifier = Modifier
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        modifier = modifier
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .width(192.dp)
        ) {
            Image(
                painter = painterResource(drawable),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(56.dp)
            )
            Text(
                text = stringResource(text),
                style = MaterialTheme.typography.h3,
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }

    }
}

As I said before I tried to make the dependencies the same or more recent, I don't want this question to be anymore bucky, but I'm just going to add a few dependency, please whatever you need I'm happy to provide.

Android Developer Codelab dependency;

ext {
        compose_version = '1.2.0-alpha05'
    }

plugins {
    id 'com.android.application' version '7.2.0' apply false
    id 'com.android.library' version '7.2.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
    id 'com.diffplug.spotless' version '6.3.0'
}

My dependency;

ext {
        compose_version = '1.2.0-alpha05'
        nav_version = "2.5.1"
    }

plugins {
    id 'com.android.application' version '7.2.1' apply false
    id 'com.android.library' version '7.2.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
}

EDIT; I will greatly appreciate any type of help, pointers, corrections whatever help you can offer, I will be much greatful.

Thanks a lot for your help, in advance.

Answer 1

Are you using same implementation of MaterialTheme as they are and are you wrapping your screen in it? Their implementation is here and h3 is defined here like this:

h3 = TextStyle(
    fontWeight = FontWeight.Bold,
    fontSize = 14.sp,
    letterSpacing = 0.sp
)

Your image definitely doesn't look like 14sp, it also looks like different color, so I guess you are missing the theme completely.