首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jetpack Compose,居中显示文本而不填充字体?

基础概念

Jetpack Compose 是 Android 的现代 UI 工具包,旨在通过声明式方法简化 UI 开发。它允许开发者使用 Kotlin 代码来构建 UI 组件,而不是传统的 XML 布局文件。

居中显示文本而不填充字体

在 Jetpack Compose 中,要实现文本居中显示而不改变字体大小,可以使用 Text 组件,并结合 Modifier 进行布局调整。

示例代码

代码语言:txt
复制
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CenteredText() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "居中显示的文本",
            modifier = Modifier.padding(8.dp)
        )
    }
}

解释

  1. Box: 用于创建一个容器,可以设置其大小和对齐方式。
    • Modifier.fillMaxSize():使 Box 占满整个可用空间。
    • Modifier.padding(16.dp):为 Box 添加内边距。
    • contentAlignment = Alignment.Center:将内容(即 Text 组件)居中对齐。
  • Text: 用于显示文本。
    • text = "居中显示的文本":设置要显示的文本内容。
    • Modifier.padding(8.dp):为文本添加内边距,以避免文本紧贴容器边缘。

应用场景

这种布局方式适用于需要在屏幕中央显示文本的场景,例如欢迎页面、提示信息、标题等。

参考链接

通过这种方式,你可以确保文本在容器中居中显示,而不会改变字体的大小。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

compose--初入compose、资源获取、标准控件与布局

官方地址:https://developer.android.google.cn/jetpack/compose/mental-model 我这边也是根据官方文档,对重要的部分和自己的想法进行融合,来介绍什么是...compose,也可以查看官方文档-快速入门:https://developer.android.google.cn/jetpack/compose/setup 1.创建项目 我这边尝鲜使用MD3风格的项目..."androidx.compose.ui:ui-test-manifest" } 3.kotlin-compose compiler版本对应 BOM中包含Compose编译器库,所以我们需要手动对应下...kotlin版本与compose compiler版本,下面是两者的兼容关系,官网也可以查询到最新的对应关系: https://developer.android.google.cn/jetpack/...= null,//字体样式,正常或斜体 fontWeight: FontWeight? = null,//字体粗细 fontFamily: FontFamily?

