第 10 章 · 实战项目「迷你小红书」— 可视化演示

项目功能矩阵

模拟器控制

当前状态（模拟 Store）

UserStore.loggedIn = false
UserStore.nickname = "游客"
ThemeStore.darkMode = false
TabStore.currentTab = "home"
NoteStore.notes.size = 0

关键代码：MainPage

@Page("MainPage")
internal class MainPage : Pager() {
    override fun body() = {
        attr {
            backgroundColor(
                if (ThemeStore.darkMode) Color(0xFF121212L)
                else Color(0xFFF5F5F7L)
            )
        }

        View {                                  // 内容区
            attr { flex(1f) }
            when (TabStore.currentTab) {
                "home"    -> HomePage().body().invoke(this)
                "explore" -> ExplorePage().body().invoke(this)
                "publish" -> PublishPage().body().invoke(this)
                "message" -> MessagePage().body().invoke(this)
                "profile" -> ProfilePage().body().invoke(this)
            }
        }

        BottomTabBar(                           // 底 Tab
            current = TabStore.currentTab,
            onSelect = { TabStore.currentTab = it },
        ).invoke(this)
    }
}

14 天学完后你能做什么

• 独立写复杂跨端 UI
• 给团队介绍 Kuikly 的"为什么"和"是什么"
• 理解每行 DSL 背后的"两棵树 + 渲染指令"机制
• 接通跨端能力（相机、推送、IM）
• 调优性能、做动态化、做包体瘦身
• 应付跨端框架方向的高级岗面试

🎉 恭喜你看完了整套 Kuikly 学习笔记！