compose-museum/jetpack-compose-book

Important

此仓库暂时归档，因为我近期已经没有时间继续去维护和更新这份文档了，一方面是自己的知识储备还不足以继续写内容上去，另一方面是谷歌官网的文档已经慢慢更新地很完善了，希望大家都去看官网的内容吧

介绍 💨

Jetpack Compose Book

国内第三方镜像 （加载速度快，内容可能略滞后于官网）：https://compose.funnysaltyfish.fun

此项目致力于帮助大家更好的认识 Jetpack Compose 框架, 更多的部分是为了补充官网可能没有介绍的东西。

有问题欢迎提交 issue。

一起进步！

关于贡献

Jetpack Compose

如果你想为 Jetpack Compose 做贡献的话，你可以加入 Kotlin 的 Slack 频道 #Compose, 或者在 https://issuetracker.google.com/issues?q=componentid:612128 中提交 Compose 的 Bug 或者错误

本项目

我们非常欢迎各种的 PR 请求（包括但不局限于添加一个换行增加阅读体验），_(:з)∠)_本项目还处于初期阶段，非常需要各位大佬的完善和纠错。

如果你有已经写好的文章想要添加到这里，欢迎提交 PR。

文档采用 docusaurus 来编辑及部署

本地部署文档 & 编辑文档

git clone https://github.com/compose-museum/jetpack-compose-book.git
npm install

在项目根目录终端执行 npm run start，将会在 http://localhost:3000/ 看到文档

如何添加/更改文档？

文档都是由 Markdown 语法来编写的，所有文档位于 /docs 中, 如果需要扩展左边的侧边栏，请在 sidebars.js 更新。

图片添加需要在 static/img/ 下，和文档同等路径名字添加。例如我修改了 Text 的文档，并且添加了一张例图，那么就是放在 /static/img/elements/text/xxx.png。

调用图片方法

如何测试

运行 npm run build 会生成 build 文件夹，期间 docusaurus 会打印日志告诉你是否有 WARNING 或者 ERROR（一般可能是路径错误等）

基于 Docker 部署

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何环境中

1. 安装 Docker 和 Docker Compose

2. 新建目录用于存放 docker-compose.yml 文件和项目文件

3. 在目录下新建 docker-compose.yml 文件，内容如下：

version: "3.7"

services:
  docusaurus:
    container_name: docusaurus
    image: awesometic/docusaurus
    volumes:
      - ./jetpack-compose-book-master:/docusaurus/website
    environment:
      - TZ=Asia/Shanghai
      - AUTO_UPDATE=false
      - WEBSITE_NAME=website
      - RUN_MODE=development # development or production
    ports:
      - 3000:80

4. clone 或 Download Zip 下载本项目源码到本地，重命名为 jetpack-compose-book-master，放到此目录下。此时，目录结构如下

.
├── docker-compose.yml
└── jetpack-compose-book-master
  ├── README.md
  ...

5. 在此目录下打开终端，执行 docker-compose up -d（部分 linux 平台命令为 docker compose up -d，下面类似）（-d 意为后台运行，如果首次运行希望看到输出，可以不加 -d），稍等几分钟后将会在 http://localhost:3000/ 看到文档
6. 如果想要停止运行并删除容器，执行 docker-compose down；如果更新了文件，可以使用 docker-compose restart 重启容器；如果想发布生产版本，请将 docker-compose.yml 中的 RUN_MODE 改为 production，并执行 docker-compose up -d 重启容器，执行完成后可在 ./jetpack-compose-book-master/build 下看到生成的静态文件

如果你觉得此项目对你有帮助的话，不妨点个 Star 支持下作者吧~！

贡献者 ❤

版权声明

本作品采用知识共享署名-非商业性使用 2.0 通用许可协议进行许可。

除特别注明外，项目中除了代码部分均采用非商业性使用 2.0 通用 (CC BY-NC 2.0) 进行许可。

您可以自由地：

共享 — 在任何媒介以任何形式复制、发行本作品

演绎 — 修改、转换或以本作品为基础进行创作

但是你必须遵守：

署名 — 您必须给出适当的署名，提供指向本许可协议的链接，同时标明是否（对原始作品）作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可人为您或您的使用背书。

非商业性使用 — 您不得将本作品用于商业目的。

jetpack-compose-book's Issues

翻译accompanist coil 部分

#121

监听对象属性变更从而触发UI重组能否实现?

如题,mutableStateOf我里面设置了一个Person对象,然后点击按钮直接去改对象的数值,好像没法触发重组,只能通过设置一个新对象才能触发,想讨论下有没有方式实现我上述说的那种方法?

@Preview(showBackground = true)
@Composable
fun StateDemo() {
    MaterialTheme() {
        val person = remember {
            mutableStateOf(Person("张三", 18))
        }

        Column {

            Column {

                Row {
                    Text(text = person.value.name)
                    Text(text = person.value.age.toString())
                }

                Button(onClick = {
                    //这种方法测试可行
                    val newPerson =person.value.copy(age = 19)
                    person.value = newPerson
                    
                    //我想用下面的方法实现,但测试时不行的...
                    //person.value.age = 19
                }) {
                    Text(text = "年龄设置为19")
                }
            }
        }

    }
}

data class Person(var name: String, var age: Int)

不知为何，mkdocs 似乎不会记录每个文档的最后修改时间，只会同步更新

难受啊啊啊啊啊啊

唔大概需要优化一下

移动端引用前端样式可能需要优化下，不妨加个scrollable？

请问这个描述是什么意思？

“Composable 通常采取一个 content 的 Composable ，lambda(content: @composable () -> Unit)”这一段看的不是很明白..或许有更合适一点的表达方式吗？

发现单词少个字母

https://milklab.dev/docs/principle/snapshot

请问有遇到 compose 内存泄漏问题吗 ？

我有好几个 activity 的提示 vm 、AndroidComposeView$ViewTreeOwners.lifecycleleOwer 内存泄漏了，用的 leakcanary 检测

测试 demo 中的代码跑出来的效果跟博客中说的不一样！

代码链接 中的关于 compositionLocalOf 与 staticCompositionLocalOf 区别 的部分，使用compositionLocalOf结果也是全部会 recompose！很困惑，不知道到底怎么回事！

本周计划将写篇讲解固有特性测量内容的文章

官方文档写的是云里雾里，真正理解起来却并没那么难。为以正视听，我决定写篇文章帮助开发者们在自定义Layout中兼容固有特性测量。

目录顺序需要调整下

我发现目录的顺序有点不友好😃,看的时候有些内容都是下面才讲解的,

可以按前提知识这样排下序,有个依次渐进的感觉,阅读会比较友好

共勉 加油👍

本仓库的内容似乎被拿来卖课了

今天刷到一篇推广文章，里面出现的所谓附赠一套compose从入门到实战手册内容正是此docs内容，只是被做成了pdf版本。
此issue仅指出这一客观事实，不表述任何主观意见。如无意占据了issue公共空间，本人将第一时间删除。

仍然需要写 CSS 提高阅读体验

写一个简单的入门代码页用于介绍 Compose

https://developer.android.com/jetpack/compose/tutorial

了不起的工作。问题请教

拜读了compose博物馆一些文章，翻译的很好，有些对原理介绍的也很到位，感谢博主的贡献。

我最近在遗留项目上尝试compose，遇到一些难题，希望跟你探讨一下。

我在旧项目中使用了一个基于ViewGroup的组件SmartRefreshLayout，通过AndroidView转换成Compose后，发现有一些问题。主要的问题是，不能正确的处理scroll。

@Composable
    private fun RefreshLayout(onRefresh : (Boolean) -> Unit, content: @Composable (ViewGroup) -> Unit) {
        AndroidView(
            factory = { ctx ->
                SmartRefreshLayout(ctx).apply {
                    layoutParams = ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT,
                    )
                    setOnRefreshListener {
                        onRefresh(false)
                        it.finishRefresh()
                    }
                    setOnLoadMoreListener {
                        onRefresh(true)
                        it.finishLoadMore()
                    }
                    addView(ClassicsHeader(ctx).apply {
                        setAccentColorId(R.color.bgColor)
                        setPrimaryColorId(R.color.transparent)
                    })
                    addView(ComposeView(ctx).apply {
                        setContent{ content(layout) }
                    })
                }
            },
            update = {}
        )
    }

RefreshLayout(onRefresh = { more -> vm.reload(more, context)}) {
   Box() { ... }
}

当Box内容超出屏幕，界面无法滚动。
如果在RefreshLayout上加入ScrollModifer：