6K30
  • 【建议收藏】Jetpack Compose编程知识全汇总 (含详细实例讲解)

    Compose还未正式发布,需要下载最新Canary版的Android Studio 预览版 以下三种方式可初步体验: 尝试使用Jetpack Compose 示例应用 创建支持Jetpack Compose...`group: String`: 为该Preview设置group名字,可以在UI中以group为单位显示。 6. `fontScale: Float`: 可以在预览中对字体放大,范围是从0.01。...Modifier.fillMaxHeight() // 填充整个高度 Modifier.fillMaxSize() // 填充整个宽度和高度 Modifier.width(2.dp) // 设置宽度...imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Compose 专为单向数据流打造。这是一种状态向下流动事件向上流动的设计。 !...Jetpack Compose应用1 开始前的准备 创建DEMO 遇到的问题 [1240] 2. Jetpack Compose应用2 3.

    6.4K60

    原创|Android Jetpack Compose 最全上手指南

    二、Jetpack Compose 介绍 Jetpack Compose 是一个用于构建原生Android UI 的现代化工具包,它基于声明式的编程模型,因此你可以简单地描述UI的外观,Compose...添加多个Text 在上面的例子中,我们添加了一个Text显示文本,现在我们添加三个文本,代码如下: class MainActivity : AppCompatActivity() { override...如何显示一张图片? 在原来的安卓原生布局中,显示图片有相应的控件ImageView,设置本地图片地址或者Bitmap就能展示,在Jetpack Compose 中该如何显示图片呢?...图片已添加到布局中,但会展开以填充整个视图,并和文本是拼叠排列,文字显示在上层。...Material 调色版使用了一些基本颜色,如果要强调文本,可以调整文本的不透明度: Text("我超❤️JetPack Compose的!"

    6.3K20

    一起看 IO | Jetpack Compose 中的新特性

    : 文本改进 字体边距 我们在问题跟踪器中定位到了 得票最高的问题之一,并通过将 includeFontPadding 设置为自定义参数来解决它。...Compose 1.2 还加入了 可下载字体。...通过可下载字体,您可以保持较小的 APK 文件体积并改善用户的系统运行状况,因为多个应用可通过提供程序共享相同字体文本放大镜 Android 文本提供了放大镜组件,通过放大镜可以更轻松地选择文本。...Compose 现已支持文本放大镜。 拖动选择图标时会显示放大镜,以便于您查看指尖下方的内容。...△ Layout Inspector 显示重组计数和重组高亮指示器 Compose 从根本上改变了您编写界面的方式,您可以遵循我们发布的最佳实践来确保应用的高性能。

    2.2K20

    Android Jetpack组件 Compose 使用介绍

    Android Jetpack组件 Compose 使用 前言 正文 一、创建Compose项目 1. setContent 2....排列效果 3. gradle 二、布局 ① 布局填充 ② 大小设置 ③ 图片设置 ④ 空间占位 三、列表 ① 显示列表 ② item点击事件 四、源码 前言   一直以来,在Android 中构建UI页面是一个很耗时的操作...,我们需要图形界面和xml去创建布局,通过预览达到我们想要的效果,Jetpack推出的新组件Compose就解决了这个痛点,下面让我们来了解它,使用它。...正文   Jetpack Compose是一个用于构建原生Android UI的现代工具包。...函数命名就按自己的意思来,这里面是Text就表示通过Compose编辑识别为TextView,然后设置文本值: "Hello $name!"

    2.9K20

    一文带你了解 Google IO 2022 精彩汇总与个人感想

    其他隐私相关还有:「附近 WiFi 权限」 、「通知权限(某个 App 如果想要发出通知,需要用户授权)」、 「存储媒体权限(可以为不同的存储媒体单独授权)」、 「富文本通信服务 (RCS) 的新标准」...JetpackJetpack Compose Jetpack 相信作为 Android 开发,每次 I/O 最关心的还有 JetpackCompose 相关的信息,目前 Android Jetpack...❝更多 Jetpack 内容请查阅文末链接 ❞ Jetpack Compose 关于 Jetpack Compose,本次大会官方表示,目前 Play Store、Twitter、Aribnb 等大型企业都已经开始使用...本次发布Compose 1.2 的第一个 beta 版本, 其中主要改进了: 字体填充问题; 可下载字体支持; 文字放大镜支持; 「自定义懒布局支持;」 支持与 CoordinatorLayout 交互...事实上 Compose Multiplatform Framework 是由 JetBrains 维护和开发,「本质上 Jetpack Compose 是 Android Jetpack 里的 UI 框架

    3K20

    Android | Compose 初上手

    Compose 编程思想 Jetpack COmpose 是一个适用于 android 的新式声明性界面工具包。...组合函数 Jetpack Compose 是围绕可组合函数构建的,这些函数就是要显示在界面上的元素,在函数中只需要描述应用界面形状和数据依赖关系,不用去关系界面的构建过程, 如果需要创建组合函数,只需要将...上面的 一个简单的示例Greeting 微件,它接收 String 发出的一个显示问候消息的 Text 微件。此函数不会返回任何内容,因为他们描述所需的屏幕状态,不是构造界面微件。...重组跳过尽可能多的内容 如果界面某些部分无需,Compose 会尽力只重组需要更新的部分。这意味着,他可以跳过某些内容以重新运行单个按钮的可组合项,执行树中其上面或下面的任何可组合项。...= null,//字体 letterSpacing: TextUnit = TextUnit.Unspecified, //用于与文本相关的维度值的单位。

    5.3K20

    实战 | 在应用中使用 Compose Material 3

    Material You 是下一代 Material Design 的发展方向,也是一种全新的设计愿景: 方便您打造个性化的样式设计、满足各种需求并自适应各种屏幕;Jetpack Compose 是用于构建原生...Jetchat 是一款使用 Jetpack Compose 构建的示例聊天应用,目前使用 Material Design 2 中的主题和组件。...Material Design 3 有了新的字体规格,包括了由 Material Design 2 适配而来的文本样式。...样式的命名和分组简化为显示、大标题、标题、正文和标签;每个分组都有大号、中号和小号字体。...我们可以使用字体资源 ID 和字体粗细构造 Font 类,然后使用 Typography 类声明 Jetchat 字体样式,并使用 TextStyle 类覆盖每个文本样式,包括我们的字体、字号、字体粗细等其他排版值

    2.8K20

    设计图转Compose代码,Relay帮你轻松搞定

    开发者:使用 Relay for Android Studio 插件导入界面软件包,并生成完美的 Jetpack Compose 代码。...hello_card/fonts/* 在 Jetpack Compose 中支持相应组件所需的所有字体文件。...UI更新 我们在Figma中将文字颜色改为红色,并且再多添加一个文本显示任意内容。 更改完之后我们重复上述步骤,发布UI包。 发布完之后我们直接在Android Studio中更新UI包。...文本内容 我们选中显示“阿黄哥”的文本组件userName,右击选择Relay for Figma。 为userName添加text-content参数。...Relay 可以根据UI图生成Compose 代码,包括添加参数、点击事件等 Relay 当前不支持支持阴影、文字属性、图层旋转等,并且仅支持Google fonts字体,要求较高时无法满足 生成的Compose

    39910

    Compose Text 文本和 AnnotatedString 多种样式的文本详解|技术创作特训营第一期

    随着团队的不断更新,项目组逐渐转到 Jetpack Compose 方式,对于 Compose 绘制 UI 方式在不断的熟悉,开发过程中会遇到很多不同的场景,和尚在此记录一下常用的 Text...;fontFamily 用于设置文本字体,Android 系统默认四种字体,也可以按照需求下载自定义字体,注意引入时需要完整路径;Text( text = "$name, fontWeight =...,当使用的 FontFamily 包含粗体或斜体时,系统是否应该伪造粗体或斜体;9.3 textIndent & shadow    TextStyle 的 textIndent 用于设置文本缩进,设置缩进位置...、设置部分内容特定颜色、尺寸等;传递的是 SpannableString, Compose 中使用 Text 设置富文本样式时,传递的是 AnnotatedString;    其中 Spanned...阿策小和尚【选题思路】    Compose UI 发展至今,随着高性能和易用性,逐渐替换了历史的 Java / Kotlin 模式开发,突然转向 Compose 开发,还是会有一段适应期, Text

    2.7K32

    Jetpack Compose 竟能写出如此炫酷的倒计时 App

    Compose开发者挑战赛二周目 ---- 为配合 Jetpack Compose beta 版的发布,Google 官方发起了 Compose 开发者挑战赛活动,目前已经入二周目 android-dev-challenge...Note:对 Compose 开发者挑战赛及其参加方法有兴趣的朋友可以参考:《Jetpack Compose 开发挑战赛》 以下是我完成的项目:TikTik 项目中使用的都是 Compose 最基础的...剩余时间的变化,带来文字内容和字体大小不同。...style 设置为 Stroke 表示只绘制边框,设置为 Fill 则表示填充这个弧形区域形成扇形。...drawCircle 用来绘制一个正圆,这里通过 animatedReverse,改变半径实现呼吸灯效果 Note: 关于Compose动画的更多内容可以参考 《一文学会使用Jetpack Compose

    1.2K20

    安卓软件开发:使用AndroidView(MDC)实现高级轮播图App-下篇

    Jetpack Compose:声明式 UI 开发 不同的是,Jetpack Compose 完全抛弃了 XML 布局,所有 UI 都是用 Kotlin 代码描述的。...举个例子,用 Compose 处理按钮点击事件后改变按钮文本,代码如下 var count by remember { mutableStateOf(0) } Button(onClick = { count...++ }) { Text("Nim已点击了$count times") } 在 Compose 中,状态的变化(count++)直接触发 UI 的更新,不需要手动去找这个按钮再更新它的文本内容...例如,可以非常方便组合现有的组件或创建新的组件,不需要关心视图的生命周期等复杂内容。 4.6 学习成本:MDC VS Jetpack Compose MDC:上手门槛低,复杂度高。...对于那些依赖旧版框架或者希望立即切换到新框架的开发者来说,MDC 是一个非常稳定的解决方案。 有任何问题欢迎提问,感谢大家阅读 )

    1140

    掌握 Jetpack Compose 中的 State,看这篇就够了

    无状态的可组合项是持有自身状态的可组合项。它们在 Jetpack Compose 里有各自适用的场景。什么时候应该把可组合项设计成无状态可组合项?在大多数情况下,我们需要尽可能让可组合项保持无状态。...它本身持有任何状态相关的实例——所以它自然就是一个无状态可组合项。什么时候应该把组合项设计成有状态组合项?...举个例子:文本输入和可组合项状态更新之间存在延迟,在快速输入文本的时候你可能会看到诡异的表现,如下面的视频演示的那样。...TODO 转成 Gif一个简单的规避方式就是把TextInput设计成有状态的可组合项,它将持有需要显示文本,并通过类似onTextChanged的监听器通知调用方。...因为这个函数是一个可组合函数,可组合函数只能被可组合函数调用,在ViewModel里用不了。

    7.9K111

    一起看 IO | Compose for Wear OS Beta 版发布!

    Beta 版本介绍 自去年的 I/O 大会以来,我们一直在努力将 Jetpack Compose 的优势带到 Wear OS,还通过 Slack 与社区互动,收集开发者对 API、组件和工具的反馈。...Slider 可让用户从一个数值范围内进行选择,是调整字体大小或亮度等设置的理想组件。 Stepper 是让用户从一个数值范围内进行选择的全屏控制组件。例如,用户可以用其控制耳机的音量。...改进一览 ScalingLazyColumn: 改进了默认行为,使其与 Wear OS 的 Material 设计一致,包括更新了缩放参数、默认的额外填充,以及从其包含的内容获取尺寸。...CurvedLayout 是连接直角坐标和极坐标的桥梁, curvedComposable 可以用来引入传统的 Composable 组件 (前提是这样做有意义)。...即刻开始使用 许多移动端 Compose 的开发原则同样适用于 Wear OS 版本的 Compose,如果您不熟悉这套用户界面工具包,可以从 Jetpack Compose 的基础知识开始上手。

    1.4K20

    写给初学者的Jetpack Compose教程,基础控件和布局

    大家好,写给初学者的Jetpack Compose教程又更新了。 准确来说,这才是本系列的第一篇文章。因为上篇文章只是个序篇,和大家聊一聊为什么我们要学习Compose。...如果你现在仍然有这个疑惑,那么可以先移步上篇文章 写给初学者的Jetpack Compose教程,为什么要学习ComposeCompose的知识体系很庞大,因此这个系列教程可能我会写很多篇。...Text Text毫无疑问一定是Compose当中最常用的一个控件,主要用于显示一段文本,对应的是View当中的TextView。...这需要回顾一下我们在上一篇文章中提到的声明式UI的编程思想,还没看过的朋友请参考 写给初学者的Jetpack Compose教程,为什么要学习Compose?...TextField中显示的内容就是一种状态,因为随着你的输入,界面上显示的内容也需要跟着更新才行。 那么这里,当在TextField中输入内容时,首先我们并没有去做刷新页面这个操作。

    2.7K20
    领券