修饰符

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

Jetpack Compose 修饰符允许你自定义 UI 组件的布局、外观和行为。修饰符相当于 Compose 中的样式属性 —— 它们控制尺寸、内边距、背景、交互等更多内容。

安装

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

用法

修饰符通过带有数组语法的 modifiers 属性应用到组件上。你可以组合多个修饰符来创建复杂的样式和行为。修饰符会按照它们在数组中出现的顺序依次应用，这可能会影响最终结果（例如，先应用 padding 再应用 background，与反过来应用会产生不同结果）。

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 }}>
      {/* 基础样式修饰符 */}
      <Button modifiers={[paddingAll(16), fillMaxWidth(), background('#FF6B6B')]}>
        全宽内边距按钮
      </Button>

      {/* 带有边框和阴影的复杂组合 */}
      <Button modifiers={[paddingAll(12), background('#4ECDC4'), border(2, '#2C3E50'), shadow(4)]}>
        带边框和阴影的样式按钮
      </Button>
    </Host>
  );
}

内边距

控制组件内容周围的间距。

paddingAll(all)

在四个方向应用相同的内边距。

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

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

padding(start, top, end, bottom)

为每一侧分别应用内边距。

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

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

尺寸

控制组件的尺寸。

size(width, height)

为组件设置精确尺寸。

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

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

fillMaxSize(fraction?)

在两个维度上填充所有可用空间。

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

<Button modifiers={[fillMaxSize()]}>填满所有空间</Button>
<Button modifiers={[fillMaxSize(0.5)]}>填满一半</Button>

fillMaxWidth(fraction?)

填充可用宽度。

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

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

fillMaxHeight(fraction?)

填充可用高度。

width(value)

设置精确宽度。

height(value)

设置精确高度。

wrapContentWidth(alignment?)

将组件尺寸设为包裹其内容宽度。

wrapContentHeight(alignment?)

将组件尺寸设为包裹其内容高度。

位置

控制组件相对于其自然位置的位置。

offset(x, y)

在不影响周围组件布局的情况下，将组件从其自然位置偏移。

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

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

外观

控制组件的视觉外观。

background(color)

设置背景颜色。

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

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

border(borderWidth, borderColor)

在组件周围添加边框。

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

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

shadow(elevation)

在组件下方添加海拔阴影。

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

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

alpha(alpha)

控制组件的不透明度。

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

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

blur(radius)

为组件应用模糊效果。

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

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

变换

对组件应用视觉变换。

rotate(degrees)

旋转组件。

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

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

zIndex(index)

控制重叠组件的绘制顺序。

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

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

动画

为组件内的布局变化添加动画。

animateContentSize(dampingRatio?, stiffness?)

使用弹簧动画为组件内容的尺寸变化添加动画。

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

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

布局

控制组件在其父容器中的尺寸和位置。

weight(weight)

在 Row 或 Column 内为组件分配灵活权重，在带权重的子项之间按比例分配可用空间。

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

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

align(alignment)

设置组件在其父容器中的对齐方式。

matchParentSize()

将组件尺寸设为与其父 Box 相同。与 fillMaxSize 不同，这不会影响父级的测量。

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

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

交互

为组件添加用户交互处理器。

clickable(handler)

使组件响应点击事件。

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

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

selectable(selected, handler)

使组件可被选择，类似单选按钮。

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

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

裁剪

将组件内容裁剪为特定形状。

clip(shape)

将组件裁剪为给定形状。形状边界之外的内容不会被绘制。

可用形状

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

// Circular clipping
<Button modifiers={[clip(Shapes.Circle)]}>Circle</Button>

// Rounded corners with uniform radius
<Button modifiers={[clip(Shapes.RoundedCorner(12))]}>Rounded</Button>

// Rounded corners with individual radii
<Button
  modifiers={[
    clip(Shapes.RoundedCorner({ topStart: 16, topEnd: 16, bottomStart: 0, bottomEnd: 0 })),
  ]}>
  仅顶部圆角
</Button>

// Cut corners
<Button modifiers={[clip(Shapes.CutCorner(8))]}>Cut corners</Button>

工具

testID(tag)

为组件分配一个测试标识符，以便在 UI 测试中使用。

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

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

API

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

Constants

clip(Shapes.Circle)
clip(Shapes.RoundedCorner(16))
clip(Shapes.RoundedCorner({ topStart: 8, bottomEnd: 16 }))
clip(Shapes.Material.Heart)

Methods

Types