العدسة وأسلوبها

عنصر واحد وكائن أسلوب مسطّح واحد: الهيئة والأضواء والتعبئة والانكسار.

Dart

LiquidGlassLens({
  LiquidGlassStyle style = const LiquidGlassStyle(),
  bool visibility = true,
  LiquidGlassTouch? touch,
  bool? useImpellerBackdrop,
  Widget? child,
})

يأتي الحجم من التخطيط، لا من العدسة أبداً. ويُقصّ child على شكل الزجاج. وvisibility: false يطفئ الزجاج فوراً — بلا كلفة خلفية وبلا ابن — فهو الطريقة الرخيصة لإخفاء عدسة ستُظهرها ثانيةً.

LiquidGlassStyle#

كل ما يخصّ مظهر العدسة يعيش في كائن واحد، وكل حقل يجلس عليه مباشرةً — بلا مجموعات متداخلة — فتغيير جانب واحد هو copyWith(...) واحد. وmerge(other) موجودة لأنماط السمة والتجاوز، والعناصر الجاهزة تصف زجاجها بالكائن نفسه.

Dart

LiquidGlassStyle({
  LiquidGlassShape? shape,        // null → the consumer's default outline
  LiquidGlassLight? specular,     // null → the consumer's default highlight
  LiquidGlassLight? glow,         // null → the consumer's default (none on a lens)
  double refractionIndex = 1.1,
  double refractionWidth = 12,
  double magnification = 1.0,
  double dispersion = 0,
  double saturation = 1.0,
  double blur = 0,
  Color color = const Color(0x00000000),
  LiquidGlassShadow? shadow,
  LiquidGlassAdaptivity? adaptivity,
  bool liteGlass = false,
})

// Change one facet, keep the rest.
final frosted = style.copyWith(blur: 4, color: const Color(0x22FFFFFF));

الهيئة#

المُنشئ	منحنى الزاوية
`LiquidGlassShape.roundedRectangle(...)`	زوايا دائرية عادية. الأرخص في القص.
`LiquidGlassShape.squircle(...)`	مربع دائري Lⁿ — انحناء متصل على طراز iOS.
`LiquidGlassShape.continuousRoundedRectangle(...)`	زوايا متصلة على طراز كبسولة Apple. وهي الافتراضي، وتنطبق إلى كبسولة نظيفة عند أقصى نصف قطر.

الهيئة هي المحيط ولا شيء غيره: تأخذ الثلاث cornerRadius (الافتراضي 50) وclipQuality، وcopyWith(...) يغيّر أيّاً منهما. ولم تعد الحافة جزءاً من الهيئة — فهي ضوءا الأسلوب، أدناه.

التعبئة#

الخاصية	الافتراضي	ما تفعله
`color`	`transparent`	اللون الأساس. عادةً أبيض أو أسود منخفض الشفافية. ومنه تأخذ الحافة لونها أيضاً.
`blur`	`0`	ضبابية ما يظهر عبر الزجاج، كقيمة sigma غاوسية واحدة بالبكسل المنطقي. و`0` يعني بلا ضبابية.
`saturation`	`1.0`	`1.0` كما هو، و`0.0` رمادي، وفوق `1` أكثر حيوية.
`shadow`	`null`	ظل تلامس `LiquidGlassShadow` حول الزجاج. انظر الظل.

الانكسار#

نموذج واحد ورقمان: تثني الحافة ما خلفها بمقدار refractionIndex على شريط عرضه refractionWidth.

الخاصية	الافتراضي	ما تفعله
`refractionIndex`	`1.1`	مقدار ثني الحافة لما خلفها. و`1.0` يعني بلا ثني؛ والثني يشتدّ بسرعة، فـ`1.02` حافة عدسة واضحة أصلاً و`1.5` قوية جداً.
`refractionWidth`	`12`	عرض شريط الثني بالبكسل المنطقي: إلى أي مدى يمتد الثني إلى الداخل من المحيط.
`magnification`	`1.0`	تكبير ما يُرى عبر الزجاج. و`1.0` يعني بلا تكبير.
`dispersion`	`0`	هالة لونية في شريط الثني. مطفأة افتراضياً، وعند `0` يكلّف الشريط قراءة خلفية واحدة لكل بكسل. والقيمة هي أوسع انفصال بالبكسل المنطقي: `1.3` هالة رفيعة و`6.6` قوية.

