在 Jetpack Compose 中通过字体的上升而不是基线对齐两个文本

2023-11-27

我知道如何将 Jetpack Compose 中的文本与基线对齐。

但现在我需要对齐两个不同大小的文本,它们在一个Row by the ascent这两种字体中较大的一个。如果有意义的话,我想将此视为“按顶部基线”对齐两个文本。Modifier.align(Alignment.Top)不起作用,因为它不会通过上升对齐,而是通过布局的顶部对齐,然后文本在顶部无法正确对齐。

我试图看看如何做到这一点,但显然没有现成的函数或修饰符?我什至没有找到在 Compose 中访问 Text 的 ascent 属性等的方法。所以不确定这怎么可能?

感谢您的任何提示! :)

Edit: 这是这个时候的样子Alignment.Top用来。但我希望这两个文本在顶部对齐。

enter image description here


有关文本布局的所有信息都可以通过以下方式检索onTextLayout Text争论。在这种情况下,您需要一个线条尺寸,可以通过以下方式检索getLineBottom,以及实际的字体大小,可以在layoutInput.style.fontSize.

我同意如果您可以使用一些简单的方法来做到这一点会更容易,所以我已经为您的功能要求,但现在计算方法如下:

onTextLayout = { textLayoutResult ->
    val ascent = textLayoutResult.getLineBottom(0) - textLayoutResult.layoutInput.run {
        with(density) {
            style.fontSize.toPx()
        }
    }
},

对齐两个文本的完整示例:

val ascents = remember { mutableStateMapOf<Int, Float>() }
val texts = remember {
    listOf(
        "Big text" to 80.sp,
        "Small text" to 20.sp,
    )
}
Row(
    Modifier
        .drawBehind {
            ascents.maxOfOrNull { it.value }?.let {
                drawLine(Color.Red, Offset(0f, it), Offset(size.width, it))
            }
        }
) {
    texts.forEachIndexed { i, info ->
        Text(
            info.first,
            fontSize = info.second,
            onTextLayout = { textLayoutResult ->
                ascents[i] = textLayoutResult.getLineBottom(0) - textLayoutResult.layoutInput.run {
                    with(density) {
                        style.fontSize.toPx()
                    }
                }
            },
            modifier = Modifier
                .alpha(if (ascents.count() == texts.count()) 1f else 0f)
                .layout { measurable, constraints ->
                    val placeable = measurable.measure(constraints)
                    val maxAscent = ascents.maxOfOrNull { it.value } ?: 0f
                    val ascent = ascents[i] ?: 0f
                    val yOffset = if (maxAscent == ascent) 0 else (maxAscent - ascent).toInt()
                    layout(placeable.width, placeable.height - yOffset) {
                        placeable.place(0, yOffset)
                    }
                }
        )
    }
}

Result:

enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Jetpack Compose 中通过字体的上升而不是基线对齐两个文本 的相关文章

  • 如何从 AAR 依赖项中排除特定资源?

    有没有一种相当简单的方法来实现模块的build gradle文件来指示应排除依赖项中的某些文件 我特别感兴趣的是从 AAR 中排除某些资源 金丝雀泄密 https github com square leakcanary是一个有趣的库 可帮
  • 保存用户可以访问的 Flutter Android 应用程序中的文本文件

    我在 Flutter 中开发的 Android 应用程序的用户应该能够将一些数据保存 导出 到文本文件中 用户应该能够使用其他应用程序 包括文件管理器 在其 Android 设备上找到并访问此文件 我想 final directory aw
  • 未找到 Gradle DSL 方法:“versionCode()”

    构建我的 Android 项目时遇到问题 我使用Grgit https github com ajoberstar grgit填写versionCode and versionName在 gradle 中 一切工作正常 直到我将 Andro
  • 更改工具栏中汉堡图标的大小?

    我有两个问题 可能很奇怪 但无论如何 我有带有应用程序标题的工具栏 如何将其更改为非徽标的图片 下一个问题 是否可以设置 更改工具栏中汉堡图标的大小 我在下面的下一个代码的帮助下制作了经典的导航抽屉 我也使用了 ActionBarDrawe
  • 将标题设置为操作栏时出现空指针异常

    Error Caused by java lang NullPointerException Attempt to invoke virtual method void android app ActionBar setTitle java
  • 无法将 Tesseract OCR 模块添加到 Android Studio

    我按照此处找到的分步指南进行操作 https www codeproject com Articles 840623 Android Character Recognition https www codeproject com Artic
  • Android - 除了普通 SSL 证书之外还验证自签名证书

    我有一个通过 SSL 调用 Web 服务的 Android 应用程序 在生产中 我们将拥有由受信任的 CA 签名的普通 SSL 证书 但是 我们需要能够支持自签名证书 由我们自己的 CA 签名 我已经成功实施了接受自签名证书的建议解决方案
  • 如何在照片删除后刷新 Android 的 MediaStore

    问题 如何使媒体存储刷新其已删除文件的条目 从外部存储中删除代码中的照片后 我仍然在图库中看到已删除照片的插槽 空白照片 画廊似乎反映了媒体存储 并且在媒体存储中找到了已删除的照片 直到手机重新启动或通常 直到重新扫描媒体为止 尝试扫描已删
  • Flutter / FireStore:如何在 Flutter 中显示 Firestore 中的图像?

    我想将我在应用程序中使用的一些图像放入 Firestore 并从那里显示它们 而不是将它们作为资产捆绑在我的应用程序中 为了做到这一点 我想出了以下解决方案 对于我想要显示图像的项目 我创建了一个 Firebase 文档 其中有一个字段存储
  • 如何检测 Google Play 上是否有我的应用程序的更新? [复制]

    这个问题在这里已经有答案了 有没有办法以编程方式检查 Google Play 上我的应用程序是否有更新 以便通知用户 我知道 android google play 有自动通知 但我想使用我自己的通知 弹出消息来更新可用性 有点像 Vibe
  • Locale.getDefault().getCountry() 返回空字符串

    我正在尝试使用国家 地区代码获取用户语言 例如en US es es 但是当我使用Locale getDefault getCountry 它返回空字符串 虽然它给了我正确的语言Locale getDefault getLanguage N
  • Facebook LoginActivity 未正确显示

    我有一个使用 Facebook 登录的应用程序 我有 FacebookSDK 并且使用 com facebook LoginActivity 问题是 在 10 英寸平板电脑上 当显示软键盘时 活动无法正确显示 我使用的是 Samsung G
  • 版本 5 上带有 getBackground().setAlpha 的按钮 - 棒棒糖无法正常工作

    我有这段代码 适用于自 API 14 以来的每个版本 但在 Android 5 0 Lollipop 上无法正常工作 以下是我希望按钮出现的方式 单击按钮1 buttonArrivals getBackground setAlpha 180
  • 如何在新标签 android webview 中打开链接? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我已经使用 webview 创建了一个 android 应用程序来显示我的网站 我什至想添加在新选项卡中打开链接的功能 但我找不到任何
  • 带有空白白屏的 WebView

    我在 DialogFragment 中有一个 webview 它使用以下方式显示文档和 PDF它可以进行几次尝试 但如果用户尝试频繁打开和关闭对话框 webview 将显示空白屏幕 我已经尝试了所有的线程link1 https stacko
  • Android:单一活动,多个视图

    我不是 Android 专业人士 尽管我开发了一个包含 50 多个活动的应用程序 这使得该应用程序非常庞大 经过8周的开发 现在出现了一些问题 导致应用程序难以维护和升级 我正在处理的主要问题是 我无法将对象引用传递给活动的构造函数 事实上
  • 如何在android sdk上使用PowerMock

    我想为我的 android 项目编写一些单元测试和仪器测试 然而 我遇到了一个困扰我一段时间的问题 我需要模拟静态方法并伪造返回值来测试项目 经过一些论坛的调查 唯一的方法是使用PowerMock来模拟静态方法 这是我的 gradle 的一
  • 如何更改锁屏自定义文本(所有者信息)?

    我写了程序代码 String message This is test Settings System putString context getContentResolver Settings Secure LOCK PATTERN EN
  • OpenGL ES 2.0 屏幕闪烁

    我面临着一个大问题 我正在使用带有 Android 4 0 3 的 Transformer tf101 选项卡 我的应用程序使用自定义 OpenGL ES 2 0 表面 我正在用纹理渲染多个平面 该纹理大约发生变化 每秒 20 次 并通过传
  • 在 Android 中更新到 API 26 时,清单合并失败并出现多个错误

    我尝试使用 API 26 更新我的 gradle 安卓工作室2 3 3 但我在编译项目时遇到以下错误 这是我收到的错误的屏幕截图 应用级别build gradle Top level build file where you can add