modifier = Modifier.verticalScroll(rememberScrollState()),

滚动可以工作，但似乎不再响应下拉上拉的动作。

还有另外一个问题，如果content的内容是动态更新的，无法让RefreshLayout重新布局。

不知这些问题是View和Compose之间的兼容性导致，还是需要做很多的fix？请指教

完善动画概述的篇章

这么多图片 建议来个bot自动压图 减小图片尺寸

GitHub的自动化压图bot, 很好用: https://github.com/apps/imgbot

关于重组作用域有几个问题

文章里说 "为什么 Button 不参与重组？"，这个不对吧，打断点看内部有重新执行。换一个方式说，内部的Text文案很长，肯定会导致Button重新执行Layout吧（如果没有限定Button宽高或者外部约束啥的）

添加动画详情模块

coil迁移了亲，更新一下文档呗！

https://coil-kt.github.io/coil/compose/

考虑用 macros 来代替路径

唉，俺应该早这么做的

Typo

在开始之前 - 快速入门 - 可交互的动画效果 - 示例代码 中，

var isExpanded by remember…… 这一行的注释 创建一个能够检测卡片*十分*被展开的变量 应该为 创建一个能够检测卡片*是否*被展开的变量

解释代码中的注释

关于State的疑问

在某位贡献者的博客中看到一个例子，我自己动手试了一下，得到了一个令我费解的结果。想咨询下大佬

下面的代码比较符合我的预期结果，随着点击button，text进行了改变并且Foo并没有进行重组

@SuppressLint("UnrememberedMutableState")
@Composable
fun Foo() {
    val textState by TestHolder.textState
    Log.e("Compose", "Foo")

    Button(onClick = {
        TestHolder.update("$textState $textState")
    }.also { Log.e("Compose", "Button") }) {
        Log.e("Compose", "Button content lambda")
        Text(textState).also { Log.e("Compose", "Text") }
    }
}

object TestHolder {
    val textState: MutableState<String> = mutableStateOf("1")

    fun update(text: String) {
        textState.value = text
    }
}

但有意思的是，如果我这样写，text改变的时候，Foo就会重组

@SuppressLint("UnrememberedMutableState")
@Composable
fun Foo() {
    val textState by TestHolder.textState
    Log.e("Compose", "Foo")
    Bar(text = textState)
}

object TestHolder {
    val textState: MutableState<String> = mutableStateOf("1")

    fun update(text: String) {
        textState.value = text
    }
}

@Composable
fun Bar(text: String) {
    Button(onClick = {
        TestHolder.update("$text $text")
    }.also { Log.e("Compose", "Button") }) {
        Log.e("Compose", "Button content lambda")
        Text(text).also { Log.e("Compose", "Text") }
    }
}

这是为什么呢？看了一些资料，仍然没有搞明白

Transformer双指拖动、缩放与旋转的问题

文中提示rotate需要在offset之前调用，但我感觉offset在rotate之前调用更符合预期吧，一般都是组件移动到哪就围绕组件所在的中心点旋转，而不是一直围绕原始位置的中心点旋转的吧。

撇开预期什么的不说，就调用的顺序还是有疑惑的地方，为什么rotate->offset->transformable这样的调用顺序，在移动之后是以原始位置为中心点旋转。像clickable、draggable这些手势，官方文档说其实这些手势都是在监听组件的位置，如果先监听手势，后offset，其实手势的监听点并没有变，只是视图移动了而已，如果是先offset，后监听手势，那么监听的点则在移动之后。

所以rotate->offset->transformable奇怪的点在于，transformable是最后才调用的，之前已经offset了，那监听旋转的点应该是以offset之后的中心点旋转，但事实上还是以原始位置的中心点旋转，就这点很不理解。除了旋转，平移和缩放都是能对得上官方的解释的。

教程”布局“部分的问题

布局 -> BottomNavigation部分，示例代码中bottomnavigation应改为bottomBar，否则Scaffold会因为没有bottomnavigation关键字而报错...

文档的网页打开有点慢想自己构建一个本地文档，但是出错啦

clone下来后， 进入项目根目录 npm install，然后就出现这下面的这个错误了，不是很懂npm相关的依赖，寻求帮助

翻译 SystemUiController 内容

#135

code字体建议改成Jetbrains Mono增加阅读体验

代码背景色可以考虑改成合适的暗色，更加醒些🥵

