第一单元构建基本布局核心概念Jetpack Compose 使用声明式 UI范式你只需描述界面长什么样Compose 会自动处理如何渲染。通过可组合函数Composable Functions你可以用 Kotlin 代码构建整个用户界面告别传统 XML 布局文件。 本单元学习目标✅ 理解什么是界面UI以及它的作用✅ 掌握可组合函数Composable Functions的概念与用法✅ 使用Text、Column、Row等基础布局元素构建界面✅ 理解并运用 Modifier修饰符来控制界面样式✅ 了解注解Annotation在 Compose 中的作用✅ 完成一个生日祝福卡片应用 什么是界面UI应用的**用户界面UI**就是我们在屏幕上看到的一切内容——文本、图片、按钮以及各种交互元素以及它们在屏幕上的排列方式。UI 既是应用向用户展示内容的方式也是用户与应用程序交互的载体。一个良好的 UI 设计直接影响用户体验。提示在 Compose 中UI 不再由 XML 文件定义而是通过 Kotlin 函数来描述——这让我们可以用代码的逻辑思维来构建界面。 什么是 Jetpack ComposeJetpack Compose是 Google 推出的用于构建 Android 原生界面的现代化 UI 工具包。相比传统的 View 系统Compose 具有以下核心优势特性说明更少的代码用更简洁的声明式语法替代冗长的 XML 布局强大的工具实时预览、Material You 动态取色等开箱即用直观的 Kotlin使用 Kotlin 函数构建界面逻辑与 UI 合一借助 Compose开发者通过定义一组函数来构建页面这些函数称为可组合函数Composable Functions。它们接收数据作为输入并描述屏幕上应显示的内容。 可组合函数什么是可组合函数可组合函数是 Compose 中构建 UI 的基本构建块。它具备以下特征描述界面的一部分如一个文本、一个按钮或一组元素不返回任何值而是直接组合出界面对象接收一些输入参数如文本内容、样式等生成屏幕上显示的内容注解Annotation注解是用于在代码中附加额外元信息的方式。这些信息可以帮助 Compose 编译器、其他开发者理解代码的用途和行为。语法提示在需要注解的声明开头添加字符作为前缀即可。注解可以应用于属性、函数、类等各种代码元素。带注解的属性示例// 示例代码请勿复制使用JsonvalimgSrcUrl:StringVolatileprivatevarINSTANCE:AppDatabase?null带参数的注解注解还可以携带参数为处理它们的工具提供额外的配置信息。可组合函数示例可组合函数必须使用Composable注解进行标记。该注解告诉 Compose 编译器此函数用于将数据转换为界面。一个简单的可组合函数示例ComposablefunGreeting(name:String){Text(textHello$name!)}理解要点Composable是 Compose 的身份证——没有它函数就只是一个普通的 Kotlin 函数有了它Compose 编译器就知道需要对这个函数进行特殊处理以便生成界面元素。✏️ 设置文本样式更改字体大小Text(textmessage,fontSize100.sp// 修改此值即可改变字体大小)⚠️注意如果只调整字体大小而不调整行高文字的行间距会显得非常紧凑。为获得更好的视觉效果需要同时设置lineHeight行高ComposablefunGreetingText(message:String,modifier:ModifierModifier){Text(textmessage,fontSize100.sp,lineHeight116.sp,// 行高通常比字体大 16dp 左右)} 添加多个文本元素现在我们来添加第二个文本元素签名// 在函数参数中增加一个 from 参数funGreetingText(message:String,from:String,modifier:ModifierModifier)// 添加第二个 Text 组件ComposablefunGreetingText(message:String,from:String,modifier:ModifierModifier){Text(textmessage)Text(textfrom)}// 在预览函数中调用GreetingText(messageHappy Birthday Sam!,fromFrom Emma)如果直接添加而不指定排列方式两个文本会重叠在一起思考为什么会出现这种情况因为默认情况下多个元素没有指定排列方向它们会堆叠在同一位置。我们需要使用布局容器来解决这个问题。️ 界面层次结构与布局元素什么是界面层次结构界面层次结构基于包含机制——一个组件可以包含一个或多个子组件。在层级关系中我们通常使用**父级Parent和子级Child**来描述这种关系。Compose 中的三大基础布局元素Compose 提供了三个最基本的布局可组合项Column、Row和Box。Row将子元素水平排列成一行Column将子元素垂直排列成一列Box将子元素重叠堆叠在一起Row 示例// 请勿复制使用Row{Text(第一个元素)Text(第二个元素)} 尾随 Lambda 语法在上面的代码中Row可组合函数使用的是花括号{}而不是圆括号()。这就是 Kotlin 中的尾随 LambdaTrailing Lambda语法。原理当函数的最后一个参数是一个函数类型时Kotlin 提供了一种简洁的语法——将 Lambda 表达式放在圆括号之外的大括号中。将函数作为参数传递时可以使用尾随 Lambda 语法使代码更加简洁易读。例如Row的最后一个参数是content它是一个描述子元素的函数。如果要创建一个包含三个元素的行可以这样写// 完整写法使用圆括号Row(content{Text(文本一)Text(文本二)Text(文本三)})由于content是最后一个参数我们可以使用更简洁的尾随 Lambda 形式// 简洁写法尾随 LambdaRow{Text(文本一)Text(文本二)Text(文本三)}记忆技巧尾随 Lambda 就是把最后那个函数参数拿出来放在括号外面用花括号包起来。 排列文本元素将文本排成一行RowComposablefunGreetingText(message:String,from:String,modifier:ModifierModifier){Row{Text(textmessage,fontSize100.sp,lineHeight116.sp,)Text(textfrom,fontSize36.sp)}}预览效果将文本排成一列ColumnComposablefunGreetingText(message:String,from:String,modifier:ModifierModifier){Column{Text(textmessage,fontSize100.sp,lineHeight116.sp,)Text(textfrom,fontSize36.sp)}}预览效果 Modifier修饰符的作用为什么需要传递 Modifier我们需要将modifier参数传递给可组合项中的子元素如Column这样才能对外部传入的样式进行统一控制。ComposablefunGreetingText(message:String,from:String,modifier:ModifierModifier){Column(modifiermodifier){Text(textmessage,fontSize100.sp,lineHeight116.sp)Text(textfrom,fontSize36.sp)}}Modifier 的作用范围规则⚠️核心规则谁加 Modifier效果就作用在谁自身。场景一Modifier 加在 Column 上推荐如果你把modifier传给Column那么内边距、背景、阴影、对齐、宽高、点击事件等全部作用在整个 Column 容器上两行文字整体生效。// 外部传入的修饰统一作用于整个 Column两行文字整体Column(modifiermodifier){Text(message)Text(from)}外部调用GreetingText(messageHello,fromAndroid,modifierModifier.padding(20.dp).background(Color.Gray))场景二Modifier 加在每个 Text 上不推荐如果不给 Column 传递 Modifier而是单独给两个 Text 分别加修饰就需要重复写两遍padding/background代码冗余且两个文字会各自独立修饰中间没有统一的容器样式。// ❌ 不推荐代码冗余样式不统一Column(){Text(textmessage,modifierModifier.padding(20.dp).background(Color.Gray))Text(textfrom,modifierModifier.padding(20.dp).background(Color.Gray))}最佳实践优先将 Modifier 加在布局容器如 Column、Row上这样既能保证样式统一又能减少代码重复。 在真实应用中运行预览效果满意后我们就可以在真实的MainActivity中调用自定义的可组合函数了。操作步骤找到MainActivity中的onCreate函数在setContent代码块中调用自己创建的可组合函数给可组合函数传递相应的参数onCreate 代码classMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{HappyBirthdayTheme{Surface(modifierModifier.fillMaxSize(),colorMaterialTheme.colorScheme.background){GreetingText(messageHappy Birthday Sam!,fromFrom Emma)}}}}}模拟器运行结果 美化界面将内容居中对齐如果需要将问候语垂直居中需要添加verticalArrangement参数并设置为Arrangement.CenterComposablefunGreetingText(message:String,from:String,modifier:ModifierModifier){Column(verticalArrangementArrangement.Center,modifiermodifier.padding(8.dp)){// ...}}提示内边距值最好以4.dp为增量使用如 4dp、8dp、12dp、16dp这样能保证界面元素的间距协调统一。文本居中对齐进一步美化可以将主文本进行居中对齐Text(textmessage,fontSize100.sp,lineHeight116.sp,textAlignTextAlign.Center// 文本内容水平居中)运行效果签名右对齐并添加内边距Text(textfrom,fontSize36.sp,modifierModifier.padding(16.dp)// 添加 16dp 的内边距.align(alignmentAlignment.End)// 右对齐)运行效果 完整代码示例packagecom.example.happybirthdayimportandroid.os.Bundleimportandroidx.activity.ComponentActivityimportandroidx.activity.compose.setContentimportandroidx.compose.foundation.layout.Arrangementimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.fillMaxSizeimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.material3.MaterialThemeimportandroidx.compose.material3.Surfaceimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.ui.Alignmentimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.text.style.TextAlignimportandroidx.compose.ui.tooling.preview.Previewimportandroidx.compose.ui.unit.dpimportandroidx.compose.ui.unit.spimportcom.example.happybirthday.ui.theme.HappyBirthdayThemeclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{HappyBirthdayTheme{Surface(modifierModifier.fillMaxSize(),colorMaterialTheme.colorScheme.background){GreetingText(messageHappy Birthday Sam!,fromFrom Emma,modifierModifier.padding(8.dp))}}}}}ComposablefunGreetingText(message:String,from:String,modifier:ModifierModifier){Column(verticalArrangementArrangement.Center,modifiermodifier){Text(textmessage,fontSize100.sp,lineHeight116.sp,textAlignTextAlign.Center)Text(textfrom,fontSize36.sp,modifierModifier.padding(16.dp).align(alignmentAlignment.End))}}Preview(showBackgroundtrue)ComposablefunBirthdayCardPreview(){HappyBirthdayTheme{GreetingText(messageHappy Birthday Sam!,fromFrom Emma)}} 参考链接https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3?hlzh-cn#codelab-https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables本单元小结通过本单元的学习我们掌握了 Compose 的核心概念——可组合函数、布局容器Column/Row以及 Modifier 修饰符的使用。这些是构建一切 Android UI 的基石后续所有复杂的界面都可以基于这些基础元素组合而成。