CapDrive
Руководство

Image

Отображает изображение из ресурса датчика, например логотип, декоративный фон или текстуру плитки. source Используйте имя ресурса, чтобы установить метод масштабирования, обрезки или повторения в соответствии с доступными размерами.

Пример

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Использование

  • source — изображение в пакете. original сохраняет цвета; template окрашивает через color. repeatMode размножает изображение, не детей. contentMode управляет обычным масштабированием.
  • Числовые размеры — в пунктах. auto измеряет содержимое, fill использует выделенное место. Сначала задайте контейнер: fill и длинный текст не расширяют фиксированного родителя.

Свойства

sourcestring

Имя файла изображения в ресурсах прибора, не имя SF Symbols.

Пример""
contentMode?"fit" | "fill" | "stretch"

fit показывает всё; fill заполняет с обрезкой; stretch меняет пропорции.

Пример"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Повтор в исходном размере: repeat по двум осям, repeatX/repeatY по одной, none без повтора.

Пример"none"
renderingMode?"original" | "template"

original сохраняет цвета; template окрашивает через color.

Пример"original"
color?Paint

Цвет рисования, включая цвета HDR.

ПримерHDR($env.foreground)
contentAnimation?ContentAnimation

Переход при изменении содержимого. Выберите поддерживаемый type; duration/delay в секундах.

Пример{type: "fade", duration: 0.25}
Общие свойства
width?number | "auto" | "fill"

Ширина в пунктах, автоматический размер или заполнение родителя.

Пример100
height?number | "auto" | "fill"

Высота в пунктах, автоматический размер или заполнение родителя.

Пример80
padding?number

Внутренний отступ содержимого в пунктах.

Пример0
x?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0
y?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0
transform?ViewTransform

Преобразование всего View без изменения раскладки. Сдвиг в пунктах, поворот/наклон в градусах, масштаб 1 без изменений, якоря 0–1.

Пример{rotation: 0}
background?Paint

Цвет или градиент фона; clear означает прозрачность.

Пример"clear"
opacity?number

Непрозрачность всего View: 0 прозрачно, 1 непрозрачно.

Пример1
cornerRadius?number

Радиус скругления в пунктах.

Пример0
clipped?boolean

Обрезать рисунок за границами View.

Примерfalse
clip?"rectangle" | "ellipse"

Форма обрезки rectangle или ellipse; Material также принимает false для отключения.

Пример"rectangle"
mask?View | null

View альфа-маски. По центру без влияния на компоновку; null отключает маску.

Пример<Circle width="fill" height="fill" background="white"/>
zIndex?number

Порядок среди соседей; большее значение выводится впереди.

Пример0
blur?number

Радиус размытия в пунктах; 0 отключает его.

Пример4
innerShadow?DrawingEffect

Цвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.

Пример{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Цвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.

Пример{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Цвет внешней тени.

ПримерHDR("black")
shadowOpacity?number

Непрозрачность тени 0–1; 0 скрывает её.

Пример0
shadowRadius?number

Радиус размытия внешней тени в пунктах.

Пример4
shadowX?number

Смещение тени в пунктах: x вправо, y вниз.

Пример0
shadowY?number

Смещение тени в пунктах: x вправо, y вниз.

Пример2
animations?Animation[]

Анимация изменения свойства. duration/delay в секундах; from/to — границы; repeat/autoreverse — повторы, wrap — период.

Пример[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Стабильный идентификатор среди соседних элементов.

Практический пример

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Анимация

Анимация

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

При пропуске

Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.

СвойстваПри пропуске
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Предыдущее

Group

Следующий шаг

На этой странице

ПримерИспользованиеСвойстваПрактический примерАнимацияПри пропускеСвязанные API