Kotlin + Jetpack Compose 从零开发 Android 日记 App 完整入门教程#

前言#

本文面向掌握 Kotlin 基础、零基础 Android 开发的编程学习者，将手把手带你从零搭建一款完整的 Android 本地日记 App。

全程采用目前 Google 官方推荐的最新技术栈：Kotlin + Jetpack Compose 全声明式UI + Room本地数据库 + MVVM架构 + Hilt依赖注入 + Coroutines协程。

文章内容极致详细，涵盖项目搭建、技术原理、分层架构、核心代码逐行实现、知识点讲解、项目运行与拓展优化，零基础可跟着复刻，完成后你将掌握现代 Android 主流开发范式，具备独立开发小型本地存储类 App 的能力。

一、项目背景与功能介绍#

1.1 项目背景#

在 Android 开发学习路径中，本地数据存储 + 页面增删改查是最核心、最基础的必备技能。日记 App 是 Android 入门最优实战项目之一，业务逻辑简单、功能闭环，完美贴合新手学习需求。

传统 Android 开发依赖 XML 布局、繁琐的生命周期管理，学习成本极高。而本项目采用 Jetpack Compose 声明式UI，抛弃XML，纯Kotlin代码编写界面，代码更简洁、逻辑更清晰，适配现代安卓开发规范。

同时结合官方组件完成数据持久化、异步处理、架构解耦，让项目规范、可拓展、企业级标准化，而非野路子demo。

1.2 核心功能#

本日记App实现完整的闭环业务功能，所有数据本地离线存储，无需网络：

日记新增：用户输入标题、正文、自动记录创建时间，保存本地数据库
日记查询：首页展示所有日记列表，按时间倒序排列（最新日记置顶）
日记修改：点击已有日记，进入编辑页面修改内容并更新数据
日记删除：支持单条日记删除操作
实时刷新：数据增删改后，页面自动刷新，无需手动刷新
状态管理：页面加载、数据为空等状态友好展示

1.3 项目学习价值#

掌握 MVVM 分层架构核心思想，彻底告别代码耦合
精通 Room 数据库本地持久化存储（安卓首选本地数据库框架）
熟练使用 Jetpack Compose 开发完整页面
理解 Kotlin 协程 & Flow 数据流异步数据处理机制
掌握 Hilt 依赖注入，实现组件解耦、统一管理依赖

二、全套技术栈选型详解#

本项目全部采用 Google 官方推荐 Jetpack 组件，无第三方冗余框架，是目前 Android 原生开发标准企业级技术栈。

2.1 核心技术清单#

Kotlin：Android 官方首选开发语言，空安全、高阶函数、协程原生支持
Jetpack Compose：新一代声明式UI框架，纯代码构建界面，替代传统XML
Room Database：安卓官方ORM本地数据库，基于SQLite封装，简化数据库操作
MVVM 架构：Model-View-ViewModel，实现视图与数据逻辑解耦
Hilt：Google官方依赖注入框架，自动管理所有组件依赖
Kotlin Coroutines 协程：轻量级异步任务处理，替代Handler、AsyncTask
Kotlin Flow 数据流：响应式数据流，监听数据库数据实时变化
Jetpack Lifecycle：生命周期感知组件，杜绝内存泄漏

2.2 技术选型详细说明#

2.2.1 放弃传统XML，选用Jetpack Compose#

传统Android XML布局存在布局嵌套冗余、代码分离、适配繁琐等问题。Jetpack Compose 采用声明式编程，UI随数据自动刷新，代码量减少60%以上，逻辑统一，新手更容易理解。

2.2.2 选用Room替代原生SQLite#

原生SQLite需要手写SQL语句、操作游标、处理数据映射，极易出错。Room对SQLite进行高度封装，通过注解自动生成数据库代码，支持对象化操作、异步协程、数据流监听，是本地存储最优方案。

2.2.3 MVVM架构（核心解耦）#

摒弃传统MVC架构的代码混乱问题：

View（视图层）：只负责UI展示，无任何业务逻辑
ViewModel（视图模型层）：承载业务逻辑、状态管理，生命周期独立于View
Model（数据层）：包含实体类、数据库、仓库，只负责数据存取

三层完全解耦，便于维护、测试、迭代拓展。

2.2.4 Hilt依赖注入#

手动创建对象会导致代码冗余、耦合严重。Hilt自动依赖注入，统一管理所有数据库、仓库、ViewModel对象实例，极简代码，符合工程化规范。

2.2.5 协程+Flow异步数据流#

协程解决Android主线程阻塞问题，所有数据库读写均在子线程完成； Flow实现数据订阅，数据库数据发生变化时，自动推送最新数据到UI，实现页面无感刷新。

三、项目整体结构详解#

3.1 标准化分层结构#

本项目严格按照 MVVM + 分层架构 划分目录，每一层职责单一，新手必须熟记分层思想：

