第一单元创建首个 Android 应用核心概念使用 Jetpack Compose你可以用 Kotlin 代码声明 UI。Compose 是 Android 现代的响应式 UI 工具包——通过可组合函数构建界面而非传统的 XML 布局文件。 本单元学习目标✅ 在 Android Studio 中创建第一个应用✅ 使用预览工具运行并查看应用效果✅ 使用 Kotlin 更新文本内容✅ 使用 Jetpack Compose 构建 UI✅ 使用 Compose 的预览功能实时查看界面效果️ 使用模板创建项目第一步选择项目模板安装 Android Studio 后点击New Project新建项目选择Empty Activity模板。Empty Activity 是一个最小化起点——它只包含最基础的项目结构和代码便于从零学习 Compose。然后点击Next一路Finish完成项目创建。第二步进入编辑器项目创建完成后Android Studio 会自动打开MainActivity.kt文件。这是你所有工作的起点。️ Split 视图点击编辑器顶部的Split按钮会将编辑器分为两部分左侧是代码右侧是应用的实时预览面板。提示Split 视图让你可以边写代码、边实时看到 UI 效果大大提升开发效率。 理解onCreate函数Activity 的入口点onCreate函数是 Android 应用的启动入口。当应用启动时系统会自动调用它来初始化并构建界面。overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)enableEdgeToEdge()setContent{FirstTheme{Scaffold(modifierModifier.fillMaxSize()){innerPadding-Greeting(nameAndroid,modifierModifier.padding(innerPadding))}}}}关键方法拆解代码作用super.onCreate(savedInstanceState)调用父类Activity的 onCreate完成基础初始化enableEdgeToEdge()启用边缘到边缘布局让内容延伸到屏幕边缘setContent { ... }Compose 的核心入口——在此内部定义你的 UIsetContent函数Compose 的起点setContent用于通过**可组合函数Composable Function**定义布局。什么是可组合函数任何标有Composable注解的函数都可以被 Compose 调用它告诉编译器“这个函数会生成 UI”。Compose 会追踪所有从Composable函数调用的函数链确保当数据变化时受影响的 UI 部分能够自动 recompose重新组合。✍️ Greeting 函数你的第一个可组合函数什么是可组合函数Greeting 是一个可组合函数——它接收输入参数并生成屏幕上显示的内容。你可以把它想象成一个UI 构建器给它数据它返回对应的界面。ComposablefunGreeting(name:String,modifier:ModifierModifier){Text(textHello$name!,modifiermodifier)}Composable注解的关键规则规则说明必须添加Composable没有这个注解函数就不是可组合函数Compose 不会管理它函数名首字母大写遵循命名约定Greeting、MyScreen、UserProfile 等不能返回任何内容Compose 函数的返回值由 Compose 框架处理不应手动 return 值但可以有return用于提前退出参数说明name: String→ 显示在屏幕上的文本内容modifier: Modifier Modifier→可选的修饰符参数默认值为空用于给组件添加样式或行为️ GreetingPreview可组合函数的预览函数为什么需要预览有了Preview注解后你不需要编译并运行整个应用就能在编辑器中直接查看可组合函数的效果。这极大地加速了 UI 开发迭代。⚠️注意Split 视图中渲染的是Preview 函数的预览结果而不是onCreate调用的 Greeting 函数。两者是独立的显示通道。实现预览代码Preview(showBackgroundtrue)ComposablefunGreetingPreview(){FirstTheme{Greeting(Android)}}注解/参数作用Preview标记此函数为预览函数AS 会渲染它的结果showBackground true在预览中显示背景色方便观察边界FirstTheme { ... }将内容包裹在应用的主题中确保样式正确应用技巧你可以通过修改GreetingPreview中的参数快速查看不同状态下的 UI 效果如不同文本、不同颜色。 更改背景颜色使用 Surface 容器要让文字拥有背景色需要用Surface将 Text 包裹起来。Surface 是一个布局容器代表界面的某一部分如卡片的一页可以设置背景色、形状等外观属性。操作步骤1. 使用快捷操作包裹在Greeting函数中选中Text组件的代码然后按Alt EnterMac 上为Option Enter在弹出的菜单中选择Surround with widget。2. 选择容器类型在对话框中选择Surround with Container然后将其中的Box改为Surface。3. 修改代码// 修改前默认容器是 BoxComposablefunGreeting(name:String,modifier:ModifierModifier){Box{Text(textHello$name!,modifiermodifier)}}// 修改后将 Box 改为 SurfaceComposablefunGreeting(name:String,modifier:ModifierModifier){Surface{Text(textHello$name!,modifiermodifier)}}4. 设置颜色Surface 接受color参数来设置背景色。需要先导入正确的 Color 类importandroidx.compose.ui.graphics.Color然后在 Surface 中指定颜色ComposablefunGreeting(name:String,modifier:ModifierModifier){Surface(colorColor.Red){// ← 设置背景色为红色Text(textHello$name!,modifiermodifier)}}提示输入Color.后AS 会自动补全所有可用的预定义颜色如 Red、Blue、Green、Purple、Orange 等。也可以使用Color(0xFFxxxxxx)自定义十六进制颜色。自动整理导入自动整理导入的包. 去除不用的. 然后把包按照字母排序. 添加内边距Modifier 是什么Modifier是 Compose 中用于扩充或修改可组合项外观和行为的核心 API。它像一条链——你可以把多个修饰效果串联起来作用于同一个组件。常见的 Modifier 用法padding()→ 内边距内容与容器边缘的距离fillMaxSize()→ 填满父容器size()→ 设置固定尺寸background()→ 设置背景色或图片为 Text 添加内边距每个可组合函数都应该具有一个Modifier类型的可选参数且这应该是第一个可选参数。这样调用者可以自由决定是否传入修饰符。ComposablefunGreeting(name:String,modifier:ModifierModifier){Surface(colorColor.Red){Text(textHello$name!,modifiermodifier.padding(24.dp)// ← 添加 24dp 的内边距)}}dpDensity-independent Pixels密度无关像素确保 UI 在不同屏幕密度的设备上保持一致的视觉尺寸。24.dp是 Google Material Design 推荐的标准间距值之一。效果预览️ 点击查看效果截图️ 知识要点总结概念说明onCreateActivity 的启动入口通过setContent接入 ComposeComposable标记可组合函数——Compose 管理的 UI 构建单元setContentCompose 的根入口——在此内部定义你的整个界面树Surface布局容器可设置背景色、圆角等外观属性Modifier链式修饰符 API用于为组件添加 padding、尺寸、交互等Preview让 AS 在不运行应用的情况下渲染可组合函数的预览效果Split 视图左侧代码 右侧 Preview 的实时编辑界面 参考学习资源 Android Basics with Compose - Unit 1 Pathway