【JetPack Compose】JetPack Compose简单介绍

JetPack Compose学习笔记

B站视频地址：

一次搞定 Jetpack Compose，优先获得择偶权，更新中_哔哩哔哩_bilibili

对应视频选集 P1-P5

02-Jecpack Compose是什么与优势

它是2019 年 I/O 大会上公布的新的 UI 库，在21年年7月29发布它的正式版。

既然它是一个UI库，那就要和我们传统写UI的方式作对比了。

①传统写UI的方式：就是先在建立一个xml文件，在里面写好布局好，再回到Java文件（或者是Kotlin文件）里去把控件实例化出来后，再去调用。

②Compose这个库：或者说它是一个框架，它重新定义了Android UI的写法，不再使用xml文件了，而是直接在Kotlin文件（只支持Kotlin）里，写布局的代码。官方对Compose的评价是“让困难的事情变简单，让不可能的事情变得有可能”。
 

05-配置布局

弹幕：文字和图片再空一点点能好看点

所以代码如下：

    @Composable
    fun MessageCard(msg:Message){
        Row(modifier = Modifier.padding(all = 8.dp)) {
            Image(
                painter = painterResource(id = R.drawable.jetpack_compose),
                contentDescription = null,
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape))
 
            Column (modifier = Modifier.padding(start = 8.dp)){
                Text(text = msg.author)
                Spacer(modifier = Modifier.height(4.dp))
                Text(text = msg.body)
            }
        }
 
    }

setContent里面调用，我们传入参数：

setContent {
            MessageCard(Message("Android","JetPack Compose"))
 }

最终效果：

一些解释：

使用 Column 

Column 函数可让您垂直排列元素。向 MessageCard 函数中添加一个 Column。
您可以使用 Row 水平排列各项，并使用 Box 堆叠元素。

添加图片元素

下面我们来添加消息发送者的个人资料照片，以丰富消息卡片。使用 Resource Manager 从照片库中导入图片，或使用这张图片。添加一个 Row 可组合项，以实现良好的设计结构，并向该可组合项中添加一个 Image 可组合项。

配置布局

您的消息布局拥有良好的结构，但其元素的间距不合理，并且图片过大！为了装饰或配置可组合项，Compose 使用了修饰符。通过修饰符，您可以更改可组合项的大小、布局、外观，还可以添加高级互动，例如使元素可点击。您可以将这些修饰符链接起来，以创建更丰富的可组合项。您将使用其中一些修饰符来改进布局