简体   繁体   中英

How to implement modern Card component (a'la Material Design 3.0) in Jetpack Compose

How can I implement using Compose these modern, subtle Card components, seen in updated Google apps?

They don't have border, they are a little bit elevated, with a subtle shadow behind. I tried fiddling with modifiers on standard Card, but didn't come close to this result.

Similar versions of them (elevated Filled ?) appear on Material Design 3.0 docs , but its implementation is not yet available for Compose.

All those features are already built into Compose Material. There is nothing you need to do. All those widgets and features are already implemented. This has all been well documented on the official Compose site. See:

Material Components and layouts

androidx.compose.material

I cannot see much differences with previous card. Maybe the border radius and the elevation are higher. In the image you posted looks like they are using a background color similar to the shadow color to reduce contrast.

Anyway here you can find the new Material Design 3 for Compose: https://developer.android.com/jetpack/androidx/releases/compose-material3

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM