Liquid Glass Easy

الزجاج الخفيف

المادة بلا شيدر: صقيع ولون وحافة، ولا شيء يُترجَم.

تأخذ العدسة مظهرها من شيدر أجزاء: كل بكسل يقيس بعده عن الشكل، ويقرأ الخلفية تحته، ويحنيها، ويضيء نفسه. أما الزجاج الخفيف فيتخلى عن الحني — النصف الذي يحتاج شيدراً — ويحتفظ بكل ما عداه: الصقيع واللون وحافةً يضيئها النموذج نفسه الذي يشغّله الشيدر، محسوباً في جهة Dart ومرسوماً كشبكة مثلثات واحدة من هندسة اللوحة العادية. لا FragmentProgram، ولا شيء يُسخَّن، ولا التقاط على Skia، ولا مقعد في ميزانية العدسات على Impeller.

ثلاثة مداخل#

مادة واحدة لها ثلاثة أبواب: اقلب التطبيق كله، أو اقلب عدسة واحدة، أو استعمل العنصر مباشرةً على سطح لم يكن عدسة قط.

Dart
// 1. Every lens in the app — set once, before the first lens builds.
LiquidGlassEngine.liteGlassOnSkia = true;      // Skia and the web
LiquidGlassEngine.liteGlassOnImpeller = true;  // Impeller

// 2. This lens only, on either engine — the value is its rim's pickup.
LiquidGlassLens(
  style: const LiquidGlassStyle(liteGlass: LiquidGlassLitePickup.backdrop),
  child: child,
)

// 3. The widget itself, for a card, a row, a sheet.
LiquidGlassLite(
  shape: const LiquidGlassShape(cornerRadius: 22, borderWidth: 1.5),
  blur: const LiquidGlassBlur(sigmaX: 3, sigmaY: 3),
  color: const Color(0x33FFFFFF),
  child: child,
)

ومع تشغيل مفتاح المحرك لا يلتقط LiquidGlassView أي لقطة زجاج إطلاقاً — فالمعاين التكيفي ليس التقاطاً ويظل يعمل — وترسم كل عدسة تحته زجاجاً خفيفاً، وهو ما ترسمه العدسة خارج أي عارض أصلاً. وهذا هو السبيل لوضع المادة على صفحة فيها من العدسات ما يفوق طاقة الشيدر، أو على جهاز لا وقت لديه له، دون أن تمسّ عدسة واحدة.

ما تحتفظ به العدسة#

تحتفظ العدسة المرسومة خفيفةً بـshape وبـcolor وblur وshadow من مظهرها، وبـmagnification من انكسارها كتكبير مسطّح داخل مرشّح الصقيع نفسه. ويذهب نطاق التشويه والزيغ اللوني وحني الحافة — فلا انكسار في أي وضع. وتبقى الحافة بالأرقام نفسها: borderWidth وlightColor وlightDirection وlightIntensity ومعاملات OpticalBorder أو ClassicBorder تعني ما تعنيه على عدسة حقيقية. والصورة الظلية هي المحيط الذي تُقصّ العدسة عليه، فتُستنسَخ أنماط الزوايا الثلاثة بدقة.

ما يظل يعمل، وما لا يعمل#

يغيّر الزجاج الخفيف كيف تُرسَم العدسة، لا ما تفعله الشجرة حولها. فكل ما لم يحتج الشيدر قط يظل يعمل، والشيئان اللذان هما الشيدر نفسه لا.