翻译Accompanist组件库AppCompat Theme部分

请问现在我还可以提交自己的开源项目吗

项目地址是：(https://github.com/Watermelon02/ComposeFocus)
文章地址：(https://juejin.cn/post/7093460817500504100)
如果可以的话请问我该怎样提交呢

什么情况下,使用remember带参数的用法?

如题,一般使用remember关键字都是没有带参数,但我看文档时候发现remember可以带参数,看说明不是很明白

带参数的用法是应该在什么情况下使用?有明白的大佬可以举个栗子说明不?

@Composable
inline fun <T : Any?> remember(key1: Any?, calculation: (@DisallowComposableCalls () -> T)?): T

Remember the value returned by calculation if key1 is equal to the previous composition, otherwise produce and remember a new value by calling calculation.

文档地址: androidx.compose.runtime  |  Android Developers

有Bloom 的源码地址吗

RT

如果我想提供样例App我该如何去做

Typo

• 快速入门板块中在 Android Studio 中预览你的函数第二段正文**因为新的 previewGreeting() 函数并没有在任何地方被调用**中**previewGreeting()**应该为**PreviewGreeting()** (大写）
• 快速入门板块中2. 第二步：界面下第一行Compose的e字母没有正确显示在md格式内。
  （都不是什么问题）

什么是尾lambda

在技术原理介绍重组原理那一篇文章中，有这一段话：

回到前面的例子，参数 text 作为表达式执行的调用处是 Button 的尾lambda，而后才作为参数传入 Text()。 所以此时最小重组范围是 Button 的 尾lambda 而非 Text()

这个尾lambda指的是哪块代码，代码中只有onClick{}和Text()调用了text表达式啊

@Composable
fun Foo() {
    var text by remember { mutableStateOf("文字") }
    Log.d("TAG", "Foo")
    Button(
        onClick = { text = "$text $text" }.also {
            Log.d("TAG", "Button")
        }
    ) {
        Log.d("TAG", "Button content lambda")
        Text(text).also {
            Log.d("TAG", "Text")
        }
    }
}

反馈 布局组件里的TopAppBar报404了

如题,打开页面404了...

考虑自己搭建一个文档界面

目前所有的目录只能依赖于 mkdocs 现有的结构 ，打算试试用 react 之类的 web 框架来搭建一个更适用于介绍 Jetpack Compose 的网站

函数介绍替换为 macOS 代码风格图片

【写作计划】自定义触摸反馈

自定义视图大致可分为：自定义绘制、自定义测量布局与自定义触摸反馈。
自定义绘制没啥好说的，用Canvas画就是了，更多的是一些绘制上的数值计算与UI细节处理。
自定义测量布局允许开发者能够具备对于Layout测量布局流程的掌控能力，从而满足绝大多数实际业务UI需求。
这篇文章作为最后一部分，通过对手势的完全自定义的学习使开发者具备完成各类UI交互手势的能力。

commit有种野性美属实是😅

蚌埠住了

考虑将 Modifier 移到更合适的地方

Compose 中如何实现 scrollview 效果

大佬，问个 compsoe 问题：A 页面有 2 个列表，我用 Column 套 2 个LazyColumn，想实现 view 系统的 scrollview 效果，但是数据多了后 2个列表显示不全，而且只能单独滑动，所以我就给外层Column 加上滑动 state ，结果直接崩了，提示垂直滑动不能嵌套垂直滑动。请问如何实现类似 scrollview 嵌套多个列表，子列表不可滑动，最外层 scroll 可滑动效果。

可以整理一下常用的官方依赖

方便更新版本。。。有的时候有些乱

我用 compose navhost 做导航，返回时页面会重建，请问怎么解决？

使用 navhost ，实现类似多 fragment 效果，从 A 打开 B，再返回 A ，A 会重建，列表数据重新刷新，输入框内容也会置空，而不是进入前的状态，请问怎样实现类似 activity 的那种页面返回。

翻译 Accompanist Glide 部分并调整 Coil 中部分内容

#125

网站挂了

如题，难道是因为 #294 (comment) ？

Canvas问题

为什么在Composable执行重组过程中 其他任何地方的DrawScope的lambda函数都会被重新执行？其中包括modifier的drawWithContent、drawBehind

完善基本控件/布局的 API 文档

图片链接挂了

翻译accompanist概述部分与Insets部分