学习

Lab Week 3 Summary · Jimmy Huang's Blog

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

kotlin

@Composable
fun RememberName() {
    // 定义一个可被 Compose 观察的状态变量 name
    // 初始值是空字符串 ""
    // remember: 让这个值在界面重组时还能保留
    // mutableStateOf: 创建一个“可变状态”
    // by: 让我们后面可以直接把 name 当普通字符串来用
    var name by remember { mutableStateOf("") }

    // Column 表示把里面的组件“竖着排列”
    // padding(16.dp) 表示整个内容四周留 16dp 的内边距
    Column(modifier = Modifier.padding(16.dp)) {

        // Spacer 是一个“空白占位组件”
        // 这里用来在顶部留出 32dp 的空白，让界面不要太挤
        Spacer(modifier = Modifier.height(32.dp))

        // 如果 name 不是空字符串，就显示问候语
        // isNotEmpty() 的意思是“字符串不为空”
        if (name.isNotEmpty()) {
            Text(
                // 把用户输入的名字显示出来
                // 例如输入 Tom，这里就显示 Hello, Tom!
                text = "Hello, $name!",

                // 让这段文字和下面输入框之间留一点距离
                modifier = Modifier.padding(bottom = 16.dp),

                // 设置文字大小为 32sp
                fontSize = 32.sp
            )
        }

        // OutlinedTextField 是一个带边框的输入框
        OutlinedTextField(
            // 输入框当前显示的内容来自 name
            // 也就是说，输入框显示什么，由状态 name 决定
            value = name,

            // 当用户在输入框里输入新内容时，
            // it 就代表“最新输入的字符串”
            // 把它赋值给 name，状态一变，界面就会自动刷新
            onValueChange = { name = it },

            // 输入框上方的小标签文字
            label = { Text("Name") }
        )
    }
}

kotlin

setContent {
    TextFieldLabTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            RememberName()
        }
    }
}

kotlin