entity（实体层）：定义数据库表结构，对应日记实体类
dao（数据访问层）：定义数据库增删改查抽象方法
database（数据库核心层）：Room数据库初始化、单例配置
repository（仓库层）：统一封装数据操作，对接数据库，提供数据接口给ViewModel
viewmodel（视图模型层）：管理UI状态、调用仓库层业务方法
ui（视图层）：Compose所有页面UI布局、组件展示
di（依赖注入层）：Hilt依赖配置，管理全局对象
util（工具层）：通用工具类、时间格式化、常量类

3.2 完整项目目录预览#

1
com.example.diary/
2
├── di/                  // 依赖注入配置
3
│   └── AppModule.kt
4
├── entity/              // 数据库实体类
5
│   └── Diary.kt
6
├── dao/                 // 数据库操作接口
7
│   └── DiaryDao.kt
8
├── database/            // 数据库初始化
9
│   └── DiaryDatabase.kt
10
├── repository/          // 数据仓库
11
│   └── DiaryRepository.kt
12
├── viewmodel/           // 视图模型&状态
13
│   ├── DiaryUiState.kt
14
│   └── DiaryViewModel.kt
15
├── ui/                  // 所有UI页面
16
│   ├── DiaryListPage.kt
17
│   └── DiaryEditPage.kt
18
├── util/                // 工具类
19
│   └── DateUtil.kt
20
└── DiaryApp.kt          // 项目入口Application

3.3 各层级核心职责#

实体层：映射数据库数据表，定义字段、主键、约束
DAO层：定义所有数据库操作的抽象方法，Room自动实现
数据库层：创建数据库实例、绑定DAO、数据库版本管理
仓库层：中转层，隔离ViewModel和数据库，统一数据入口
ViewModel层：接收UI操作，调用仓库方法，保存UI状态
UI层：监听ViewModel状态变化，渲染页面，触发用户操作

四、项目环境初始化配置#

4.1 新建Android项目#

打开Android Studio，选择「New Project」
模板选择「Empty Compose Activity」
语言选择 Kotlin，最小SDK版本选择 Android 24（Android 7.0）
完成项目创建

4.2 全局依赖配置（build.gradle）#

项目需要手动引入Room、Hilt、协程核心依赖，替换项目根目录及模块gradle配置。

4.2.1 项目根目录 build.gradle#

1
plugins {
2
    id 'com.android.application' version '8.2.0' apply false
3
    id 'org.jetbrains.kotlin.android' version '1.9.0' apply false
4
    // Hilt 插件
5
    id 'com.google.dagger.hilt.android' version '2.48' apply false
6
}

4.2.2 模块目录 build.gradle（核心依赖）#

1
plugins {
2
    id 'com.android.application'
3
    id 'org.jetbrains.kotlin.android'
4
    id 'kotlin-kapt'
5
    id 'com.google.dagger.hilt.android'
6
}
7

8
android {
9
    namespace "com.example.diary"
10
    compileSdk 34
11

12
    defaultConfig {
13
        applicationId "com.example.diary"
14
        minSdk 24
15
        targetSdk 34
16
        versionCode 1
17
        versionName "1.0"
18

19
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
20
        vectorDrawables {
21
            useSupportLibrary true
22
        }
23
    }
24

25
    buildTypes {
26
        release {
27
            minifyEnabled false
28
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
29
        }
30
    }
31
    compileOptions {
32
        sourceCompatibility JavaVersion.VERSION_17
33
        targetCompatibility JavaVersion.VERSION_17
34
    }
35
    kotlinOptions {
36
        jvmTarget = '17'
37
    }
38
    buildFeatures {
39
        compose true
40
    }
41
    composeOptions {
42
        kotlinCompilerExtensionVersion "1.5.3"
43
    }
44
    packaging {
45
        resources {
46
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
47
        }
48
    }
49
}
50

51
dependencies {
52
    // 基础Compose依赖
53
    implementation 'androidx.core:core-ktx:1.12.0'
54
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.2'
55
    implementation 'androidx.activity:activity-compose:1.8.2'
56
    implementation platform('androidx.compose:compose-bom:2023.10.01')
57
    implementation 'androidx.compose.ui:ui'
58
    implementation 'androidx.compose.ui:ui-graphics'
59
    implementation 'androidx.compose.ui:ui-tooling-preview'
60
    implementation 'androidx.compose.material3:material3'
61

62
    // Room 数据库核心依赖
63
    implementation 'androidx.room:room-runtime:2.6.1'
64
    kapt 'androidx.room:room-compiler:2.6.1'
65
    // Room 协程、Flow 支持
66
    implementation 'androidx.room:room-ktx:2.6.1'
67

68
    // Hilt 依赖注入
69
    implementation 'com.google.dagger:hilt-android:2.48'
70
    kapt 'com.google.dagger:hilt-android-compiler:2.48'
71
    implementation 'androidx.hilt:hilt-navigation-compose:1.1.0'
72

73
    // 协程核心依赖
74
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3'
75

76
    // 测试依赖
77
    testImplementation 'junit:junit:4.13.2'
78
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
79
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
80
    androidTestImplementation platform('androidx.compose:compose-bom:2023.10.01')
81
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
82
    debugImplementation 'androidx.compose.ui:ui-tooling'
83
    debugImplementation 'androidx.compose.ui:ui-test-manifest'
84
}

