Liquid Glass Easy

المزلاج

زجاج مكتفٍ بذاته، والنداء الذي ينبغي أن تحفظ عنده.

LiquidGlassSlider مسارٌ بمقبض زجاجي يكسره. وهو مكتفٍ بذاته: يوفّر خلفيته ويكسر مساره الخاص، فلا يحتاج LiquidGlassView ولا يلتقط صفحتك. ضعه في أي مكان، على أي من المحركين.

Dart
LiquidGlassSlider(
  value: volume,
  onChanged: (v) => setState(() => volume = v),
  onChangeEnd: (v) => savePreference(v),
  activeColor: Colors.white,
  width: 280,
)
المعاملالافتراضيما يفعله
valueالموضع، بين minimumValue وmaximumValue.
onChangedيُطلَق مع كل بكسل من السحب.
onChangeStart / onChangeEndnullيُطلَقان مرة واحدة، عند الإمساك وعند الإفلات.
minimumValue / maximumValue0 / 1المدى.
isContinuoustrueالإبلاغ عن كل تغيّر أثناء السحب، أو مرة واحدة في النهاية.
activeColorأزرق النظامالجزء الممتلئ من المسار.
inactiveColor0x14000000بقية المسار.
thumbColorwhiteالمقبض المنكمش في حالة السكون.
width / heightnullاختصاران للحقلين نفسيهما في layout، ويغلبانهما. واترك height وشأنه إلا إن احتجت تثبيت الأثر — فهو مشتق من مقاسات المقبض.
layoutLiquidGlassSliderLayout()كل الهندسة: المسار، ومقاسا المقبض، وأيقونتا الطرفين.
minimumIcon / maximumIconnullأيقونتان عند الطرفين. ويقصر المسار ليفسح لهما.
stylenullيتجاوز زجاج المقبض.
motionLiquidGlassLensMotionSpec()مقدار انضغاط المقبض المرفوع وتمدّده أثناء حمله — انظر الحركة.

الهندسة#

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

Dart
const LiquidGlassSliderLayout(
  width: 280,
  trackHeight: 6,
  thumbWidth: 37,           // at rest: the solid pill
  thumbHeight: 24,
  liftedThumbWidth: 58,     // held: the glass pill it becomes
  liftedThumbHeight: 38.333,
  iconSize: 20,
  iconGap: 8,
)

التعليقات

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