Jetpack Compose中自定义布局

 前言

Jetpack Compose中的控件被定义成一个一个的可组合函数，官方称这些控件为Composable，翻译成中文是“可组合项”，当强调它作为一个界面的一部分出现时，我会使用“控件”或“元素”之类的术语，要注意这三者之间的差别，我不知道有没有更好的词，所以我只能用这两个。当仅仅强调它是一个可组合项时，我会正常使用“可组合项”这个术语。

Layout系统

基本原则

元素需要通过一些约束来测量自己，这限制了一个元素的最大和最小的宽高。如果一个元素有子元素，那么它会测量每一个子元素来帮助决定自己的大小，每当一个元素向父元素报告了它自己的大小时，那么它就得到了相对于自身来放置自己的子元素的机会。

compose不允许多次测量，和Flutter一样，原因就是重复测量作用于UI这种树形结构的是时候会带来指数级的性能下降。当然有很多时候你需要重复获取子元素的一些信息，这会有其它的办法。

自定义layout modifier

在compose中，Modifier提供了一系列函数，使用它们可以提供很多布局上的参数，比如padding等信息，通过自定义modifier来看下它是怎么工作的。

通过扩展函数来扩展Modifier中的方法，因为modifier是链式调用的，我们扩展的方法也应该符合链式调用规则，Modifier.then方法用来辅助完成链式调用，它接受一个Modifier，返回一个与这个Modifier结合后的Modifier。