Compose 基础与重组：从 View 命令式到声明式 UI

文章目录第 1 章 声明式 UI踩坑第 2 章 Composable 与 Preview第 3 章 重组何时重画原理补充第 4 章 Modifier 链第 5 章 Scaffold 与 Material3 壳第 6 章 迁移边界第 7 章 治理清单面试速查 · 追问链追问链 #1重组是什么 追问链 #2Composable 能调几次 追问链 #3Modifier 顺序 ⭐追问链 #4Compose 能混 XML 吗 完整链路一句通相关推荐第 1 章 声明式 UIView 时代findViewByIdsetText命令式改界面。Compose用函数描述当前状态对应的 UI状态变则重新执行 Composable重组。ComposablefunGreeting(name:String){Text(text你好$name)}状态变 → 调用Greeting→ 框架 diff 更新节点。与 React/SwiftUI 同族。踩坑在 Composable 里做网络请求——应 LaunchedEffect ViewModel《Compose 状态》。第 2 章 Composable 与 PreviewComposablefunCounter(count:Int,onInc:()-Unit){Column{Text(计数$count)Button(onClickonInc){Text(1)}}}Preview(showBackgroundtrue)ComposableprivatefunCounterPreview(){MaterialTheme{Counter(0,{})}}Composable 可多次调用、可条件分支无副作用是目标副作用交给 Effect。第 3 章 重组何时重画重组范围尽量小把变化部分拆成子 Composable传入稳定参数。ComposablefunUserRow(user:User){// user 不变则可能跳过Text(user.name)}remember缓存计算《Compose 状态》。避免在列表items里创建不稳定 lambda 导致全列表重组。原理补充编译器为 Composable 生成Group/Slot框架按 slot 比较参数是否变化。第 4 章 Modifier 链Text(标题,modifierModifier.fillMaxWidth().padding(16.dp).clickable{onClick()},)顺序重要先padding再background与反过来视觉效果不同。布局、绘制、语义修饰符分层。第 5 章 Scaffold 与 Material3 壳ComposablefunTodoApp(){MaterialTheme{Scaffold(topBar{TopAppBar(title{Text(待办)})},floatingActionButton{FloatingActionButton(onClickonAdd){Icon(Icons.Default.Add,null)}},){innerPadding-TodoList(modifierModifier.padding(innerPadding))}}}新 Activity 应enableEdgeToEdge() 处理WindowInsets《Material3 与动态主题》。第 6 章 迁移边界遗留现代XML 新页面Compose 新功能RecyclerView 新列表LazyColumnfindViewById状态驱动ComposeView 嵌入 XML 可混排过渡长期目标单 Activity Nav Compose。第 7 章 治理清单检查项通过标准状态状态提升Composable 无业务可变全局副作用不在 Composable 体直接 IO性能列表 key、稳定参数、避免匿名 lambda 滥用主题MaterialTheme 包裹预览关键屏有 Preview面试速查 · 追问链追问链 #1重组是什么 参考回答状态变化后重新执行 Composable框架按 slot 比较尽量局部更新不是整页 invalidate。追问链 #2Composable 能调几次 参考回答任意次必须幂等、无副作用副作用放 Effect。追问链 #3Modifier 顺序 ⭐参考回答从外到内应用padding/background/clickable 顺序影响布局与点击区域。追问链 #4Compose 能混 XML 吗 参考回答能ComposeView/AndroidView 桥接新功能优先纯 Compose。完整链路一句通状态驱动 Composable→Modifier 塑形→MaterialTheme/Scaffold 搭壳→局部重组保性能→副作用交 ViewModel/Effect。相关推荐Kotlin 作用域函数let/apply 怎么选Kotlin 语法与空安全从零的第一课