This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

卡片

一个用于在样式化容器中显示内容的 Jetpack Compose 卡片组件。

Android

GitHub

npm

更新日志

Expo UI Card 与官方 Jetpack Compose Card API 一致，它会在一个带样式的表面容器中显示内容，并可选择是否带有 elevation 和轮廓。Card 组件会渲染一个 filled card，而 ElevatedCard 和 OutlinedCard 分别提供带阴影提升和带边框的变体。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基础卡片

BasicCardExample.tsx

import { Host, Card, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicCardExample() {
  return (
    <Host matchContents>
      <Card>
        <Text modifiers={[paddingAll(16)]}>这是一个带默认样式的基础卡片。</Text>
      </Card>
    </Host>
  );
}

卡片类型

使用 Card（filled）、ElevatedCard 或 OutlinedCard 来获得不同样式。

CardTypesExample.tsx

import { Host, Card, ElevatedCard, OutlinedCard, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function CardTypesExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 12 }}>
        <Card>
          <Text modifiers={[paddingAll(16)]}>填充卡片</Text>
        </Card>
        <ElevatedCard>
          <Text modifiers={[paddingAll(16)]}>带阴影提升的卡片</Text>
        </ElevatedCard>
        <OutlinedCard>
          <Text modifiers={[paddingAll(16)]}>带轮廓的卡片</Text>
        </OutlinedCard>
      </Column>
    </Host>
  );
}

自定义 elevation

使用 elevation 属性（单位为 dp）来控制阴影深度。elevation 在 ElevatedCard 上最有意义，因为它使用的是阴影 elevation。填充型 Card 默认使用色调 elevation，因此变化可能比较细微。

ElevatedCardExample.tsx

import { Host, ElevatedCard, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function ElevatedCardExample() {
  return (
    <Host matchContents>
      <ElevatedCard elevation={8}>
        <Text modifiers={[paddingAll(16)]}>具有 8dp elevation 的卡片</Text>
      </ElevatedCard>
    </Host>
  );
}

自定义边框

Card 和 OutlinedCard 接受 border 属性，用于自定义描边宽度和颜色。

OutlinedCardExample.tsx

import { Host, OutlinedCard, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function OutlinedCardExample() {
  return (
    <Host matchContents>
      <OutlinedCard border={{ width: 2, color: '#6200EE' }}>
        <Text modifiers={[paddingAll(16)]}>带自定义紫色边框的卡片</Text>
      </OutlinedCard>
    </Host>
  );
}

API

import { Card, ElevatedCard, OutlinedCard } from '@expo/ui/jetpack-compose';

Components

`Card`

Android

Type: React.Element<ComponentType<CardProps>>

A card component that renders a filled card surface for content.

CardProps

`border`

Android

Optional • Type: CardBorder

Border configuration for the card.

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the card.

`colors`

Android

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Android

Optional • Type: number

Default elevation in dp.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`ElevatedCard`

Android

Type: React.Element<ComponentType<ElevatedCardProps>>

An elevated card component that provides a raised surface for content.

ElevatedCardProps

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the card.

`colors`

Android

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Android

Optional • Type: number

Default elevation in dp. Material 3 default is 1dp.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`OutlinedCard`

Android

Type: React.Element<ComponentType<OutlinedCardProps>>

An outlined card component that provides a bordered surface for content.

OutlinedCardProps

`border`

Android

Optional • Type: CardBorder

Border configuration for the outlined card.

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the card.

`colors`

Android

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Android

Optional • Type: number

Default elevation in dp.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

Types

`CardBorder`

Android

Border configuration for cards.

Property	Type	Description
color(optional)	`ColorValue`	Border color.
width(optional)	`number`	Border width in dp. Default:`1`

`CardColors`

Android

Colors for card's core elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-