التحوّل

زجاج يقيس ابنه وينساب إلى الحجم الجديد.

LiquidGlassMorph لوح زجاج يتحوّل ليناسب ما تضعه فيه. بدّل child فيقيس الزجاج الجديد وينساب إلى حجمه — أنت لا تخبره كم يكون:

Dart

LiquidGlassMorph(
  alignment: Alignment.bottomRight,
  motion: LiquidGlassMorphMotion.fluid,
  child: open
      ? const Menu(key: ValueKey('menu'))
      : const Icon(Icons.more_horiz, key: ValueKey('dots')),
)

هذه هي الواجهة كلها. أضِف صفاً إلى Menu فيكبر الزجاج ليطابقه، لأن الحقيقة عن حجم القائمة واحدة، والزجاج يقرؤها بدل أن تُملى عليه مرة ثانية.

المعامل	الافتراضي	ما يفعله
`child`	—	المحتوى، وهو ما يقرّر حجم الزجاج. امنح أبناءك مفاتيح — فالابن الذي يحتفظ بنوعه لا يُرى جديداً، فلا يتلاشى تقاطعاً ولا يُعاد قياسه.
`alignment`	`center`	أي حافة أو زاوية تثبت بينما يتغيّر حجم السطح. وهو المعامل الذي يتركه الناس في الوسط ثم يندمون — انظر أدناه.
`motion`	`fluid`	الفيزياء. الإعدادات الجاهزة: `fluid` و`anchoredPop` و`droplet` و`calm` و`plain` — وهو نابض بعدسة واحدة بلا كتلة ثانية إطلاقاً.
`style`	`LiquidGlassStyle()`	المادة. و`shape` فيها هو منحنى زاوية الوجهة ونصف قطرها، وإن لم يُضبط كان السطح كبسولة. وتزداد الضبابية والانكسار سماكةً كلما كبر الزجاج.
`smoothness`	`40`	ذروة نصف قطر العنق بين الكتلتين في منتصف التحوّل — وهو المقدار نفسه في الخالط. ولا شيء منه ما دامتا متطابقتين، فلا ينتفخ به شكل السكون أبداً.
`width` / `height`	`null`	تجاوزان لمحور تملكه فعلاً — كقائمة ثابتة العرض يتغيّر ارتفاعها. اضبط واحداً فيُثبَّت ذلك المحور بينما يظل الآخر مقيساً.
`onEnd`	`null`	يُطلَق حين تستقر النوابض.
`debugClipBounds`	`false`	يرسم محيط منطقة مرور الخلفية بالأرجواني. للتشخيص فقط — وهو يكلّف أداءً.

كيف يتحرك#

التحوّل كتلتان من سائل واحد، تُصيَّران سطحاً واحداً بالآلية نفسها التي يستخدمها الانصهار. يولد الشكل الجديد داخل القديم وينمو حول مرساته، ويتلبّث القديم ثم ينزح فيه. وما داما متراكبين يجمعهما الاتحاد الناعم، فيكون للمحيط في منتصف التحوّل خَصْر — وهو ما لا يكون لتغيير حجم أبداً، وما تقرؤه العين سائلاً. وفي السكون تتطابق الكتلتان ويُطفأ الاتحاد، فيكون شكل السكون دقيقاً.

تحتفظ كل كتلة بمنحنى زاويتها ونصف قطرها — فيُرسم الشكل القديم شكلاً قديماً حتى يزول. ولا يُمطّ المحتوى مع الزجاج: يضبّ الابن القديم ويتلاشى ويتقلص خارجاً، ويدخل الجديد، وكلاهما على ساعة التحوّل نفسها، والتبديل الذي ينعكس في منتصف الطريق يحمل كل ابن من حيث بلغ. وLiquidGlassMorphMotion.plain — أو أي إعداد مع copyWith(blended: false) — يقايض الخصر بعدسة واحدة يتنقّل محيطها بنابض بين الشكلين: بلا عنق ولا نزح، وبمرور خلفية واحد.

المحاذاة هي العقد#

يملأ العنصر الصندوق الممنوح له ويضع الزجاج بداخله وفق alignment — لأن الحجم وحده لا يقول في أي اتجاه ينبغي أن ينمو السطح. ففي الوسط تتحرك الحافتان، ويبدو كل اتجاه صحيحاً حتى تنقل العنصر إلى زاوية. وعند Alignment.bottomRight تثبت تلك الزاوية وينفتح السطح إلى الأعلى واليسار، كما يجب لعنصر في شريط أدوات. وAlignment متصلة — فالمحور عند x يرسل (1 + x) / 2 من أي نمو إلى جهة واحدة — ولسطح يضعه شيء ليس محاذاة، تستعيد LiquidGlassMorph.alignmentFor(rect, field) المحاذاة التي يقتضيها مستطيله.

التحوّل

كيف يتحرك#

المحاذاة هي العقد#

التعليقات