配置完成后点击 Sync Now 同步所有依赖，等待依赖下载完成。

五、核心代码逐层实现（带超详细注释）#

5.1 项目入口配置（Hilt初始化）#

新建 DiaryApp.kt 项目入口文件，Hilt必须通过Application类初始化。

1
package com.example.diary
2

3
import android.app.Application
4
import dagger.hilt.android.HiltAndroidApp
5

6
/**
7
 * 项目全局入口类
8
 * Hilt 依赖注入初始化必须注解
9
 * 所有组件依赖自动托管
10
 */
11
@HiltAndroidApp
12
class DiaryApp : Application()

同时打开 AndroidManifest.xml，绑定Application：

1
<application
2
    android:name=".DiaryApp"
3
</application>

5.2 工具类：时间格式化工具#

新建 util/DateUtil.kt，统一处理日记时间展示格式

1
package com.example.diary.util
2

3
import java.text.SimpleDateFormat
4
import java.util.Date
5
import java.util.Locale
6

7
/**
8
 * 时间工具类
9
 * 用于日记创建时间格式化展示
10
 */
11
object DateUtil {
12

13
    // 定义统一时间格式：年-月-日 时:分
14
    private val sdf = SimpleDateFormat("yyyy-MM-dd HH:mm", Locale.CHINA)
15

16
    /**
17
     * 获取当前系统时间
18
     */
19
    fun getCurrentTime(): String {
20
        return sdf.format(Date())
21
    }
22
}

5.3 第一层：数据库实体类 Entity（Diary）#

新建 entity/Diary.kt，定义日记数据表结构，一个实体类对应一张数据库表

1
package com.example.diary.entity
2

3
import androidx.room.Entity
4
import androidx.room.PrimaryKey
5

6
/**
7
 * 日记实体类
8
 * Room 数据表映射类
9
 * tableName = "diary" 定义数据库表名
10
 */
11
@Entity(tableName = "diary")
12
data class Diary(
13
    // 主键，自增id，唯一标识单条日记
14
    @PrimaryKey(autoGenerate = true)
15
    val id: Long = 0,
16

17
    // 日记标题
18
    val title: String,
19

20
    // 日记正文内容
21
    val content: String,
22

23
    // 日记创建时间
24
    val createTime: String
25
)

核心知识点：

@Entity：Room注解，标识该类为数据库表
@PrimaryKey(autoGenerate = true)：主键自增，无需手动赋值
所有字段自动映射为数据库列

5.4 第二层：DAO数据访问接口#

新建 dao/DiaryDao.kt，定义数据库增删改查抽象方法，Room自动生成实现类

1
package com.example.diary.dao
2

3
import androidx.room.Dao
4
import androidx.room.Delete
5
import androidx.room.Insert
6
import androidx.room.Query
7
import androidx.room.Update
8
import com.example.diary.entity.Diary
9
import kotlinx.coroutines.flow.Flow
10

11
/**
12
 * 数据库数据访问接口
13
 * 所有数据库操作方法定义在这里
14
 */
15
@Dao
16
interface DiaryDao {
17

18
    /**
19
     * 新增日记
20
     * suspend：协程挂起函数，自动在子线程执行
21
     */
22
    @Insert
23
    suspend fun insertDiary(diary: Diary)
24

25
    /**
26
     * 更新日记
27
     * 根据主键id匹配更新整条数据
28
     */
29
    @Update
30
    suspend fun updateDiary(diary: Diary)
31

32
    /**
33
     * 删除单条日记
34
     */
35
    @Delete
36
    suspend fun deleteDiary(diary: Diary)
37

38
    /**
39
     * 查询所有日记
40
     * Flow<Diary>> 数据流形式
41
     * 数据库数据变化时自动回调最新数据，实现页面自动刷新
42
     * ORDER BY id DESC 按id倒序，最新日记在最顶部
43
     */
44
    @Query("SELECT * FROM diary ORDER BY id DESC")
45
    fun getAllDiary<Diary>>
46
}

核心知识点：

@Dao：标识为数据访问接口
suspend：协程挂起函数，所有数据库读写必须在子线程，避免主线程阻塞崩溃
Flow：响应式数据流，永久监听数据表变化，无需手动刷新

5.5 第三层：Room数据库初始化#

新建 database/DiaryDatabase.kt，全局唯一数据库实例

1
package com.example.diary.database
2

3
import androidx.room.Database
4
import androidx.room.RoomDatabase
5
import com.example.diary.dao.DiaryDao
6
import com.example.diary.entity.Diary
7