@Composable
fun RememberName() {
    var name = remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Spacer(modifier = Modifier.height(32.dp))

        if (name.value.isNotEmpty()) {
            Text(
                text = "Hello,${name.value}!",
                modifier = Modifier.padding(bottom = 16.dp),
                fontSize = 32.sp
            )
        }

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

kotlin

@Composable
fun RememberName() {
    var name = ""

    Column(modifier = Modifier.padding(16.dp)) {
        Spacer(modifier = Modifier.height(32.dp))

        if (name.isNotEmpty()) {
            Text(
                text = "Hello,$name!",
                modifier = Modifier.padding(bottom = 16.dp),
                fontSize = 32.sp
            )
        }

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

kotlin

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import kotlin.random.Random

kotlin

@Composable
fun RandomNumberGenerator() {

    // maxInput：保存输入框里的内容
    // 注意这里是字符串，不是 Int
    // 因为 TextField 里的内容本质上就是文字
    // 初始值设为 "10"，所以输入框默认会显示 10
    var maxInput by remember { mutableStateOf("10") }

    // result：保存随机生成出来的结果
    // Int? 表示它可以是整数，也可以是 null
    // 一开始还没点击按钮，所以先设为 null
    var result by remember { mutableStateOf<Int?>(null) }

    // Column：把里面的组件从上到下排列
    Column(
        // 整体四周留 16dp 空白
        modifier = Modifier.padding(16.dp),

        // 垂直方向尽量居中
        verticalArrangement = Arrangement.Center,

        // 水平方向居中
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        // 顶部加一块 40dp 的空白，让界面别太挤
        Spacer(modifier = Modifier.height(40.dp))

        // 带边框的输入框
        OutlinedTextField(
            // 输入框当前显示的内容来自 maxInput
            value = maxInput,

            // 当用户修改输入框内容时，把新内容保存回 maxInput
            // it 就是用户最新输入的字符串
            onValueChange = { maxInput = it },

            // 输入框标签
            label = { Text("Max") },

            // 提示系统尽量弹出数字键盘
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),

            // 输入框横向占满宽度
            modifier = Modifier.fillMaxWidth()
        )

        // 输入框和按钮之间留一点空白
        Spacer(modifier = Modifier.height(16.dp))

        // 按钮：点击后生成随机数
        Button(
            onClick = {
                // 先尝试把输入框字符串转成 Int
                // toIntOrNull()：转换失败不会报错，而是返回 null
                // ?.coerceAtLeast(1)：如果成功转成数字，就保证它至少为 1
                // ?: 10：如果前面是 null（例如空输入），就默认用 10
                val max = maxInput.toIntOrNull()?.coerceAtLeast(1) ?: 10

                // 生成 1 到 max 之间的随机整数
                // 注意 nextInt 的第二个参数是“上限但不包含”，所以要写 max + 1
                result = Random.nextInt(1, max + 1)
            },

            // 按钮横向占满宽度
            modifier = Modifier.fillMaxWidth()
        ) {
            // 按钮上的文字
            Text("Random Number")
        }

        // 按钮和结果文字之间留一点空白
        Spacer(modifier = Modifier.height(24.dp))

        // 显示结果
        Text(
            // 如果 result 不是 null，就显示数字
            // 如果还是 null（说明还没点按钮），就显示 "-"
            text = "Result: ${result ?: "-"}",

            // 使用较大的正文样式
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

kotlin

setContent {
    TextFieldLabTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            RandomNumberGenerator()
        }
    }
}

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import java.text.SimpleDateFormat
import java.util.Calendar
import java.util.Date
import java.util.Locale

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DisplayDatePicker() {

    // 获取当前日历对象，后面可以拿到“当前时间”的毫秒值
    val calendar = Calendar.getInstance()

    // 定义日期显示格式，例如 2025-01-15
    val formatter = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())

    // birthday：输入框里最终显示的生日文本
    // 例如 "DoB:2025-01-15"
    // 一开始先设为空字符串
    var birthday by remember { mutableStateOf("") }

    // showDatePicker：控制日期选择弹窗是否显示
    // false = 不显示
    // true = 显示
    var showDatePicker by remember { mutableStateOf(false) }

    // selectedDate：当前选中的日期，内部用毫秒值保存
    // 初始值先设成“当前时间”
    var selectedDate by remember { mutableStateOf(calendar.timeInMillis) }

    // DatePicker 自己需要的状态对象
    // initialSelectedDateMillis 表示一开始默认选中的日期
    val datePickerState = rememberDatePickerState(
        initialSelectedDateMillis = selectedDate
    )

    // Column：把组件从上到下排列
    Column(modifier = Modifier.padding(50.dp)) {

        // 显示生日的输入框
        TextField(
            // 输入框当前显示的内容由 birthday 决定
            value = birthday,

            // 这里不给用户手动输入，所以留空
            onValueChange = {},

            // 只读，不能直接编辑
            readOnly = true,

            // 输入框标签
            label = { Text("Birthday") },

            modifier = Modifier
                // 横向占满宽度
                .fillMaxWidth()

                // 点击输入框时，打开日期选择器
                .clickable { showDatePicker = true },

            // 输入框右边的图标
            trailingIcon = {
                Icon(
                    // 加载 drawable 里的日历图标资源
                    painter = painterResource(id = R.drawable.calendar_icon),

                    // 无障碍说明文字
                    contentDescription = "Select Date",

                    modifier = Modifier
                        // 点击图标也可以打开日期选择器
                        .clickable { showDatePicker = true }

                        // 设置图标大小
                        .size(40.dp)
                )
            }
        )

        // 只有当 showDatePicker 为 true 时，才显示日期选择弹窗
        if (showDatePicker) {
            DatePickerDialog(

                // 当用户用系统方式关闭弹窗时，也要把状态改回 false
                onDismissRequest = {
                    showDatePicker = false
                },

                // 确认按钮：点击 OK
                confirmButton = {
                    TextButton(
                        onClick = {
                            // 先关闭弹窗
                            showDatePicker = false

                            // 取出用户在 DatePicker 中选中的日期
                            // 如果为空，就继续保留原来的 selectedDate
                            selectedDate = datePickerState.selectedDateMillis ?: selectedDate

                            // 把选中的日期格式化成字符串，再显示到输入框里
                            birthday = "DoB:${formatter.format(Date(selectedDate))}"
                        }
                    ) {
                        Text("OK")
                    }
                },

                // 取消按钮：点击 Cancel
                dismissButton = {
                    TextButton(
                        onClick = {
                            // 只关闭弹窗，不修改生日内容
                            showDatePicker = false
                        }
                    ) {
                        Text("Cancel")
                    }
                }
            ) {
                // 真正的日期选择器内容
                DatePicker(state = datePickerState)
            }
        }
    }
}

Lab Week 3 Summary

Overview

Goal

Lab Week 3 Summary

Overview

Goal

Task 0: 新建项目与基础准备

Step 0.1：创建 Compose 项目

Step 0.2：确认 MainActivity.kt 可以正常运行

Step 0.3：确认后续主要修改位置

Task 1: 使用 TextField 实现 RememberName

Step 1.1：补齐本任务常用 import

Step 1.2：编写 RememberName() composable

Step 1.3：在 setContent {} 中调用 RememberName()

Step 1.4：理解这一步真正学到的东西

Task 2: 比较两种 MutableState 写法，并观察不用 state 的区别

Step 2.1：把 state 改成不用 by 的写法

Step 2.2：用 .value 修复所有报错

Step 2.3：故意改成普通变量，观察差异

实验问题回答

问题 1：把 var name by remember { mutableStateOf("") } 改成 var name = remember { mutableStateOf("") } 后，为什么会报错？怎么修？

问题 2：为什么把 state 改成普通变量后，输入框表现会不一样？

Task 3: 实现 RandomNumberGenerator

Step 3.1：准备本任务常用 import

Step 3.2：编写 RandomNumberGenerator() composable

Step 3.3：把 setContent {} 暂时切换成 RandomNumberGenerator()

Step 3.4：如果你想更贴近老师给的草稿思路

Task 4: Additional exercise — DatePicker

Step 4.1：先处理图标问题

Step 4.2：补齐本任务常用 import

Step 4.3：编写 DisplayDatePicker() composable

Step 4.4：切换 setContent {} 并测试两种输入方式

Summary

本周必须理解的知识点

1. remember {} 是干什么的

2. mutableStateOf() 是干什么的

3. 为什么两者通常要一起用

4. 什么是 recomposition

5. 为什么 TextField 特别适合拿来学 state

关键概念对比

remember {} vs mutableStateOf()

by 写法 vs .value 写法

普通变量 vs Compose state

常见报错与排查

1. getValue / setValue 报 unresolved reference

2. 改成不用 by 之后到处报错

3. TextField 报类型不匹配

4. 随机数生成器点击按钮后崩溃

5. calendar_icon 找不到

6. 选完日期后没有显示

老师可能会问什么

1. 为什么 Compose 里输入框一般要绑定 state？

2. 为什么 remember 很重要？

3. mutableStateOf() 为什么叫 observable state？

4. by 和 .value 到底是什么关系？

5. 为什么普通 var name = "" 不行？

可直接交作业的简短总结

Step 0.2：确认 `MainActivity.kt` 可以正常运行

Task 1: 使用 TextField 实现 `RememberName`

Step 1.2：编写 `RememberName()` composable

Step 1.3：在 `setContent {}` 中调用 `RememberName()`

Task 2: 比较两种 `MutableState` 写法，并观察不用 state 的区别

Step 2.1：把 state 改成不用 `by` 的写法

Step 2.2：用 `.value` 修复所有报错

问题 1：把 `var name by remember { mutableStateOf("") }` 改成 `var name = remember { mutableStateOf("") }` 后，为什么会报错？怎么修？

Task 3: 实现 `RandomNumberGenerator`

Step 3.2：编写 `RandomNumberGenerator()` composable

Step 3.3：把 `setContent {}` 暂时切换成 `RandomNumberGenerator()`

Task 4: Additional exercise — `DatePicker`

Step 4.3：编写 `DisplayDatePicker()` composable

Step 4.4：切换 `setContent {}` 并测试两种输入方式

1. `remember {}` 是干什么的

2. `mutableStateOf()` 是干什么的

5. 为什么 `TextField` 特别适合拿来学 state

`remember {}` vs `mutableStateOf()`

`by` 写法 vs `.value` 写法

1. `getValue` / `setValue` 报 unresolved reference

2. 改成不用 `by` 之后到处报错

3. `TextField` 报类型不匹配

5. `calendar_icon` 找不到

2. 为什么 `remember` 很重要？

3. `mutableStateOf()` 为什么叫 observable state？

4. `by` 和 `.value` 到底是什么关系？

5. 为什么普通 `var name = ""` 不行？