الحافة: ضوءان#

الحافة ضوءان من نوع LiquidGlassLight على الأسلوب. البريق (specular) هو اللمعة: شريط حادّ يأخذ لون الخلفية المرئية عبر الحافة، مُفتَّحاً. والتوهّج (glow) هو الشريط الجانبي الأنعم والأعرض الذي يملأ الجانبين اللذين يتركهما البريق معتمين. ويرسم كل ضوء قوسين متقابلين على محوره الخاص.

المعامل	البريق	التوهّج	ما يفعله
`thickness`	`5`	`10`	عمق الشريط إلى الداخل من المحيط بالبكسل المنطقي، كما يُعطى. و`0` لا يرسم شيئاً.
`sharpness`	`0.5`	—	مدى صلابة الشريط عبر عمقه: الأعلى يبقيه ممتلئاً لمسافة أطول، والأدنى يشدّه نحو المحيط.
`angle`	`39`	`90`	محور القوسين بالدرجات: `0` يمين ويسار، و`90` أعلى وأسفل. وهي مطلقة — فتدوير ضوء لا يدير الآخر أبداً.
`spread`	`0.9`	`0.5`	مدى التفاف القوسين حول المحيط، من `0` إلى `1`.
`intensity`	`1`	`1`	الشدّة. و`0` يطفئ الضوء.
`oppositeIntensity`	`1`	`1`	القوس البعيد كمضاعف للقريب: `0` قوس واحد فقط، وفوق `1` يتفوّق القوس البعيد على القريب.
`color`	`null`	`null`	`null` يأخذ اللون الملتقَط. وإن ضُبط رُسم الضوء بذلك اللون كما هو، وشفافيته هي مقدار ما يحلّ منه محلّ اللون الملتقَط.

Dart

LiquidGlassLens(
  style: const LiquidGlassStyle(
    shape: LiquidGlassShape.squircle(cornerRadius: 36),
    specular: LiquidGlassLight.specular(thickness: 5, angle: 39),
    glow: LiquidGlassLight.glow(angle: 129, intensity: 0.8),
    refractionIndex: 1.02,
    refractionWidth: 24,
    color: Color(0x22FFFFFF),
    blur: 3,
  ),
  child: child,
)

القادم من 4.x#

سطّح الإصدار 5.0.0 الأسلوب واستبدل أنواع الحواف بالضوءين. وهذه أشيع النقلات:

4.x	5.0.0
`appearance: LiquidGlassAppearance(color: c, saturation: s, shadow: h)`	`color: c, saturation: s, shadow: h` على الأسلوب
`LiquidGlassBlur(sigmaX: b, sigmaY: b)`	`blur: b` على الأسلوب
`style.copyWith(appearance: style.appearance.copyWith(color: c))`	`style.copyWith(color: c)`
`refraction: LiquidGlassRefraction(magnification: m, chromaticAberration: c)`	`magnification: m, dispersion: c` على الأسلوب
`distortion` / `distortionWidth`, `OpticalRefraction(...)`	`refractionIndex` / `refractionWidth`. النموذجان يثنيان بشكل مختلف، فأعد اختيار المؤشر بالعين.
`LiquidGlassShape(borderWidth: w)`	`specular: LiquidGlassLight.specular(thickness: w * 5.4)` و`glow: LiquidGlassLight.glow(thickness: w * 29.4)`
`lightIntensity` / `lightDirection`	`intensity` / `angle` في البريق (و`glow.angle = angle + 90` لإبقاء التوهّج مكانه)
`OpticalBorder(lightSpread, borderSolidity, ambientIntensity)`	`spread` البريق، و`sharpness` البريق، و`intensity` التوهّج
`ClassicBorder`, `lightMode`, `borderColor`, `refractionMode`, `diagonalFlip`, `enableInnerRadiusTransparent`	أُزيلت

كل المعاملات#

الجداول أعلاه هي التي تستحق التعلّم. أما القائمة الكاملة — كل حقل وكل قيمة افتراضية، مأخوذة من الشيفرة مباشرة — فمُولَّدة في صفحة واجهة العدسة.

العدسة وأسلوبها

LiquidGlassStyle#

الهيئة#

التعبئة#

الانكسار#

الحافة: ضوءان#

القادم من 4.x#

كل المعاملات#

التعليقات