8
/**
9
 * Room数据库核心类
10
 * entities：绑定所有数据表实体类
11
 * version：数据库版本号
12
 * exportSchema：关闭数据库日志导出
13
 */
14
@Database(entities = [Diary::class], version = 1, exportSchema = false)
15
abstract class DiaryDatabase : RoomDatabase() {
16

17
    // 暴露DAO操作接口
18
    abstract fun diaryDao(): DiaryDao
19
}

5.6 第四层：Hilt依赖注入模块#

新建 di/AppModule.kt，提供数据库单例对象，全局依赖注入

1
package com.example.diary.di
2

3
import android.content.Context
4
import androidx.room.Room
5
import com.example.diary.database.DiaryDatabase
6
import dagger.Module
7
import dagger.Provides
8
import dagger.hilt.InstallIn
9
import dagger.hilt.android.qualifiers.ApplicationContext
10
import dagger.hilt.components.SingletonComponent
11
import javax.inject.Singleton
12

13
/**
14
 * Hilt 依赖注入模块
15
 * 提供全局单例对象
16
 */
17
@Module
18
@InstallIn(SingletonComponent::class)
19
object AppModule {
20

21
    /**
22
     * 提供全局唯一Room数据库实例
23
     */
24
    @Provides
25
    @Singleton
26
    fun provideDiaryDatabase(@ApplicationContext context: Context): DiaryDatabase {
27
        return Room.databaseBuilder(
28
            context,
29
            DiaryDatabase::class.java,
30
            "diary_database" // 数据库文件名
31
        ).build()
32
    }
33

34
    /**
35
     * 提供DAO实例
36
     */
37
    @Provides
38
    fun provideDiaryDao(database: DiaryDatabase) = database.diaryDao()
39
}

5.7 第五层：Repository数据仓库#

新建 repository/DiaryRepository.kt，ViewModel唯一数据入口，隔离视图与数据库

1
package com.example.diary.repository
2

3
import com.example.diary.dao.DiaryDao
4
import com.example.diary.entity.Diary
5
import kotlinx.coroutines.flow.Flow
6
import javax.inject.Inject
7

8
/**
9
 * 数据仓库层
10
 * 所有数据操作统一中转
11
 * ViewModel 只调用仓库方法，不直接操作数据库
12
 */
13
class DiaryRepository @Inject constructor(
14
    private val diaryDao: DiaryDao
15
) {
16
    // 注入DAO对象，由Hilt自动实例化
17

18
    /**
19
     * 新增日记
20
     */
21
    suspend fun insertDiary(diary: Diary) {
22
        diaryDao.insertDiary(diary)
23
    }
24

25
    /**
26
     * 更新日记
27
     */
28
    suspend fun updateDiary(diary: Diary) {
29
        diaryDao.updateDiary(diary)
30
    }
31

32
    /**
33
     * 删除日记
34
     */
35
    suspend fun deleteDiary(diary: Diary) {
36
        diaryDao.deleteDiary(diary)
37
    }
38

39
    /**
40
     * 获取所有日记数据流
41
     */
42
    fun getAllDiaryList(): Flow<Diary>> = diaryDao.getAllDiary()
43
}

分层核心意义：后续如果更换数据源（本地/网络），只需修改仓库层，无需改动UI和ViewModel。

5.8 第六层：UI状态管理#

新建 viewmodel/DiaryUiState.kt，统一管理页面所有状态

1
package com.example.diary.viewmodel
2

3
import com.example.diary.entity.Diary
4

5
/**
6
 * 页面UI状态密封类
7
 * 统一管理页面数据状态
8
 */
9
data class DiaryUiState(
10
    // 日记列表数据
11
    val<Diary> = emptyList(),
12
    // 当前编辑的日记标题
13
    val currentTitle: String = "",
14
    // 当前编辑的日记内容
15
    val currentContent: String = "",
16
    // 当前编辑的日记实体（区分新增/编辑）
17
    val currentDiary: Diary? = null
18
)

5.9 第七层：ViewModel业务逻辑层#

新建 viewmodel/DiaryViewModel.kt，承载所有业务逻辑、状态更新、异步请求

1
package com.example.diary.viewmodel
2

3
import androidx.lifecycle.ViewModel
4
import androidx.lifecycle.viewModelScope
5
import com.example.diary.entity.Diary
6
import com.example.diary.repository.DiaryRepository
7
import com.example.diary.util.DateUtil
8
import dagger.hilt.android.lifecycle.HiltViewModel
9
import kotlinx.coroutines.flow.MutableStateFlow
10
import kotlinx.coroutines.flow.StateFlow
11
import kotlinx.coroutines.flow.asStateFlow
12
import kotlinx.coroutines.flow.collect
13
import kotlinx.coroutines.flow.update
14
import kotlinx.coroutines.launch
15
import javax.inject.Inject
16

17
/**
18
 * 日记视图模型
19
 * 所有业务逻辑、状态管理、异步操作在这里实现
20
 */
