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

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 prop 应用于组件。你可以组合多个修饰符来创建复杂的样式和行为。修饰符会按照它们在数组中出现的顺序应用，这可能会影响最终结果（例如，先应用 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';

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

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

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

// 切角
<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')]}>Submit</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

Interfaces

Types