学习

Seminar Week 3 Summary · Jimmy Huang's Blog

维度	命令式 UI（Imperative UI）	声明式 UI（Declarative UI）
核心思路	一步步告诉系统怎么更新	直接描述当前状态下 UI 应该长什么样
更新方式	手动控制刷新	状态变化后自动更新
代码特点	更新逻辑分散、维护成本更高	结构更集中，状态和界面关系更清晰
开发重心	过程	结果

阶段	含义
组合（Composition）	决定界面由哪些 composable 组成
布局（Layout）	测量组件尺寸并决定摆放位置
绘制（Draw）	把内容真正画到屏幕上

写法	本质	读写方式	特点
`val state = remember { mutableStateOf(...) }`	拿到的是状态对象	通过 `.value` 读写	更直接看出它是状态对象，但写起来更啰嗦
`var value by remember { mutableStateOf(...) }`	使用委托（delegate）	直接像普通变量一样读写	更自然、更常见
`val (value, setValue) = ...`	解构状态	分开取值和设值	合法，但相对少见

方案	跨重组	跨配置变化	适合场景
`remember`	可以	不可以	纯 Compose 内部、生命周期较短的本地状态
`rememberSaveable`	可以	可以	需要在重建后恢复的简单 UI 状态
`ViewModel`	可以	可以	页面级状态、与业务逻辑结合、多人协作时更清晰的状态管理

组件	作用
`LazyColumn`	纵向列表
`LazyRow`	横向列表
`LazyVerticalGrid`	纵向网格
`LazyHorizontalGrid`	横向网格

易混点	正确认识
普通变量改了，为什么 UI 没变？	因为它不是 Compose 可观察的状态
`remember` 和 `mutableStateOf()` 一样吗？	不一样；前者负责记住，后者负责可观察
为什么有时要写 `.value`？	因为变量拿到的是 `MutableState<T>`，不是直接的值
为什么 `by` 之后不用 `.value`？	因为委托机制把取值/设值细节包装掉了
为什么改对象字段不一定触发更新？	Compose 更关注对象引用是否变化
为什么列表改了但界面不刷新？	应优先使用 `mutableStateListOf()` 这类可观察列表状态
`remember` 和 `rememberSaveable` 最关键的差别是什么？	后者还能跨配置变化恢复状态

kotlin

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

var name by remember { mutableStateOf("") }

OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") }
)

kotlin

@Composable
fun CountryListDisplay() {
    val countries = remember {
        mutableStateListOf("USA", "Canada", "Australia")
    }

    LazyColumn {
        items(countries.size) { index ->
            Text(
                text = countries[index],
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

kotlin

// 用来保存“当前选中的国家”
// remember：重组时记住这个值，不要每次刷新都重置
// mutableStateOf("")：创建一个可变状态，初始值是空字符串
// by：让 selectedCountry 用起来像普通变量一样
var selectedCountry by remember { mutableStateOf("") }

// LazyColumn：竖直方向的懒加载列表，适合显示很多条数据
LazyColumn {
    // 根据 countries 的数量生成列表项
    // index 表示当前是第几个元素
    items(countries.size) { index ->

        // Row：每一项用一行来显示
        Row(
            modifier = Modifier
                .fillMaxWidth() // 让这一行占满宽度，整行都更容易点击
                .padding(8.dp)  // 给这一行四周加一点空白，不要太挤
                .clickable {
                    // 点击这一行时，把 selectedCountry 改成当前这项国家名
                    selectedCountry = countries[index]
                }
        ) {
            // 显示当前这一项国家的名字
            Text(
                text = countries[index],
                modifier = Modifier.weight(1f) // 让 Text 在这一行中占据可分配空间
            )
        }
    }
}

kotlin

var country by remember { mutableStateOf("") }

OutlinedTextField(
    value = country,
    onValueChange = { country = it },
    label = { Text("Country") }
)

Button(onClick = {
    if (country.isNotEmpty()) {
        countries.add(country)
        country = ""
    }
}) {
    Text("Add")
}

Seminar Week 3 Summary

本周在课程中的位置

Jetpack Compose 与声明式 UI（Declarative UI）

什么是声明式 UI

可以这样理解

为什么这种方式重要

Seminar Week 3 Summary

本周在课程中的位置

Jetpack Compose 与声明式 UI（Declarative UI）

什么是声明式 UI

可以这样理解

为什么这种方式重要

核心公式

Recomposition（重组）

什么是重组

为什么它高效

与上周内容的关系

什么会触发重组

复习抓手

State（状态）与 MutableState（可变状态）

关键前提：Compose 不会自动观察所有变量

MutableState 是什么

remember 与 mutableStateOf 的分工

可以这样理解

一个很容易忽略的点

三种常见声明方式

三种写法对比

Option 1：为什么要写 .value

Option 2：为什么更常用

val 和 var 在这里怎么理解

Lambda 中的 it

对象类型状态：为什么“改字段”不一定会刷新

核心结论

典型问题

更推荐的更新方式

复习要点

rememberSaveable 与 ViewModel

remember 的边界

rememberSaveable 的作用

ViewModel 的定位

三者对比

课件给出的补充区别

课堂补充：状态提升（State Hoisting）

这部分不是本页主线，但老师在课堂视频中额外强调

为什么这么做

一个记忆句

Lazy Lists（惰性列表）

为什么需要 Lazy Lists

“Lazy” 的真正含义

主要组件

为什么 LazyColumn 更常见

LazyColumn 的写法与思路

DSL（领域特定语言）风格

item {} 和 items {} 的区别

列表渲染的基本例子

mutableStateListOf()：为什么列表要单独处理

作用

为什么它重要

可以这样理解

LazyColumn 的 4 类典型交互

1. 显示列表

2. 选择某一项

3. 删除某一项

4. 新增某一项

本周最容易混淆的点

复习建议

Summary

Option 1：为什么要写 `.value`

`val` 和 `var` 在这里怎么理解

Lambda 中的 `it`

为什么 `LazyColumn` 更常见

`item {}` 和 `items {}` 的区别