随机推荐

  • 如何使用 XCode 4 在 iPhone 可执行文件中设置环境变量?

    自从切换到 XCode 4 以来 我一直在寻找如何在 iPhone 可执行文件中设置环境变量 例如 NSZombies 时遇到问题 在 XCode 3 中 您可以右键单击 app 文件 选择 获取信息 并设置环境变量 但在 XCode 4
  • 我应该在 LINQ 查询中使用两个“where”子句或“&&”吗?

    当编写具有多个 and 条件的 LINQ 查询时 我应该编写一个where子句包含 或多个where条款 每个条件一个 static void Main string args var ints new List
  • 动态设置SSRS报告的数据源,无需无人值守执行帐户?

    我需要在运行时动态指定 SSRS 报告的数据源 我找到了这些解决方案 在服务器端以编程方式更改报告的 SSRS 数据源 SSRS动态共享数据源 几十年来 水晶报表等其他技术使我们能够非常轻松地随意更改数据源 因此对我来说 这些黑客仍然是实现
  • 如何取消 AJAX 长时间运行的 MVC 操作客户端(在 JavaScript 中)?

    我有一个长时间运行 4 10 秒 的 MVC 操作 它通过 AJAX 调用运行报告 当它运行时 用户可以更改参数并运行其他内容 因此我在发出另一个请求之前取消了 AJAX 请求 因此 例如 例如在 jQuery 中 但无论如何问题都会发生
  • 使用 JavaFX 任务正确执行多线程和线程池

    我可以选择让用户从 FileChooser 提交多个文件以供某些代码处理 结果将是读取文件的 IO 然后对存储的数据进行实际的大量计算 允许用户选择多个文件 并且由于文件处理不依赖于所选的任何其他文件 这使我的生活更容易使用线程处理此问题
  • Azure 网站始终在线

    我有一个在 Azure 网站上运行的 WebAPI 应用程序 它在基本模式下运行 我可以选择将其设置为 始终开启 关于这到底意味着什么 网上似乎存在相互矛盾的信息 我知道效果 但 如何 在这里很重要 特别是 某些东西是否会定期自动到达我的应
  • 内存中收集的 Linq 性能

    我有一个列表 Collection users 其中包含大约 100K 用户记录 所有用户对象均从数据库完全加载 其中包含 Bio 名字 姓氏等字段 该集合在应用程序启动时从数据库中获取并保存在内存中 然后我有这样的代码 User cach
  • 为什么 webpack 捆绑为“System.register”

    我正在尝试使用 webpack 开发一个 angular2 应用程序 但最终在浏览器控制台中出现错误 未捕获的引用错误 系统未定义 当我查看捆绑的 js 时 我发现它正在使用 System register 如下所示 function mo
  • 如何在 SQLAlchemy、Flask、Python 中处理唯一数据

    您通常如何处理 Flask 中的唯一数据库条目 我的数据库模型中有以下列 bank address db Column db String 42 unique True 问题是 甚至在我检查它是否已经在数据库中之前 我收到一个错误 检查它是
  • Internet Explorer 保留 3D 修复

    以下代码适用于除 IE 10 之外的所有浏览器 MSDN网站说如下 我不明白如何应用 注意W3C 规范为此属性定义了一个关键字值preserve 3d 表示不进行扁平化 目前 Internet Explorer 10 不支持preserve
  • ios/Flutter/App.framework" 失败:没有这样的文件或目录 (2) 完成 flutter

    Hello i have an app that was working fine till yesterday i update flutter SDK after the update is finished i tried to bu
  • 对 HTML 表单的操作属性使用空 URL 是一个好习惯吗? (动作=“”)

    我想知道是否有人可以对使用空白 HTML 表单操作回发到当前页面给出 最佳实践 响应 有一个帖子询问空白 HTML 表单操作在这里做什么和一些页面 例如this one建议这很好 但我想知道人们的想法 您能做的最好的事情就是完全忽略操作属性
  • 如何更改 Webdriver Firefox 连接到本地主机的端口?

    我有一个 selenium webdriver 测试 已转换为 Maven 项目 我想通过 Jenkins 上的 xvfb 运行它 显示选择有问题 但我想尝试其他方法 例如更改端口 这是我得到的错误 org openqa selenium
  • 测量 Windows C++ 的时间、毫秒或微秒 [重复]

    这个问题在这里已经有答案了 如何在 Windows C 中测量以毫秒或微秒为单位的执行时间 我发现许多方法一调用 time NULL 但它仅以秒为单位测量时间 而秒时钟 clock t 测量 CPU 时间 而不是实际时间 我找到了本文提到的
  • 我需要在析构函数中使成员变量无效吗?

    为什么人们想要显式清除 dtor 中的 a 向量成员变量 请参阅下面的代码 清除向量有什么好处 即使它会在 dtor 代码的最后一行之后被销毁被处决 class A A values clear private std vector lt
  • 使用 python 从语料库中提取最常用的单词

    也许这是一个愚蠢的问题 但我在使用 Python 从语料库中提取 10 个最常见的单词时遇到了问题 这就是我到目前为止所得到的 顺便说一句 我使用 NLTK 来读取包含两个子类别的语料库 每个子类别有 10 个 txt 文件 import
  • 如何查看Oracle表列字符集?

    在Oracle中 我们可以使用desc返回每列的列宽 是否有任何命令可以检索每列的字符集 例如 AL32UTF8 WE8MSWIN1252 非常感谢 Oracle 中的列没有字符集 数据库有字符集和国家字符集 全部char varchar2
  • SQL 除以 2 计数()

    我有以下查询 它试图计算出某种产品占产品总数的百分比 IE 产品数量 产品总数 百分比 WITH totalCount AS SELECT CAST COUNT id as Integer as totalCount FROM TABLE
  • 使用字段扩展的 Facebook Graph API 调用对于速率限制的计数与批量调用是否不同

    我正在寻求优化我的 Facebook 应用程序 今天 我使用四个图形 API 调用进行批量调用 me me friends me likes me feed 如果我使用字段扩展将其更改为单个图形 API 调用 如下所示 me fields
  • 在 Jetpack Compose 中通过字体的上升而不是基线对齐两个文本

    我知道如何将 Jetpack Compose 中的文本与基线对齐 但现在我需要对齐两个不同大小的文本 它们在一个Row by the ascent这两种字体中较大的一个 如果有意义的话 我想将此视为 按顶部基线 对齐两个文本 Modifie