Color / Gradient

Обычно используемые методы записи включают названия цветов, шестнадцатеричные цвета и объекты { r, g, b, a }. Компоненты RGB и прозрачность используют значения 0–1, clear означает прозрачный. $env.foreground и $env.accent предоставляют общие цвета, которые переключаются в зависимости от темы.

HDR(color) добавляет тег HDR к цветовой строке. Явно заполненными нормальными цветами остаются SDR; например, color={$env.foreground} не будет автоматически расширен и может быть записан как color={HDR($env.foreground)}, если требуется выделение. Поведение по умолчанию, когда атрибут цвета опущен, показано в таблице ниже.

Если цвет рисования не указан, следующие цвета по умолчанию отмечаются HDR.

Фон контейнера остается прозрачным. Изображения, карты и системные материалы в основных цветах сохраняют свои собственные цвета и отображение. Явно заданные нормальные цвета, градиентные цветовые шкалы и палитры символов не преобразуются в HDR целиком, а цвета, требующие улучшения, следует отмечать отдельно.

Флаг HDR не гарантирует фактическую яркость. Для улучшения требуется iOS 26 или новее, поддерживаемые экраны, режим HUD и включение улучшения HDR; на фактические результаты также влияет текущая среда отображения. Обычный режим инструмента, предварительный просмотр в редакторе и экспортированный PNG используют обычный диапазон отображения, и предварительный просмотр не может использоваться для оценки фактического эффекта выделения.

В следующих трех строках цвет опущен, явно используется обычный цвет и явно отмечен цвет выделения. В предварительном просмотре он может выглядеть так же, но разница в улучшениях становится очевидной после входа в среду HUD, которая поддерживает HDR.

function main() {
  return (
    <VStack spacing={8}>
      <Text fontSize={22}>Default HDR</Text>
      <Text fontSize={22} color={$env.foreground}>
        Explicit SDR
      </Text>
      <Text fontSize={22} color={HDR($env.accent)}>
        Explicit HDR
      </Text>
    </VStack>
  );
}

LinearGradient изменяется по прямой линии, RadialGradient распространяется от центра, а AngularGradient изменяется под углом вокруг центра. При построении вы можете передать массив цветов или массив цветов с помощью color и location. Используйте значения 0–1 для местоположения цветового пятна и координат центра, точки для радиального радиуса и градусы для углов.

Созданный градиент можно передать в background, stroke и другие атрибуты, поддерживающие Paint. Атрибуты, которые принимают только Color, по-прежнему должны использовать один цвет. Конкретные доступные типы зависят от определения атрибута.

Линейный фон, радиальная заливка, угловая обводка и текст HDR показаны ниже соответственно.

function main() {
  return (
    <VStack spacing={12}>
      <Rectangle
        height={48}
        background={LinearGradient(['#B9E883', '#30B3A2'], { angle: 30 })}
      />
      <Circle
        width={100}
        height={100}
        background={RadialGradient(['white', '#30B3A2'])}
      />
      <Circle
        width={100}
        height={100}
        stroke={AngularGradient(['#B9E883', '#30B3A2', '#B9E883'])}
        lineWidth={8}
        background="clear"
      />
      <Text color={HDR('white')}>CapDrive</Text>
    </VStack>
  );
}