如何在Jetpack Compose中移除文本的顶部填充。

huangapple go评论60阅读模式
英文:

How to remove font top padding in text jetpack compose

问题

如何在Jetpack Compose中移除顶部填充。我正在使用compose_bom = "2023.03.00"。我尝试将includeFontPadding设置为false。但仍然不起作用。

    @预览
    @成套
    乐趣文本(){
        纵向排列(
            修饰符
                .包裹内容大小()
                .背景颜色黑色
        ) {
            文本(
                文本= 你好!!你好吗?”,
                样式=排版(
                    body1 =文本样式颜色=颜色白色字体大小= 16.sp),
                ).body1.复制(
                    平台样式=平台文本样式(
                        includeFontPadding = false
                    )
                )
            )
        }
    }
英文:

How to remove top padding in jetpack compose. I am using compose_bom = "2023.03.00". I tried to use includeFontPadding to false. But still not working.

@Preview
@Composable
fun ShowText() {
    Column(
        Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        Text(
            text = "Hello!! How are you?",
            style = Typography(
                body1 = TextStyle(color = Color.White, fontSize = 16.sp),
            ).body1.copy(
                platformStyle = PlatformTextStyle(
                    includeFontPadding = false,
                )
            )
        )
    }
}

如何在Jetpack Compose中移除文本的顶部填充。

If you see in above image. It's clearly have top padding in words.

答案1

得分: 1

代码正常工作,你看到的空间不是字体填充。

你可以增加字体大小并切换标志来查看差异。

参考链接:
https://stackoverflow.com/a/72445755/9636037
https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b


启用和禁用字体填充之间的区别。

@Composable
fun FontPadding() {
    Column(
        Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        Text(
            text = "Hello!! How are you?",
            style = Typography(
                body1 = TextStyle(
                    color = Color.White,
                    fontSize = 72.sp,
                ),
            ).body1.copy(
                platformStyle = PlatformTextStyle(
                    includeFontPadding = false,
                )
            )
        )
    }
}

我分享了文章链接,因为它有更多细节。字体图形可能具有一些默认填充,这与 Android 应用的 fontPadding 不同。

你可以在博客中的这张图片中观察到相同的情况。

如何在Jetpack Compose中移除文本的顶部填充。

英文:

The code is working, the space you see is not font padding.

You can increase the font size and toggle the flag to see the difference.

References,
https://stackoverflow.com/a/72445755/9636037
https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b



Difference between enabled and disabled font padding.

<img src="https://i.stack.imgur.com/kxjvf.png" width="320"><img src="https://i.stack.imgur.com/KaNwM.png" width="320">

@Composable
fun FontPadding() {
    Column(
        Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        Text(
            text = &quot;Hello!! How are you?&quot;,
            style = Typography(
                body1 = TextStyle(
                    color = Color.White,
                    fontSize = 72.sp,
                ),
            ).body1.copy(
                platformStyle = PlatformTextStyle(
                    includeFontPadding = false,
                )
            )
        )
    }
}


I have shared the article link as it has more details. The font glyph would have some default padding, which differs from the fontPadding applied by Android.

You can observe the same in this image from the blog.

<img src="https://i.stack.imgur.com/1zyl4.png" width="600">

huangapple
  • 本文由 发表于 2023年5月23日 00:04:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76308032.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定