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)

        }
    }
}      

更多