الظل
ظلّ التماس الذي يُجلس الزجاج في الصفحة.
الزجاج بلا ظلّ يطفو مسطّحاً على الصفحة. وLiquidGlassShadow هو الشريط الداكن الناعم الذي يعانق الحافة ويتجمّع تحتها، فيُقرأ السطح جالساً في الصفحة لا ملصقاً عليها. وكل مكوّن يأتي بمظهر مضبوط يرتديه أصلاً.
أين يوضع#
في الغالب الأعمّ على الأسلوب، بوصفه shadow — فتلفّ العدسة نفسها به، بنصف قطر زواياها وبتمدّدها الحيّ، ويأخذ visibility: false الظلَّ مع الزجاج:
LiquidGlassLens(
style: const LiquidGlassStyle(
shadow: LiquidGlassShadow(blur: 3.5, opacity: 0.2),
),
child: myContent,
)وهو أيضاً عنصر عادي، وبوصفه عنصراً فهو أب للزجاج، لا ابن له أبداً:
LiquidGlassShadow(
child: LiquidGlassLens(style: myStyle, child: myContent),
)كيف يُصنع الشكل#
يُلقي الظلَّ حلقةٌ، لا السطح نفسه: كبسولة خارجية مدفوعة إلى الخارج ناقص كبسولة داخلية مسحوبة إلى الداخل، فلا يُلقي شيئاً إلا شريطٌ يمتطي الحافة ويبقى الوسط صافياً. ثم تُزاح تلك الحلقة إلى الأسفل بمقدار offset (وهو blur + 2 افتراضياً) وتُضبّب — فيحطّ القوس العلوي داخل الحافة العليا مباشرة، ويحطّ السفلي تحت السطح كله. حلقة واحدة تعطي تماس الحافة والسقوط تحتها معاً. وهو يركّب بـBlendMode.multiply، فيُعتّم ما تحته بدل أن يفرش رماديّاً مسطحاً فوقه.
| المعامل | الافتراضي | ما يفعله |
|---|---|---|
blur | 3.5 | نصف قطر التضبيب، وسُمك الحلقة الملقية رأسياً. |
opacity | 0.2 | مقدار عتمته. |
color | Colors.black | اللون قبل تطبيق opacity. |
offset | blur + 2 | إزاحة الحلقة إلى الأسفل. والفارغ يأخذ الافتراضي. |
cornerRadius | null | نصف قطر زاوية السطح في السكون. والفارغ يجعله كبسولة. وعلى style.shadow تملؤه العدسة بنصف قطر شكلها. |
scale | (1, 1) | تمدّد المحيط — الحجم المشوّه ÷ حجم السكون — لتتبع الحلقة قبعةً إهليلجية تحت عدسة مضغوطة. |
inset | 0 | يدسّ الظلّ داخل الزجاج فيتدلّى السطح فوقه. ويُقرأ تماساً أضيق على عنصر تحكّم صغير، حيث تبدو الهالة كاملة الحجم كأنها توهّج. |
visible | true | والخطأ لا يرسم شيئاً ويترك الابن كما هو، فيُبدَّل بلا تغيير شكل الشجرة. |
insideGlass | true | هل تُرسم الحلقة تحت محيط الزجاج. والخطأ يُبقي ما يقع خارجه فقط — انظر أدناه. |
إبقاؤه خارج الزجاج#
تُرسم الحلقة خلف الزجاج، والزجاج يقرأ ما خلفه. ومع insideGlass: true (الافتراضي) فهذا هو مظهر التماس: يُعتّم القوس العلوي داخل الحافة. وعلى عدسة شديدة الانكسار — شريط انكسار عريض، أو تكبير أقل من 1 — قد تسحب الحافة ذلك الظلّ إلى الداخل أكثر، فيظهر شريطاً داكناً داخل الحدّ.
وinsideGlass: false يقصّ الحلقة على خارج المحيط ويرسمها فوق الزجاج بدل تحته. يبدو السقوط تحته كما هو، لكن الزجاج لا يرى الظلّ أبداً، فلا ينكسر شيء داكن إلى الداخل. ويعمل بالطريقة نفسها على الزجاج الخفيف، الذي يقرأ ما خلفه كذلك عبر تضبيبه وتكبيره.
LiquidGlassShadow(
blur: 4,
opacity: 0.25,
insideGlass: false,
)على سطح المكتب#
يُرسم المسار المضبَّب على شبكة البكسلات، فتقفز الحلقة المتحركة بكسلاً كاملاً في كل مرة. لا يظهر ذلك بنسبة بكسلات الهاتف؛ أما بنسبة 1 على سطح المكتب فتهتزّ الحبة المنزلقة — حبة شريط التبويب والمنزلق والمفتاح — بوضوح. لذا تُرسم الحلقة على Windows وLinux وmacOS من مستطيلين مستديرَي الزوايا مضبَّبين، يُضبَّبان في موضعهما الدقيق دون البكسل، فينزلق الظلّ مع الزجاج. يبقى المظهر نفسه؛ ويحتفظ الهاتف والويب بالمسار.
التعليقات
التعليقات هي مناقشات GitHub — يمكنك الرد من أيٍّ من المكانين.