21
@HiltViewModel
22
class DiaryViewModel @Inject constructor(
23
    private val repository: DiaryRepository
24
) : ViewModel() {
25

26
    // 可变UI状态
27
    private val _uiState = MutableStateFlow(DiaryUiState())
28
    // 只读UI状态，暴露给UI层使用
29
    val uiState<DiaryUiState> = _uiState.asStateFlow()
30

31
    init {
32
        // 初始化：监听数据库日记列表数据变化
33
        observeDiaryList()
34
    }
35

36
    /**
37
     * 监听日记列表数据流，实时更新UI状态
38
     */
39
    private fun observeDiaryList() {
40
        viewModelScope.launch {
41
            repository.getAllDiaryList().collect { list ->
42
                // 更新状态，刷新页面列表
43
                _uiState.update {
44
                    it.copy(diaryList = list)
45
                }
46
            }
47
        }
48
    }
49

50
    /**
51
     * 更新输入的标题
52
     */
53
    fun updateTitle(title: String) {
54
        _uiState.update {
55
            it.copy(currentTitle = title)
56
        }
57
    }
58

59
    /**
60
     * 更新输入的正文
61
     */
62
    fun updateContent(content: String) {
63
        _uiState.update {
64
            it.copy(currentContent = content)
65
        }
66
    }
67

68
    /**
69
     * 保存日记（新增/更新）
70
     */
71
    fun saveDiary() {
72
        val title = uiState.value.currentTitle
73
        val content = uiState.value.currentContent
74
        // 简单非空校验
75
        if (title.isBlank() || content.isBlank()) return
76

77
        viewModelScope.launch {
78
            val currentDiary = uiState.value.currentDiary
79
            if (currentDiary == null) {
80
                // 新增日记
81
                val diary = Diary(
82
                    title = title,
83
                    content = content,
84
                    createTime = DateUtil.getCurrentTime()
85
                )
86
                repository.insertDiary(diary)
87
            } else {
88
                // 更新已有日记
89
                val updateDiary = currentDiary.copy(
90
                    title = title,
91
                    content = content
92
                )
93
                repository.updateDiary(updateDiary)
94
            }
95
        }
96
        // 保存后清空输入框
97
        clearInput()
98
    }
99

100
    /**
101
     * 删除单条日记
102
     */
103
    fun deleteDiary(diary: Diary) {
104
        viewModelScope.launch {
105
            repository.deleteDiary(diary)
106
        }
107
    }
108

109
    /**
110
     * 进入编辑页面，回填日记数据
111
     */
112
    fun editDiary(diary: Diary) {
113
        _uiState.update {
114
            it.copy(
115
                currentDiary = diary,
116
                currentTitle = diary.title,
117
                currentContent = diary.content
118
            )
119
        }
120
    }
121

122
    /**
123
     * 清空输入框，重置编辑状态
124
     */
125
    fun clearInput() {
126
        _uiState.update {
127
            it.copy(
128
                currentTitle = "",
129
                currentContent = "",
130
                currentDiary = null
131
            )
132
        }
133
    }
134
}

5.10 第八层：Compose UI界面实现#

5.10.1 日记列表页面#

新建 ui/DiaryListPage.kt，首页日记展示、删除、跳转编辑

1
package com.example.diary.ui
2

3
import androidx.compose.foundation.layout.Arrangement
4
import androidx.compose.foundation.layout.Column
5
import androidx.compose.foundation.layout.fillMaxSize
6
import androidx.compose.foundation.layout.fillMaxWidth
7
import androidx.compose.foundation.layout.padding
8
import androidx.compose.foundation.lazy.LazyColumn
9
import androidx.compose.foundation.lazy.items
10
import androidx.compose.material3.Card
11
import androidx.compose.material3.CardDefaults
12
import androidx.compose.material3.FloatingActionButton
13
import androidx.compose.material3.Icon
14
import androidx.compose.material3.MaterialTheme
15
import androidx.compose.material3.Scaffold
16
import androidx.compose.material3.Text
17
import androidx.compose.runtime.Composable
18
import androidx.compose.runtime.collectAsStateWithLifecycle
19
import androidx.compose.ui.Modifier
20
import androidx.compose.ui.res.painterResource
21
import androidx.compose.ui.unit.dp
22
import com.example.diary.R
23
import com.example.diary.entity.Diary
24
import com.example.diary.viewmodel.DiaryViewModel
25

26
/**
27
 * 日记列表首页
28
 */
