在Android Jetpack Compose中创建一个翻转的盒子卡

就像一张纸被翻转到一边时的样子，作为一个开发者，你可能想创建一个同样的卡片。这个卡片可能被用来显示你的应用程序中的一些笔记或项目。

当使用XML来设计布局时，这几乎是不可能的。使用Jetpack Compose，没有直接的修改器可以用来实现这一点。Compose中的Canvas在这里派上了用场。

先决条件

要继续学习本教程，你将需要以下条件。

在你的电脑上安装[Android Studio]。
了解如何创建和运行Jetpack Compose Android应用程序。
Jetpack Compose中Canvas的基础知识。
[Kotlin]编程语言的基础知识。

帆布的概念

当涉及到在Android中制作自定义图形时，Jetpack Compose让它变得更加简单和容易。在本教程中，我们将通过一些概念，用来创建一个翻转的卡片。

我们将通过Composable中的一些画布概念，然后我们将直接跳到创建一个翻转的卡片。

Canvas - 这是我们可以用来创建自定义图形的主要Composable。当涉及到创建画布时，使用的语法是。

Canvas(modifier = Modifier.fillMaxSize()) {
    YOUR_CODE
}

DrawScope - 这就像一个我们可以进行图形绘制的环境。
ClipPath - 这将根据给定的路径移除画布中的某些区域。为了进行剪裁，下面是我们如何定义。clipPath

clipPath(path) {
}

Path - 从当前点开始，，画一条直线到另一个给定点。下面是我们如何定义一个路径。Path

val path = Path().apply {
}

LineTo - 这将创建一条从A点到B点的线段。对于函数，我们传递X和Y坐标。lineTo lineTo(X,Y)
DrawRoundRect - 正如它的名字所说，函数绘制了一个圆形的矩形。drawRoundRect

drawRoundRect(
)

让我们开始吧。

第1步 - 创建一个Compose项目

启动你的Android Studio并创建一个空的Compose项目。

compose-proj

确保你已经选择了空的Compose活动。

给它起一个你选择的名字。

empty-proj

第2步 - 创建一个自定义的可组合项目

在这一步，我们将创建一个可组合的，我们将应用一些Canvas 操作。在你的MainActivity ，在一切之外，定义一个可组合的，并命名为FlippedCard 。

对于这个Composable ，我们将定义一些参数。

一个modifier ，并给它一个默认的Modifier 。
cornerRadius 将围绕我们的卡片。
cutCornerSize 将用于切割卡片的左上方。
我们的卡片将采用的颜色。

我决定添加一个颜色参数，因为你可能想用不同的颜色来显示懒人栏里的卡片。这时你就可以向卡片传递不同的颜色。

@Composable
fun FlippedCard(
    modifier: Modifier = Modifier,
    cornerRadius: Dp = 10.dp,
    cutCornerSize: Dp = 30.dp,
    color: Long
) {
    ...
}

第3步 - 创建一个包装盒

在创建了我们的FlippedCard 组合后，在它里面，我们将添加一个Box ，它将容纳我们的Canvas 和它的所有操作。

Box(
    modifier = modifier.padding(10.dp)
) {
}

第4步 - 使用Canvas

在这一步中，我们在Box 里面添加一个Canvas

Canvas(modifier = Modifier.matchParentSize()) {
}

我们确保使用matchParentSize 作为它的尺寸，而不是fillMaxSize 。我们的 Canvas 需要一个固定的尺寸--一个 Canvas 在被调用时就知道的尺寸。

matchParentSize 将在父代测量完它的尺寸后立即给Canvas 尺寸。在这种情况下，我们的父代就是盒子。

在创建Canvas ，它给了我们一个DrawScope ，我们可以用它来做我们的Graphics 操作。

路径

让我们创建一个变量，代表一个将穿过我们矩形的Path 。

这将是我们的图形。

card-graph

val path = Path().apply {
    lineTo(size.width - cutCornerSize.toPx(), 0f)
    lineTo(size.width, cutCornerSize.toPx())
    lineTo(size.width, size.height)
    lineTo(0f, size.height)
    close()
}

我们确保我们的cutCornerSize 使用toPx 方法转换为像素。size 是Canvas 的大小。

在上面的代码片断中。

第一行将取全宽并减去cutCornerSize 。
第二行将是要删除的那部分的大小（cutCornerSize）。
第三行将是一个从第二行小的地方连接起来的线。
第四行将水平运行，这将是完整的，与第一行不同。
然后我们使用close 方法关闭我们的路径。

一旦路径完成，将其传递给clipPath 方法。

clipPath(path) {
    drawRoundRect(
        color = Color(color),
        size = size,
        cornerRadius = CornerRadius(cornerRadius.toPx())
    )

    drawRoundRect(
        color = Color(ColorUtils.blendARGB(color.toInt(), 0x000000, 0.2f)),
        topLeft = Offset(size.width - cutCornerSize.toPx(), -100f),
        size = Size(cutCornerSize.toPx() + 100f, cutCornerSize.toPx() + 100f),
        cornerRadius = CornerRadius(cornerRadius.toPx())
    )
}

clipPath 外的任何东西都将被切断。

在clipPath ，我们画出两个矩形，大的那个，和另一个小的矩形。大的矩形将采取我们的Canvas的大小。

较小的矩形画在大矩形被切断的那部分上。然后，我们从外面切下矩形的一半。我们使矩形的颜色与卡片的颜色相同，但要使它的颜色更深一些，方法是将 "Composable "的颜色与黑色按 "0.2f "的比例混合。

对于左上角，我们将其偏移，以使矩形的上端角不被看到。对于尺寸，我们确保它是cutCornerSize 的尺寸，但我们添加100f ，因为我们已经偏移了。

第5步 - 在卡片内添加项目

在Canvas ，我们可以添加任何我们想要的可合成物。在本教程中，我们将在一个Column 内添加两个Text 的组合物。一个代表标题，另一个代表描述。

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
) {
    Text(
        text = "Compose is Awesome",
        style = MaterialTheme.typography.h6,
        color = Color.White
    )

    Text(
        text = "Lorem ipsum dolor sit amet...",
        style = MaterialTheme.typography.body1,
        color = Color.White
    )
}

最后，我们可以通过传递一个颜色作为参数来使用我们的卡片。

setContent {
    FlippedCardDemoTheme {
        Surface(color = MaterialTheme.colors.background) {
            FlippedCardDemoTheme {
                FlippedCard(color = 0xff91a4fc)
            }
        }
    }
}

在某些情况下，你可以有一个LazyColumn ，使用FlippedCard 来显示一个项目列表。

演示

运行该项目后，你会看到像这样的东西。

demo

结语

在本教程中，我们学习了什么是 Canvas，如何使用 Drawscope 进行图形操作，使用 lineTo 方法画线来完成 Path，使用 clipPath 来删除 Canvas 中不需要的部分，绘制圆形矩形，最后，我们使用这些概念创建了一个 FlippedCard 组合。继续探索更多关于Compose中图形的力量。

如何在Android Jetpack Compose中创建一个翻转的盒子卡