Android 的UI组件Compose的用法
一：前言
Jetpack Compose 是用于构建原生Android界面的新工具包，他用更少的代码，弱小的工具和直观Kotlin API,能够帮忙他简化并放慢Android界面开发
Compose架构的分层设计
| 由上至下 | 阐明 | 使用 |
|---|---|---|
| material | 提供了Material Design一套格调体系，蕴含主题零碎、款式化组件 | Button、AlertDialog等等 |
| foundation | 相当于面向开发者的跟基层，蕴含残缺的UI零碎和实用布局 | LazyList、Row、Column等等 |
| animation | 动画层，蕴含平移、突变、缩放等等，并且提供了不便开发者的动画组件 | animate AsState、Transition、Animatable、AnimatedVisibility等等 |
| ui | ui相干的根底性能，包含自定义布局、绘制、触摸反馈等等 | ComposeView、Layout、LayoutNode等等 |
| runtime | 最底层的概念模型，包含数据结构、状态解决、数据同步等等 | mutableStateOf、remember等等 |
| compiler | 基于Kotlin的编译器插件 | 解决@Composable函数 |
二：setContent的源码剖析
public fun ComponentActivity.setContent( parent: CompositionContext? = null, content: @Composable () -> Unit) {//1.通过decorView找到ContentView，再获取第一个 ComposeView val existingComposeView = window.decorView .findViewById<ViewGroup>(android.R.id.content) .getChildAt(0) as? ComposeView//2.如果ComposeView为空则走初始化流程 if (existingComposeView != null) with(existingComposeView) { setParentCompositionContext(parent) setContent(content) } else ComposeView(this).apply { // 3. 初始化ComposeView必定为空，则进入这边 // Set content and parent **before** setContentView // to have ComposeView create the composition on attach setParentCompositionContext(parent)// 4. 把入口函数对象传入ComposeView setContent(content) // Set the view tree owners before setting the content view so that the inflation process // and attach listeners will see them already present setOwners()// 5. 把ComposeView设置进ContentView setContentView(this, DefaultActivityContentLayoutParams) }}三：Compose 的Surface的应用
@Composable@NonRestartableComposablefun Surface( modifier: Modifier = Modifier,//裁剪，依据shape属性形容的形态进行裁剪 shape: Shape = RectangleShape, color: Color = MaterialTheme.colorScheme.surface,//内容色彩 contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, content: @Composable () -> Unit)Surface 从字面上来了解，是一个立体，在 Material Design 设计准则中也同样如此，咱们能够将很多的组件摆放在这个立体之上，咱们能够设置这个立体的边框，圆角，色彩等等。接下来，咱们来用 Surface 组件做出一些不同的成果。
四：Compose 的@Preview的应用
@Repeatableannotation class Preview( val name: String = "",//此预览的显示名称，容许在面板中辨认它 val group: String = "",//此@preview 的组名称，这容许在UI中对他们进行分组，并仅显示其中一个或多个 @IntRange(from = 1) val apiLevel: Int = -1,//出现带正文的@Composables时应用的API级别 val widthDp: Int = -1,//将在其中渲染带正文的@Composable的最大DP宽度。应用此选项能够限度渲染视口的大小 val heightDp: Int = -1,//将在其中渲染正文的@Composable的最大高度（以DP为单位）。应用此选项能够限度渲染视口的大小。 val locale: String = "",//区域设置的以后用户首选项，对应于区域设置资源限定符。默认状况下，将应用默认文件夹。 @FloatRange(from = 0.01) val fontScale: Float = 1f,//用户首选字体的缩放因子，绝对于根本密度缩放。 val showSystemUi: Boolean = false,//如果为true，将显示设施的状态栏和操作栏。@Composable将在残缺流动的上下文中出现 val showBackground: Boolean = false,//如果为true，@Composable将应用默认背景色。 val backgroundColor: Long = 0,//背景的32位ARGB色彩int，如果未设置，则为0 @UiMode val uiMode: Int = 0,//依据android.content.res.Configuration.uiMode的ui模式位掩码 @Device val device: String = Devices.DEFAULT//批示要在预览中应用的设施的设施字符串。请参阅设施中的可用设施)栗子：
@Preview( widthDp = 100, heightDp = 100, fontScale = 2f, showBackground = true, backgroundColor = 0xFF00FF00, showSystemUi = true, device = Devices.NEXUS_6)@Composablefun GreetingPreview() { MyApplicationTheme { Greeting("Android") }
留神：
*1.showBackground 必须为true，backgroundColor 属性才失效，并且backgroundColor 是 ARGB Long，而不是 Color 值
2.同一个函数能够应用多个@Preview注解*
3.@Preview注解 不反对具备非默认参数的可组合函数（就是preview 不能润饰带参数的函数）
4.@PreviewParameter正文 能够润饰带参数的