29
@Composable
30
fun DiaryListPage(
31
    viewModel: DiaryViewModel,
32
    onAddClick: () -> Unit,
33
    onItemClick: () -> Unit
34
) {
35
    // 监听UI状态，生命周期安全订阅
36
    val uiState = viewModel.uiState.collectAsStateWithLifecycle().value
37

38
    Scaffold(
39
        floatingActionButton = {
40
            // 新增日记悬浮按钮
41
            FloatingActionButton(onClick = onAddClick) {
42
                Icon(
43
                    painter = painterResource(id = R.drawable.ic_add),
44
                    contentDescription = "新增日记"
45
                )
46
            }
47
        }
48
    ) { padding ->
49
        Column(
50
            modifier = Modifier
51
                .fillMaxSize()
52
                .padding(padding)
53
                .padding(16.dp)
54
        ) {
55
            Text(
56
                text = "我的日记",
57
                style = MaterialTheme.typography.headlineMedium,
58
                modifier = Modifier.padding(bottom = 20.dp)
59
            )
60

61
            // 空数据提示
62
            if (uiState.diaryList.isEmpty()) {
63
                Column(
64
                    modifier = Modifier.fillMaxSize(),
65
                    horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
66
                    verticalArrangement = Arrangement.Center
67
                ) {
68
                    Text(text = "暂无日记，点击右下角新增吧~")
69
                }
70
            } else {
71
                // 日记列表懒加载
72
                LazyColumn {
73
                    items(uiState.diaryList) { diary ->
74
                        DiaryItem(
75
                            diary = diary,
76
                            onItemClick = {
77
                                viewModel.editDiary(diary)
78
                                onItemClick()
79
                            },
80
                            onDeleteClick = {
81
                                viewModel.deleteDiary(diary)
82
                            }
83
                        )
84
                    }
85
                }
86
            }
87
        }
88
    }
89
}
90

91
/**
92
 * 单条日记Item组件
93
 */
94
@Composable
95
fun DiaryItem(
96
    diary: Diary,
97
    onItemClick: () -> Unit,
98
    onDeleteClick: () -> Unit
99
) {
100
    Card(
101
        modifier = Modifier
102
            .fillMaxWidth()
103
            .padding(vertical = 8.dp),
104
        elevation = CardDefaults.cardElevation(4.dp),
105
        onClick = onItemClick
106
    ) {
107
        Column(
108
            modifier = Modifier.padding(16.dp)
109
        ) {
110
            // 日记标题
111
            Text(
112
                text = diary.title,
113
                style = MaterialTheme.typography.titleLarge,
114
                modifier = Modifier.padding(bottom = 8.dp)
115
            )
116
            // 日记内容（截取前50字预览）
117
            Text(
118
                text = if (diary.content.length > 50) diary.content.take(50) + "..." else diary.content,
119
                style = MaterialTheme.typography.bodyMedium,
120
                color = MaterialTheme.colorScheme.onSurfaceVariant
121
            )
122
            // 时间+删除按钮行
123
            androidx.compose.foundation.layout.Row(
124
                modifier = Modifier
125
                    .fillMaxWidth()
126
                    .padding(top = 12.dp),
127
                horizontalArrangement = Arrangement.SpaceBetween
128
            ) {
129
                Text(
130
                    text = diary.createTime,
131
                    style = MaterialTheme.typography.bodySmall
132
                )
133
                androidx.compose.material3.TextButton(onClick = onDeleteClick) {
134
                    Text(text = "删除", color = androidx.compose.ui.graphics.Color.Red)
135
                }
136
            }
137
        }
138
    }
139
}

5.10.2 日记编辑页面#

新建 ui/DiaryEditPage.kt，新增/编辑日记统一页面

1
package com.example.diary.ui
2

3
import androidx.compose.foundation.layout.Column
4
import androidx.compose.foundation.layout.fillMaxSize
5
import androidx.compose.foundation.layout.fillMaxWidth
6
import androidx.compose.foundation.layout.padding
7
import androidx.compose.foundation.text.BasicTextField
8
import androidx.compose.material3.Button
9
import androidx.compose.material3.MaterialTheme
10
import androidx.compose.material3.Scaffold
11
import androidx.compose.material3.Text
12
import androidx.compose.runtime.Composable
13
import androidx.compose.runtime.collectAsStateWithLifecycle
14
import androidx.compose.ui.Modifier
15
import androidx.compose.ui.unit.dp
16
import com.example.diary.viewmodel.DiaryViewModel
17

18
/**
19
 * 日记新增/编辑页面
20
 * 复用同一页面，根据状态区分新增/编辑模式
21
 */
