第二章Compose 入门 — 声明式 UI 编程Compose 的核心理念用 Kotlin 代码声明 UI而不是用 XML 布局文件。2.1 传统 View 系统 vs Compose对比项传统 View 系统Jetpack ComposeUI 描述XML 布局文件Kotlin 代码状态更新findViewById 手动修改状态驱动自动重组组件创建继承 ViewGroup调用 Composable 函数预览XML 预览编辑器Preview Composable声明方式指令式声明式传统方式!-- activity_main.xml --LinearLayoutTextViewandroid:idid/tv_title/Buttonandroid:idid/btn_submit//LinearLayout// MainActivity.kttv_title.textHellobtn_submit.setOnClickListener{...}Compose 方式ComposablefunGreetingPage(){vartextbyremember{mutableStateOf(Hello)}Column{Text(texttext)Button(onClick{textWorld}){Text(Click me)}}}2.2 Composable 函数Compose 的 UI 构建块是Composable函数简称 Composable。ComposablefunArticleItem(title:String,description:String?,onClick:()-Unit){Card(modifierModifier.fillMaxWidth().padding(12.dp).clickable(onClickonClick),){Column{ArticleImage(imageUrlthumbnail.orEmpty())Text(texttitle,fontWeightFontWeight.Bold)Text(textdescription?:暂无描述)}}}要点函数标记Composable告诉编译器这是 UI 构建函数Composable 函数可以嵌套调用形成 UI 树所有 UI 状态通过参数传入或内部 state 管理2.3 Modifier 修饰符Modifier 用于配置 Composable 的布局、样式、交互Text(textHello,modifierModifier.fillMaxWidth()// 宽度撑满.padding(16.dp)// 内边距.clickable(onClick{}),// 可点击fontWeightFontWeight.Bold,colorMaterialTheme.colorScheme.primary,)常用 ModifierModifier作用fillMaxWidth()宽度撑满父布局padding(16.dp)设置内边距.clickable { }添加点击事件Modifier.size(48.dp)固定尺寸.clip(CircleShape)裁剪形状2.4 状态管理Compose 是响应式的当状态变化时 UI 自动重组。ComposablefunSearchBar(){varsearchTextbyremember{mutableStateOf()}OutlinedTextField(valuesearchText,onValueChange{searchTextit},// 状态更新 → 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(modifierModifier.padding(padding)){// ...}}常用 Material3 组件Scaffold— 页面脚手架提供 TopAppBar/BottomBar 等Card— 卡片容器Button/TextButton— 按钮OutlinedTextField— 输入框LazyColumn/LazyRow— 高性能列表替代 RecyclerViewCircularProgressIndicator— 加载中指示器2.6 列表渲染LazyColumn传统 RecyclerView 替代方案LazyColumn{items(itemsarticles,key{it.id},// 高效重组的关键){item-ArticleItem(titleitem.title,descriptionitem.description,onClick{onArticleClick(item)})}}优势无需 Adapter/ViewHolderkey 参数确保高效更新支持itemsIndexed获取索引2.7 预览功能Android Studio 支持 Preview 实时预览Preview(showBackgroundtrue,name文章条目)ComposablefunArticleItemPreview(){MyFirstComposeTheme{Surface(modifierModifier.fillMaxSize()){ArticleItem(titleJetpack Compose 入门,description学习声明式 UI 编程,thumbnailnull,onClick{},)}}}预览文件通常命名为XxxPagePreview.kt与页面分开存放。2.8 总结Compose 用 Kotlin 代码声明 UI无需 XML状态变化自动触发 UI 重组Modifier 配置组件属性链式调用LazyColumn 替代 RecyclerView更简洁Preview 支持实时预览加速开发上一章第一章项目概述与环境搭建 下一章第三章MVVM 架构与 ViewModel
第二章：Compose入门—声明式UI编程
发布时间：2026/5/19 4:01:23
第二章Compose 入门 — 声明式 UI 编程Compose 的核心理念用 Kotlin 代码声明 UI而不是用 XML 布局文件。2.1 传统 View 系统 vs Compose对比项传统 View 系统Jetpack ComposeUI 描述XML 布局文件Kotlin 代码状态更新findViewById 手动修改状态驱动自动重组组件创建继承 ViewGroup调用 Composable 函数预览XML 预览编辑器Preview Composable声明方式指令式声明式传统方式!-- activity_main.xml --LinearLayoutTextViewandroid:idid/tv_title/Buttonandroid:idid/btn_submit//LinearLayout// MainActivity.kttv_title.textHellobtn_submit.setOnClickListener{...}Compose 方式ComposablefunGreetingPage(){vartextbyremember{mutableStateOf(Hello)}Column{Text(texttext)Button(onClick{textWorld}){Text(Click me)}}}2.2 Composable 函数Compose 的 UI 构建块是Composable函数简称 Composable。ComposablefunArticleItem(title:String,description:String?,onClick:()-Unit){Card(modifierModifier.fillMaxWidth().padding(12.dp).clickable(onClickonClick),){Column{ArticleImage(imageUrlthumbnail.orEmpty())Text(texttitle,fontWeightFontWeight.Bold)Text(textdescription?:暂无描述)}}}要点函数标记Composable告诉编译器这是 UI 构建函数Composable 函数可以嵌套调用形成 UI 树所有 UI 状态通过参数传入或内部 state 管理2.3 Modifier 修饰符Modifier 用于配置 Composable 的布局、样式、交互Text(textHello,modifierModifier.fillMaxWidth()// 宽度撑满.padding(16.dp)// 内边距.clickable(onClick{}),// 可点击fontWeightFontWeight.Bold,colorMaterialTheme.colorScheme.primary,)常用 ModifierModifier作用fillMaxWidth()宽度撑满父布局padding(16.dp)设置内边距.clickable { }添加点击事件Modifier.size(48.dp)固定尺寸.clip(CircleShape)裁剪形状2.4 状态管理Compose 是响应式的当状态变化时 UI 自动重组。ComposablefunSearchBar(){varsearchTextbyremember{mutableStateOf()}OutlinedTextField(valuesearchText,onValueChange{searchTextit},// 状态更新 → 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(modifierModifier.padding(padding)){// ...}}常用 Material3 组件Scaffold— 页面脚手架提供 TopAppBar/BottomBar 等Card— 卡片容器Button/TextButton— 按钮OutlinedTextField— 输入框LazyColumn/LazyRow— 高性能列表替代 RecyclerViewCircularProgressIndicator— 加载中指示器2.6 列表渲染LazyColumn传统 RecyclerView 替代方案LazyColumn{items(itemsarticles,key{it.id},// 高效重组的关键){item-ArticleItem(titleitem.title,descriptionitem.description,onClick{onArticleClick(item)})}}优势无需 Adapter/ViewHolderkey 参数确保高效更新支持itemsIndexed获取索引2.7 预览功能Android Studio 支持 Preview 实时预览Preview(showBackgroundtrue,name文章条目)ComposablefunArticleItemPreview(){MyFirstComposeTheme{Surface(modifierModifier.fillMaxSize()){ArticleItem(titleJetpack Compose 入门,description学习声明式 UI 编程,thumbnailnull,onClick{},)}}}预览文件通常命名为XxxPagePreview.kt与页面分开存放。2.8 总结Compose 用 Kotlin 代码声明 UI无需 XML状态变化自动触发 UI 重组Modifier 配置组件属性链式调用LazyColumn 替代 RecyclerView更简洁Preview 支持实时预览加速开发上一章第一章项目概述与环境搭建 下一章第三章MVVM 架构与 ViewModel
