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>
  );
}