关于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正文 能够润饰带参数的