关于android:Android-的UI组件Compose的介绍和基本用法

Android 的 UI 组件 Compose 的用法

一：前言

Jetpack Compose 是用于构建原生 Android 界面的新工具包，他用更少的代码，弱小的工具和直观 Kotlin API, 能够帮忙他简化并放慢 Android 界面开发

Compose 架构的分层设计

二：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
@NonRestartableComposable
fun 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 的应用

@Repeatable
annotation 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

)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {Greeting("Android")
    }

留神 ：
*1.showBackground 必须为 true，backgroundColor 属性才失效，并且 backgroundColor 是 ARGB Long，而不是 Color 值
2. 同一个函数能够应用多个 @Preview 注解 *
3.@Preview 注解 不反对具备非默认参数的可组合函数（就是 preview 不能润饰带参数的函数）
4.@PreviewParameter 正文 能够润饰带参数的