第二章：Compose入门—声明式UI编程-编程实验室

第二章：Compose 入门 — 声明式 UI 编程

Compose 的核心理念：用 Kotlin 代码声明 UI，而不是用 XML 布局文件。

2.1 传统 View 系统 vs Compose

对比项	传统 View 系统	Jetpack Compose
UI 描述	XML 布局文件	Kotlin 代码
状态更新	findViewById + 手动修改	状态驱动自动重组
组件创建	继承 ViewGroup	调用 Composable 函数
预览	XML 预览编辑器	@Preview Composable
声明方式	指令式	声明式

传统方式：

<!-- activity_main.xml --><LinearLayout><TextViewandroid:id="@+id/tv_title"/><Buttonandroid:id="@+id/btn_submit"/></LinearLayout>

// MainActivity.kttv_title.text="Hello"btn_submit.setOnClickListener{...}

Compose 方式：

@ComposablefunGreetingPage(){vartextbyremember{mutableStateOf("Hello")}Column{Text(text=text)Button(onClick={text="World"}){Text("Click me")}}}

2.2 Composable 函数

Compose 的 UI 构建块是@Composable函数，简称 Composable。

@ComposablefunArticleItem(title:String,description:String?,onClick:()->Unit){Card(modifier=Modifier.fillMaxWidth().padding(12.dp).clickable(onClick=onClick),){Column{ArticleImage(imageUrl=thumbnail.orEmpty())Text(text=title,fontWeight=FontWeight.Bold)Text(text=description?:"暂无描述")}}}

要点：

函数标记@Composable，告诉编译器这是 UI 构建函数
Composable 函数可以嵌套调用，形成 UI 树
所有 UI 状态通过参数传入或内部 state 管理

2.3 Modifier 修饰符

Modifier 用于配置 Composable 的布局、样式、交互：

Text(text="Hello",modifier=Modifier.fillMaxWidth()// 宽度撑满.padding(16.dp)// 内边距.clickable(onClick={}),// 可点击fontWeight=FontWeight.Bold,color=MaterialTheme.colorScheme.primary,)

常用 Modifier：

Modifier	作用
`fillMaxWidth()`	宽度撑满父布局
`padding(16.dp)`	设置内边距
`.clickable { }`	添加点击事件
`Modifier.size(48.dp)`	固定尺寸
`.clip(CircleShape)`	裁剪形状

2.4 状态管理

Compose 是响应式的，当状态变化时 UI 自动重组。

@ComposablefunSearchBar(){varsearchTextbyremember{mutableStateOf("")}OutlinedTextField(value=searchText,onValueChange={searchText=it},// 状态更新 → UI 重组label={Text("搜索内容")},)}

关键函数：

mutableStateOf(initial)— 创建可观察状态
remember { }— 在重组时保持状态不丢失
collectAsState()— 将 StateFlow 转为 Compose 状态

2.5 Material3 组件

项目使用 Material3 设计语言：

Scaffold(topBar={TopAppBar(title={Text("Compose 入门项目")},actions={IconButton(onClick={/* 跳转个人中心 */}){Icon(Icons.Default.Person,contentDescription="个人中心")}})}){padding->// 页面内容，padding 是顶部栏的高度Box(modifier=Modifier.padding(padding)){// ...}}

常用 Material3 组件：

Scaffold— 页面脚手架，提供 TopAppBar/BottomBar 等
Card— 卡片容器
Button/TextButton— 按钮
OutlinedTextField— 输入框
LazyColumn/LazyRow— 高性能列表（替代 RecyclerView）
CircularProgressIndicator— 加载中指示器

2.6 列表渲染：LazyColumn

传统 RecyclerView 替代方案：

LazyColumn{items(items=articles,key={it.id},// 高效重组的关键){item->ArticleItem(title=item.title,description=item.description,onClick={onArticleClick(item)})}}

优势：

无需 Adapter/ViewHolder
key 参数确保高效更新
支持itemsIndexed获取索引

2.7 预览功能

Android Studio 支持 @Preview 实时预览：

@Preview(showBackground=true,name="文章条目")@ComposablefunArticleItemPreview(){MyFirstComposeTheme{Surface(modifier=Modifier.fillMaxSize()){ArticleItem(title="Jetpack Compose 入门",description="学习声明式 UI 编程",thumbnail=null,onClick={},)}}}