Jetpack Composes 学习【08】card

Card

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
)      

​

​Card​

​ 是 Compose 中一个布局组件，我们用它可以来创造出一些类似于卡片界面，相当于一个容器，我们可以在card中放置一个composable。，我们可以使用卡片显示阴影效果。我们可以添加圆角半径的边框。

如果你是 Android 开发者，它就是CardView。

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material.*

import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview


import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp

import com.example.composestudy.ui.theme.ComposestudyTheme


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                CardDemo()
            }
        }
    }
}

data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)


@Composable
fun ButtonDemo() {
    // 获取按钮的状态
    val interactionState = remember { MutableInteractionSource() }

// 使用 Kotlin 的解构方法
    val (text, textColor, buttonColor) = when {
        interactionState.collectIsPressedAsState().value  -> ButtonState("按钮1", Color.Red, Color.Black)
        else -> ButtonState( "按钮", Color.White, Color.Red)
    }
    Button(
        onClick = { /*TODO*/ },
        interactionSource = interactionState,
        elevation = null,
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = buttonColor,
        ),
        modifier = Modifier.width(IntrinsicSize.Min).height(IntrinsicSize.Min)
    ) {
        Text(
            text = text, color = textColor
        )
    }
}
@Composable
fun CardDemo() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(15.dp) // 外边距
            .clickable{ },

        // 设置点击波纹效果，注意如果 CardDemo() 函数不在 MaterialTheme 下调用
        // 将无法显示波纹效果

        elevation = 10.dp // 设置阴影
    ) {
        Column(
            modifier = Modifier.padding(15.dp) // 内边距
        ) {
            Text(
                buildAnnotatedString {
                    append("大前端之旅 ")
                    withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color(0xFF4552B8),)
                    ) {
                        append("欢迎你的到来")
                    }
                }
            )
            Text(
                buildAnnotatedString {
                    append("你现在观看的是 ")
                    withStyle(style = SpanStyle(fontWeight = FontWeight.W900)) {
                        append("Card的使用方法")
                    }
                }
            )
        }
    }
}


@Preview(name = "Light Mode")

@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {

        CardDemo()
    }
}      

带形状的卡片：

我们可以设置卡片背景的形状。如果我们没有提供，它将采用具有 4dp 半径的 RoundedCornerShape。您可以使用以下形状，

• 矩形形状
• 圆形
• 圆角形状
• 切角形状

@Composable
fun CardWithShape() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(shape = RoundedCornerShape(20.dp),elevation = 10.dp, modifier = paddingModifier) {
        Text(text = "Round corner shape", modifier = paddingModifier)
    }
}      

带边框的卡片：

我们使用border属性，我们需要为border属性设置BorderStroke。BorderStroke 有两个参数，第一个是宽度大小，另一个是边框颜色。

@Composable
fun CardWithBorder() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(
        elevation = 10.dp,
        border = BorderStroke(1.dp, Color.Blue),
                modifier = paddingModifier
        ) {
        Text(text = "Card with blue border", modifier = paddingModifier)
    }      

多视图：

卡片仅支持一种可组合功能。如果您想在同一张卡片中使用多个小部件，您应该使用其他布局组合功能，例如 Column、Row、ConstraintLayout

@Composable
fun CardWithMultipleViews() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(
        elevation = 10.dp,
        modifier = paddingModifier
    ) {
        Column(modifier = paddingModifier) {
            Text(text = "First Text")
            Text(text = "Second Text")
        }
    }
}      

内容颜色：

@Composable
fun CardWithContentColor() {
    val paddingModifier = Modifier.padding(10.dp)
    Card(
        elevation = 10.dp,
        contentColor = Color.Blue,
        modifier = paddingModifier
    ) {
        Column() {
            Text(text = "Text with card content color (Blue)",
                modifier = paddingModifier)
            Text(text = "Text with card custom color",
                color = Color.Black,
                modifier = paddingModifier)

        }
    }
}      

更多