22
@Composable
23
fun DiaryEditPage(
24
    viewModel: DiaryViewModel,
25
    onBack: () -> Unit
26
) {
27
    val uiState = viewModel.uiState.collectAsStateWithLifecycle().value
28
    val isEdit = uiState.currentDiary != null
29

30
    Scaffold(
31
        modifier = Modifier.fillMaxSize()
32
    ) { padding ->
33
        Column(
34
            modifier = Modifier
35
                .fillMaxSize()
36
                .padding(padding)
37
                .padding(20.dp)
38
        ) {
39
            // 页面标题
40
            Text(
41
                text = if (isEdit) "编辑日记" else "新增日记",
42
                style = MaterialTheme.typography.headlineSmall,
43
                modifier = Modifier.padding(bottom = 24.dp)
44
            )
45

46
            // 标题输入框
47
            BasicTextField(
48
                value = uiState.currentTitle,
49
                onValueChange = viewModel::updateTitle,
50
                modifier = Modifier
51
                    .fillMaxWidth()
52
                    .padding(bottom = 16.dp),
53
                textStyle = MaterialTheme.typography.titleLarge,
54
                placeholder = {
55
                    Text(text = "请输入日记标题")
56
                }
57
            )
58

59
            // 内容输入框
60
            BasicTextField(
61
                value = uiState.currentContent,
62
                onValueChange = viewModel::updateContent,
63
                modifier = Modifier
64
                    .fillMaxWidth()
65
                    .weight(1f),
66
                textStyle = MaterialTheme.typography.bodyLarge,
67
                placeholder = {
68
                    Text(text = "请输入日记内容")
69
                }
70
            )
71

72
            // 保存按钮
73
            Button(
74
                onClick = {
75
                    viewModel.saveDiary()
76
                    onBack()
77
                },
78
                modifier = Modifier
79
                    .fillMaxWidth()
80
                    .padding(top = 20.dp),
81
                enabled = uiState.currentTitle.isNotBlank() && uiState.currentContent.isNotBlank()
82
            ) {
83
                Text(text = "保存日记")
84
            }
85
        }
86
    }
87
}

5.11 主页面路由整合#

修改默认 MainActivity.kt，实现页面跳转逻辑

1
package com.example.diary
2

3
import android.os.Bundle
4
import androidx.activity.ComponentActivity
5
import androidx.activity.compose.setContent
6
import androidx.compose.foundation.layout.fillMaxSize
7
import androidx.compose.material3.MaterialTheme
8
import androidx.compose.material3.Surface
9
import androidx.compose.ui.Modifier
10
import com.example.diary.ui.DiaryEditPage
11
import com.example.diary.ui.DiaryListPage
12
import com.example.diary.viewmodel.DiaryViewModel
13
import dagger.hilt.android.AndroidEntryPoint
14
import javax.inject.Inject
15

16
@AndroidEntryPoint
17
class MainActivity : ComponentActivity() {
18

19
    @Inject
20
    lateinit var viewModel: DiaryViewModel
21

22
    // 页面状态标识
23
    private var isEditPage = false
24

25
    override fun onCreate(savedInstanceState: Bundle?) {
26
        super.onCreate(savedInstanceState)
27
        setContent {
28
            Surface(
29
                modifier = Modifier.fillMaxSize(),
30
                color = MaterialTheme.colorScheme.background
31
            ) {
32
                if (isEditPage) {
33
                    DiaryEditPage(
34
                        viewModel = viewModel,
35
                        onBack = {
36
                            isEditPage = false
37
                        }
38
                    )
39
                } else {
40
                    DiaryListPage(
41
                        viewModel = viewModel,
42
                        onAddClick = {
43
                            // 新增：清空旧数据，跳转编辑页
44
                            viewModel.clearInput()
45
                            isEditPage = true
46
                        },
47
                        onItemClick = {
48
                            // 编辑已有日记
49
                            isEditPage = true
50
                        }
51
                    )
52
                }
53
            }
54
        }
55
    }
56
}

六、核心关键知识点深度讲解#

6.1 Kotlin 协程（Coroutines）#

6.1.1 核心作用#

Android 禁止主线程耗时操作（数据库读写、网络请求），否则会造成ANR闪退。

协程是Kotlin轻量级异步框架，优势：

轻量：数千个协程同时运行无压力
代码同步写法，异步执行，可读性极强
生命周期可控，杜绝内存泄漏

6.1.2 本项目协程使用场景#

viewModelScope.launch：ViewModel专属协程作用域，页面销毁自动取消任务
所有Room数据库增删改查方法，全部通过协程在子线程执行
数据流监听持续运行，生命周期安全

6.2 Kotlin Flow 响应式数据流#

6.2.1 核心作用#

Flow 是可冷启动、可订阅、可监听变化的数据流，区别于普通List：

List：一次性获取数据，不会自动更新
Flow：持续监听数据源变化，数据改变自动推送最新结果

6.2.2 项目核心价值#

本项目无需手动刷新页面，新增/删除/修改日记后，页面自动更新，核心原理就是 Flow 实时订阅数据库数据。

6.3 Hilt 依赖注入核心原理#

无需手动new对象：所有DAO、仓库、ViewModel对象由Hilt自动创建
单例统一管理：数据库全局唯一实例，避免重复创建浪费资源
彻底解耦：类与类之间无硬依赖，便于维护测试

6.4 MVVM架构核心优势#

View只负责展示：UI页面无业务逻辑，纯粹渲染数据
ViewModel承载逻辑：独立于页面生命周期，屏幕旋转不丢失数据
Model纯数据层：只负责数据存取，与UI完全无关
低耦合高复用：任意层级修改不影响其他层级

七、项目运行效果说明#

7.1 初始化效果#

首次打开App，数据库为空，页面展示「暂无日记，点击右下角新增吧~」提示
右下角悬浮按钮为新增日记入口

7.2 新增日记流程#

点击悬浮按钮，跳转编辑页面
输入标题、正文，点击保存
自动记录当前时间，返回列表页，实时展示新增日记

7.3 编辑日记流程#

点击任意日记Item，自动回填原有标题和内容
修改内容后点击保存，数据实时更新

7.4 删除日记流程#

点击日记底部「删除」按钮，即刻删除对应数据
列表自动刷新，删除的日记消失

7.5 核心特性效果#

数据持久化：退出App、重启手机，日记数据不会丢失
实时刷新：所有操作无需手动刷新页面
生命周期安全：屏幕旋转、页面重建，数据不丢失、无内存泄漏

八、项目总结与拓展优化建议#

8.1 项目总结#

本项目完整复刻了企业级Android MVVM开发流程，从零实现了本地日记App，覆盖安卓开发核心必备知识点：

Jetpack Compose声明式UI开发
Room本地数据库增删改查+数据流监听
Kotlin协程异步任务处理
Hilt依赖注入工程化管理
MVVM分层架构规范开发

对于Android入门学习者来说，本项目是打通基础到进阶的核心实战项目，掌握后可独立开发备忘录、记事本、日志记录等同类App。

8.2 进阶拓展优化建议（可自主迭代）#

增加搜索功能：根据日记标题、正文关键词模糊搜索
增加时间筛选：按年月日筛选对应日记
增加日记收藏功能：新增收藏字段，区分普通/收藏日记
增加密码锁功能：App启动密码验证，保护隐私
增加数据备份/恢复：导出数据库文件、本地备份恢复
增加主题切换：深色/浅色模式切换
增加日记标签分类：给日记添加标签，分类展示
优化UI样式：增加动画、渐变、卡片阴影，提升颜值

8.3 学习后续方向#

学习 Retrofit + OkHttp 网络请求，对接云端接口
学习 Compose导航组件，实现多页面正式路由
学习 权限管理、文件存储 高级用法
学习 单元测试，保证项目稳定性

结语#

通过本教程，你已经完成了从Kotlin语法基础到完整Android项目落地的跨越。本项目完全遵循Google官方开发规范，无野路子代码，是入门Android原生开发最标准、最优质的实战案例。

熟练掌握本项目的架构思想和组件用法，你将彻底摆脱新手阶段，具备独立开发Android小型应用的能力。

（注：部分内容可能由 AI 生成）

yuyu的官网

Kotlin + Jetpack Compose 从零开发 Android 日记 App 完整入门教程#

前言#

一、项目背景与功能介绍#

1.1 项目背景#

1.2 核心功能#

1.3 项目学习价值#

二、全套技术栈选型详解#

2.1 核心技术清单#

2.2 技术选型详细说明#

2.2.1 放弃传统XML，选用Jetpack Compose#

2.2.2 选用Room替代原生SQLite#

2.2.3 MVVM架构（核心解耦）#

2.2.4 Hilt依赖注入#

2.2.5 协程+Flow异步数据流#

三、项目整体结构详解#

3.1 标准化分层结构#

3.2 完整项目目录预览#

3.3 各层级核心职责#

四、项目环境初始化配置#

4.1 新建Android项目#

4.2 全局依赖配置（build.gradle）#

4.2.1 项目根目录 build.gradle#

4.2.2 模块目录 build.gradle（核心依赖）#

五、核心代码逐层实现（带超详细注释）#

5.1 项目入口配置（Hilt初始化）#

5.2 工具类：时间格式化工具#

5.3 第一层：数据库实体类 Entity（Diary）#

5.4 第二层：DAO数据访问接口#

5.5 第三层：Room数据库初始化#

5.6 第四层：Hilt依赖注入模块#

5.7 第五层：Repository数据仓库#

5.8 第六层：UI状态管理#

5.9 第七层：ViewModel业务逻辑层#

5.10 第八层：Compose UI界面实现#

5.10.1 日记列表页面#

5.10.2 日记编辑页面#

5.11 主页面路由整合#

六、核心关键知识点深度讲解#

6.1 Kotlin 协程（Coroutines）#

6.1.1 核心作用#

6.1.2 本项目协程使用场景#

6.2 Kotlin Flow 响应式数据流#

6.2.1 核心作用#

6.2.2 项目核心价值#

6.3 Hilt 依赖注入核心原理#

6.4 MVVM架构核心优势#

七、项目运行效果说明#

7.1 初始化效果#

7.2 新增日记流程#

7.3 编辑日记流程#

7.4 删除日记流程#

7.5 核心特性效果#

八、项目总结与拓展优化建议#

8.1 项目总结#

8.2 进阶拓展优化建议（可自主迭代）#

8.3 学习后续方向#

结语#

分享文章

沿着主题读

换条路线

评论