Compose Weekly #3：Bloom

最新推荐文章于 2024-08-24 07:33:30 发布

AndroidKt

最新推荐文章于 2024-08-24 07:33:30 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/poorkick/article/details/115017880

版权

本文介绍了参加Jetpack Compose的第三周速度挑战赛，目标是快速并准确地按照Bloom设计图完成应用。内容涵盖设计风格、界面导航、知识点如自定义主题、列表、文字和导航，以及关键实现，包括带边框的密码文本输入和底部导航栏。最终展示了Welcome、Login和Home页面的效果，并提供了源码链接。

摘要由CSDN通过智能技术生成

前言

第三周挑战赛是速度比拼，按照官方发出的设计图最快完成且符合所有设计规范者胜出。不仅要做得快，还要做得好，奖品自然不会少。这一期的奖品是：Google Pixel 5。深知干不过业界大佬们，花个半天纯当练手完成题目。

设计图

设计风格

界面导航

界面标注

完整设计图：https://github.com/android/android-dev-challenge-compose/blob/assets/Bloom.zip

知识点

主题：自定义主题
列表：LazyColumn、LazyRow
文字：文本输入框、风格化文本、自定义字体
导航：基础使用、底部导航栏集成

关键实现

定义主题

界面布局中使用主题元素配置color、shape、typography等内容。localImages、localElevations为自定义内容。

@Composable
fun BloomTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
   
    val colors = if (darkTheme) {
   
        DarkColorPalette
    } else {
   
        LightColorPalette
    }
    val images = if (darkTheme) DarkImages else LightImages
    val elevations = AllElevations

    CompositionLocalProvider(
        localImages provides images,
        localElevations provides elevations
    ) {
   
        MaterialTheme(
            colors = colors,
            typography = typography,
            shapes = shapes,
            content = content
        )
    }
}

object BloomTheme {
   
    val colors: Colors
        @Composable
        get() = MaterialTheme.colors

    val typography: Typography
        @Composable
        get() = MaterialTheme.typography

    val shapes: Shapes
        @Composable
        get() = MaterialTheme.shapes

    val images: Images
        @Composable
        get() = localImages.current

    val elevations: Elevations
        @Composable
        get() = localElevations.</