我怎么能在 Jetpack Compose 中制作這樣的視圖？

Question

在此處輸入圖像描述

我仍然對在 Jetpack Compose 中使用組件視圖感到困惑，請幫助我制作這個。 謝謝

我試過了，但它不像 figma 中的當前視圖

Answer 1

Card(modifier = Modifier
    .fillMaxWidth()
    .padding(horizontal = 20.dp)
    .wrapContentHeight(), elevation = 8.dp,
    shape = RoundedCornerShape(25.dp)
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 4.dp)
            .wrapContentHeight(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {

        Image(painter = painterResource(id = R.drawable.ic_points_star_icon), modifier = Modifier
            .padding(vertical = 8.dp)
            .size(60.dp), contentDescription = "")

        Column(modifier = Modifier
            .weight(1f)
            .padding(vertical = 8.dp), horizontalAlignment = Alignment.Start) {
            Text(text = "Heading Text", style = AppTheme.typography.boldHeaderStyle)
            Text(text = "This is sample body text", color = textColor.copy(0.4f), style = AppTheme.typography.captionTextStyle)
        }
        Button(
            onClick = { /*Your on Click*/ },
            shape = RoundedCornerShape(5.dp),
            elevation = ButtonDefaults.elevation(
                defaultElevation = 0.dp,
                pressedElevation = 0.dp,
                disabledElevation = 0.dp,
                hoveredElevation = 0.dp,
                focusedElevation = 0.dp,
            ),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = BackArrowTint.copy(0.6f),
                contentColor = Color.White
            ),
            modifier = Modifier
                .wrapContentHeight()
                .padding(horizontal = 4.dp),
        ) {
            Text(
                text = "Buy Ticket",
                modifier = Modifier.padding(vertical = 2.dp, horizontal = 4.dp),
                color = White,
                style = AppTheme.typography.buttonStyle,
            )
        }
    }
}

樣本圖片：