卡片

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

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