ماذاتحت الزجاج الخفيف
كل العناصرتعمل كما هي، بلا انكسار. فالمزلاج والمفتاح والزر وزر الإجراء العائم وشريط التطبيق وشريط التبويبات والحوار والورقة والسقالة والقابل للسحب وحبة الحركة تحتفظ كلها بسلوكها وحركتها وظلها؛ وزجاجها صقيع ولون وحافة. ويصلح pillStyle.mode: both في شريط التبويبات على Skia هنا، إذ لا التقاط يُضاعَف.
touch / LiquidGlassFlexيعمل. فانتفاخ الضغط وتشوّه السحب يحجّمان المحيط الخفيف وابنه تماماً كما يحجّمان محيط الشيدر.
adaptivityتعمل. فالمعاين التكيفي ليس التقاط زجاج ويظل يعمل تحت مفتاح المحرك، فيظل اللون والمحتوى ينقلبان مع الخلفية — على عدسة، وفي منطقة، وعبر رابط، وعلى أشرطة النظام في السقالة.
LiquidGlassScrollEdgeبلا تغيير. فالشريط لم يستعمل الشيدر قط.
appearance.shadowمحفوظ. يُرسَم ظل التلامس حول المحيط الخفيف كما يُرسَم حول محيط الشيدر.
LiquidGlassMorphيعمل كـ`plain`. عدسة واحدة ينبض محيطها من الشكل القديم إلى الجديد؛ ويُتجاهَل motion، ولا كتلة ثانية ولا عنق، لأن سطحين خفيفين لا يمكن دمجهما في واحد.
LiquidGlassBlenderلا يدمج. فلا مرور مدمَج: يرسم كل عضو وحده سطحاً خفيفاً خاصاً به، بمحيطه وقراءته. لا كرة معدنية ولا مادة مشتركة.
LiquidGlassBatchخامل. فلا مرور شيدر يُتقاسَم بين أعضائه قراءة؛ وكل صقيع خفيف مرشّح بذاته.
refractionذاهب، عدا `magnification`. فلا يفعل distortion وdistortionWidth وchromaticAberration ونوع الانكسار شيئاً؛ ويبقى magnification تكبيراً مسطّحاً داخل مرشّح الصقيع.
LiquidGlassShadersلا شيء يُترجَم. فـensureLoaded() غير مضرّ وغير لازم؛ ولا يأخذ LiquidGlassView أي التقاط زجاج.

من أين تأخذ الحافة لونها#

تعاين حافة الشيدر الخلفية تحت كل بكسل وتلوّن بريقها بها، فتكون الحافة فوق صورة حمراء حيث تعبر الأحمر وزرقاء حيث تعبر الأزرق. وpickup في LiquidGlassLite — وliteGlass في نمط العدسة، وهو القيمة نفسها — هو الجواب الخفيف على ذلك، وهو اختيار للكلفة:

LiquidGlassLitePickupالحافةالكلفة
noneضوء أبيض مرسوم فوق الابن. ما يعطيه الشيدر فوق خلفية محايدة.نداء drawVertices واحد
blendتُضاف فوق ما تحتها فيمرّ لونها، ثم يُضرب فيها lightColor وborderColor الخاصان بالحافة، فيكون الضوء الرمادي حافةً رمادية فوق الأبيض.أوضاع مزج، بلا قراءة
surfaceحافة blend مرسومة فوق السطح المكتمل — الصقيع واللون والابن — لا تحتها، فيلوّن الزجاجُ الملوَّن حافته، وتظهر التسمية الواقعة تحت الحافة على طولها.أوضاع مزج، بلا قراءة
backdropالافتراضي. تُقصّ من نسخة مضاءة من الخلفية، فيتفاوت اللون على طول الحافة كما في الشيدر. يجلس اللون تحتها والابن فوقها، ولا يدخل أيٌّ منهما في القراءة.قراءة خلفية واحدة

وambientColor هو السبيل الرابع، وهو مستقل عن الباقي: أعطِ العنصر لوناً واحداً — خلفية معاينة، أو ما يجلس عليه السطح — فيمرّ عبر حساب البريق الخاص بالشيدر نفسه، ملوِّناً الحافة كلها دفعةً واحدة. مجاناً، لكن بدرجة واحدة للمحيط كله، ولا تأخذه إلا الأوضاع المرسومة.

ما تكلّفه#

  • الصقيع قراءة خلفية واحدة. يمرّ الضباب والتكبير عبر مرشّح واحد، فإضافة التكبير إلى الضباب لا تضيف قراءة.
  • حافة `backdrop` قراءة ثانية. وبضباب صفر وتكبير واحد تكون تلك الحافة قراءةً واحدة، للحافة.
  • لا يقرأ `none` و`blend` و`surface` شيئاً. وبضباب صفر وتكبير واحد يكون العنصر كله نداء drawVertices واحداً — ضَع تعبئتك خلفه فيكاد يكون مجانياً. وهذا هو الشكل الذي تمدّ يدك إليه في قائمة طويلة.
