修饰符

import { Button, Host } from '@expo/ui/jetpack-compose';
import {
  paddingAll,
  fillMaxWidth,
  background,
  border,
  shadow,
  clickable,
} from '@expo/ui/jetpack-compose/modifiers';

function ModifiersExample() {
  return (
    <Host style={{ flex: 1 }}>
      {/* Basic styling modifiers */}
      <Button
        modifiers={[
          paddingAll(16),
          fillMaxWidth(),
          background('#FF6B6B'),
        ]}>
        Full-width padded button
      </Button>

      {/* Complex combination with border and shadow */}
      <Button
        modifiers={[
          paddingAll(12),
          background('#4ECDC4'),
          border(2, '#2C3E50'),
          shadow(4),
        ]}>
        Styled with border and shadow
      </Button>
    </Host>
  );
}

import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[paddingAll(16)]}>带内边距的按钮</Button>;

import { padding } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[padding(16, 8, 16, 8)]}>自定义内边距</Button>;

import { size } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[size(200, 48)]}>固定尺寸</Button>;

import { fillMaxSize } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[fillMaxSize()]}>填充全部空间</Button>
<Button modifiers={[fillMaxSize(0.5)]}>填充一半</Button>

import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[fillMaxWidth()]}>全宽</Button>;

import { offset } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[offset(10, 5)]}>偏移按钮</Button>;

import { background } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[background('#3498DB')]}>
  蓝色背景
</Button>;

import { border } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[border(2, '#E74C3C')]}>带边框的按钮</Button>;

import { shadow } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[shadow(8)]}>有阴影的按钮</Button>;

import {
  dropShadow,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

<Button
  modifiers={[
    dropShadow(Shapes.RoundedCorner(24), {
      radius: 16,
      spread: 4,
      color: '#6200EE',
      offsetY: 8,
    }),
  ]}>
  投影
</Button>;

import {
  innerShadow,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

<Button
  modifiers={[
    background('#FFFFFF'),
    innerShadow(Shapes.RoundedCorner(24), {
      radius: 16,
      spread: 2,
      offsetY: 6,
    }),
  ]}>
  内阴影
</Button>;

import { alpha } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[alpha(0.5)]}>半透明</Button>;

import { blur } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[blur(4)]}>模糊按钮</Button>;

import {
  background,
  cornerRadius,
} from '@expo/ui/jetpack-compose/modifiers';

<Box modifiers={[cornerRadius(12), background('#3498DB')]} />;

import {
  dropShadow,
  border,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

<Box
  modifiers={[
    dropShadow(Shapes.Rectangle, {
      radius: 0,
      spread: 0,
      offsetX: 8,
      offsetY: 8,
      color: '#000000',
    }),
    border(8, '#000000'),
    background('#FFFFFF'),
  ]}
/>;

import {
  dropShadow,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

const shape = Shapes.RoundedCorner(24);

<Box
  modifiers={[
    dropShadow(shape, {
      radius: 15,
      offsetX: -10,
      offsetY: -10,
      color: '#FFFFFF',
    }),
    dropShadow(shape, {
      radius: 15,
      offsetX: 10,
      offsetY: 10,
      color: '#B1B1B1',
    }),
    background('#E0E0E0'),
  ]}
/>;

import { rotate } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[rotate(45)]}>已旋转</Button>;

import { zIndex } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[zIndex(10)]}>位于顶层</Button>;

import { animateContentSize } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[animateContentSize()]}>带动画的尺寸</Button>
<Button modifiers={[animateContentSize(0.5, 200)]}>自定义弹簧</Button>

import { weight } from '@expo/ui/jetpack-compose/modifiers';

// 在 Row 中，第一个按钮占 2/3，第二个占 1/3
<Button modifiers={[weight(2)]}>更宽</Button>
<Button modifiers={[weight(1)]}>更窄</Button>

import { matchParentSize } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[matchParentSize()]}>匹配父容器</Button>;

import { clickable } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[clickable(() => console.log('Clicked!'))]}>
  可点击
</Button>;

import { Text } from '@expo/ui/jetpack-compose';
import { combinedClickable } from '@expo/ui/jetpack-compose/modifiers';

<Text
  modifiers={[
    combinedClickable({
      onClick: () => console.log('Tapped'),
      onLongClick: () => setMenuExpanded(true),
    }),
  ]}>
  长按我
</Text>;

import { selectable } from '@expo/ui/jetpack-compose/modifiers';

<Button
  modifiers={[
    selectable(isSelected, () => setIsSelected(!isSelected)),
  ]}>
  可选项
</Button>;

import { clip } from '@expo/ui/jetpack-compose/modifiers';
import { Shapes } from '@expo/ui/jetpack-compose/modifiers';

// 圆形裁剪
<Button modifiers={[clip(Shapes.Circle)]}>圆形</Button>

// 统一半径的圆角
<Button modifiers={[clip(Shapes.RoundedCorner(12))]}>圆角</Button>

// 各角半径不同的圆角
<Button
  modifiers={[
    clip(Shapes.RoundedCorner({ topStart: 16, topEnd: 16, bottomStart: 0, bottomEnd: 0 })),
  ]}>
  仅顶部圆角
</Button>

// 切角
<Button modifiers={[clip(Shapes.CutCorner(8))}>切角</Button>

import { testID } from '@expo/ui/jetpack-compose/modifiers';

<Button modifiers={[testID('submit-button')]}>提交</Button>;

import { semantics } from '@expo/ui/jetpack-compose/modifiers';

// 可见标签是缩写；TalkBack 会读出完整短语。
<Text modifiers={[semantics({ contentDescription: '1 week' })]}>
  1W
</Text>;

import { paddingAll, padding, size, fillMaxWidth, background, clickable, clip, Shapes } from '@expo/ui/jetpack-compose/modifiers';