Jetpack compose ui：如何創建cardview？

Question

我想使用 jetpack compose 創建 Cardview，但找不到任何示例。

Answer 1

使用1.0.0 ，您可以使用以下內容：

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

Answer 2

這是使用 Jetpack Compose 的 cardview 示例

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            demoApp()
        }
    }

    @Composable
    fun demoApp() {
        MaterialTheme {
            Container {
                cardDemo()
            }
        }
    }

    @Composable
    private fun cardDemo() {
        val shape = RoundedCornerShape(10.dp)
        Card(shape = shape, elevation = 10.dp) {
            Padding(padding = 10.dp) {
                Container {
                    Text("Card View Demo", style = TextStyle(color = Color.Black))
                }
            }
        }
    }
}

Answer 3

在v0.1.0-dev09版本中，可以這樣做，其中Card的 padding 設置卡片的邊距， Box的 padding 設置卡片內部的填充。

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 4

正如朋友們所推薦的， Card是一種創建CardView的方式，但你也可以通過表面來實現：

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

請注意， Surface和Card不能用於定位項目，因此如果您想要 position that 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 （注意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 5

就像使用 UI

Card(){
 // your UI Components
}

Answer 6

代碼：

    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)
                )
            }
        }
    }
}

---