const LiquidGlassLite({ super.key, this.shape = const LiquidGlassShape(), this.borderAlpha = 1.0, this.blur = const LiquidGlassBlur(sigmaX: 3, sigmaY: 3), this.magnification = 1.0, this.pickup = LiquidGlassLitePickup.backdrop, this.color, this.blendFloor = 0.35, this.ambientColor, this.shapeScale = const Offset(1.0, 1.0), this.child, })
المعاملالنوعالافتراضيالوصف
keyKey?
shapeLiquidGlassShapeconst LiquidGlassShape()The geometry and lighting to draw, read exactly as a lens reads it.
borderAlphadouble1.0A global multiplier on the rim's opacity, for fading it in and out. The lens uses the same knob for its own show/hide animation.
blurLiquidGlassBlurconst LiquidGlassBlur(sigmaX: 3, sigmaY: 3)How much the surface frosts what is behind it, inside its own outline. This is the glass itself rather than its edge: a backdrop blur clipped to the shape, painted under child, the same thing a lens' appearance blur does. It defaults to a light 3 — pass const LiquidGlassBlur() for a bare rim over whatever is already there. It costs a backdrop read, and with LiquidGlassLitePickup.backdrop the rim's own read comes on top of it: two reads for a surface that carries both. That is what a blurred lens costs too, so a screen with many of them wants LiquidGlassBlur() here, or LiquidGlassLitePickup.surface there, or both.
magnificationdouble1.0How much the surface magnifies what is behind it: the backdrop scaled about the shape's centre, evenly, across the whole surface. This is the flat-slab half of a lens' refraction — the content inside the outline stops lining up with the content outside it. It rides in the blur's own filter, so it is free when blur is on. 1.0 is flat.
pickupLiquidGlassLitePickupLiquidGlassLitePickup.backdropWhether — and how — the rim takes its colour from what is behind it. See LiquidGlassLitePickup.
colorColor?The glass's own tint, LiquidGlassAppearance.color's counterpart: a flat fill of the shape between the frost and child. Under LiquidGlassLitePickup.backdrop and LiquidGlassLitePickup.blend the rim sits over it and never takes colour from it, as on a lens: laid beneath the rim inside the read's own layer, or painted around the rim, cut by the rim's alpha. Under LiquidGlassLitePickup.surface and LiquidGlassLitePickup.none it is a plain fill under the child, and the rim is painted over it. null, or fully transparent, paints nothing.
blendFloordouble0.35How much plain white rim survives underneath LiquidGlassLitePickup.blend and LiquidGlassLitePickup.surface. The blend there is overlay, and overlay multiplies: over black there is nothing to multiply, so the rim would disappear exactly where it shows most. This is the plain rim screened over the blend afterwards, showing through wherever the blend came out empty. It is a straight trade — every bit of floor buys visibility on black with tint on colour. Measured on a red field and a black one, as how far the rim's red runs ahead of its blue, and how bright it is over black: The default now holds MORE colour than LiquidGlassLitePickup.backdrop does (104 at 70) — and that one reads the backdrop to get there. Ignored by the other pickup modes.
ambientColorColor?The background color the highlight is tinted with. The shader samples this per pixel from the refracted backdrop; here it is one color for the whole rim. Null keeps the shader's untinted behavior — a white highlight scaled by LiquidGlassShape.lightColor.
shapeScaleOffsetconst Offset(1.0, 1.0)The deformation applied to the outline, matching a lens' shape scale: the shape is built at rest size and stretched, so a squeezed circle becomes an ellipse instead of keeping a fixed corner radius.
childWidget?The content the rim is drawn over. When null the widget expands to its constraints and draws the rim alone.

التعليقات

التعليقات هي مناقشات GitHub — يمكنك الرد من أيٍّ من المكانين.