Jetpack compose ui: как создать cardview?

Question

Я хочу создать Cardview с помощью Jetpack Compose, но я не могу найти ни одного примера.

https://stackru.com/images/b59c2df2667394ca8050df6c8117463f9f4ab6c6.png

Заранее спасибо.

Answer 1

С 1.0.0-alpha01 вы можете использовать что-то вроде:

Card(
    shape = RoundedCornerShape(8.dp),
    backgroundColor = MaterialTheme.colors.surface,
    ) {
    Box(
        padding = 16.dp,
        modifier = Modifier.height(200.dp),
        gravity = Alignment.Center
    ){
        Text(text = "This is a card view",
            style = MaterialTheme.typography.h4)
    }
}

Answer 2

В v0.1.0-dev09 версии, можно сделать так, где заполнение Card устанавливает поле карты, заполнение Box устанавливает отступ внутри карты.

Card(
  shape = RoundedCornerShape(8.dp), 
  modifier = Modifier.padding(16.dp).fillMaxWidth()
) {
  Box(modifier = Modifier.height(200.dp).padding(16.dp)) {
    Text("This is a card view")
  }
}

Скриншот карты

Answer 3

Как рекомендовали друзья, это способ творить, но вы можете сделать это и на поверхности:

      val shape = RoundedCornerShape(10.dp)
Surface(modifier = Modifier.size(250.dp, 70.dp), elevation = 8.dp, shape = shape) {
      Text(text = "Sample text")
}

Обратите внимание, что и Card не может использоваться для позиционирования элементов, так что если вы хотите разместить это Text(text = "Sample text") , вы должны использовать один макет внутри этого Surface нравится :

      val shape = RoundedCornerShape(10.dp)
Surface(modifier = Modifier.size(250.dp, 70.dp), elevation = 8.dp, shape = shape) {
    Box(modifier = Modifier.fillMaxSize()) {
          Text(modifier = Modifier.align(Alignment.Center), text = "Sample text")
    }
}

Подходящий способ создания CardView это так, но если вы хотите просто создать тень для вида, вы можете использовать (Обратите внимание, что Modifier.shadow а также Surface/Card не то же самое):

      Box(modifier = Modifier.size(250.dp, 70.dp).shadow(8.dp, RoundedCornerShape(10.dp)), contentAlignment = Alignment.Center) {
        Text(text = "Sample Text")
}

Answer 4

Код :

          class ImageCardActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val painter = painterResource(id = R.drawable.grogu)
            val contentDescription = "Grogu says hi"
            val title = "Force is strong with Grogu"

            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(
                    modifier = Modifier.fillMaxWidth(0.5f)
                ) {
                    ImageCard(
                        title = title,
                        contentDescription = contentDescription,
                        painter = painter
                    )
                }
            }
        }
    }
}

@Composable
fun ImageCard(
    title: String,
    contentDescription:String,
    painter: Painter,
    modifier:Modifier=Modifier
){
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(18.dp),
        elevation = 5.dp
    ) {
        Box(
            modifier = Modifier.height(200.dp)
        ) {
            // Image
            Image(
                painter = painter,
                contentDescription = contentDescription,
                contentScale = ContentScale.Crop
            )
            // Gradient
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(
                        brush = Brush.verticalGradient(
                            colors = listOf(
                                Color.Transparent, Color.Black
                            ),
                            startY = 300f
                        )
                    )
            )
            // Title
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(12.dp),
                contentAlignment = Alignment.BottomStart
            ) {
                Text(
                    text = title,
                    style = TextStyle(color = Color.White, fontSize = 12.sp)
                )
            }
        }
    }
}

---