محدودیت ها و ترتیب اصلاح کننده ها

در Compose، می‌توانید چندین اصلاح‌کننده را به هم متصل کنید تا ظاهر و احساس یک ترکیب‌سازی را تغییر دهید. این زنجیره‌های اصلاح‌کننده می‌توانند بر محدودیت‌های ارسال‌شده به composables تأثیر بگذارند، که محدوده‌های عرض و ارتفاع را تعریف می‌کنند.

این صفحه توضیح می‌دهد که چگونه اصلاح‌کننده‌های زنجیره‌ای بر محدودیت‌ها و به نوبه‌ی خود، اندازه‌گیری و قرارگیری اجزای سازنده اثر می‌گذارند.

اصلاح کننده ها در درخت UI

برای درک اینکه چگونه اصلاح‌کننده‌ها بر یکدیگر تأثیر می‌گذارند، تجسم نحوه ظاهر شدن آنها در درخت رابط کاربری که در مرحله ترکیب‌سازی ایجاد می‌شود، مفید است. برای اطلاعات بیشتر به بخش ترکیب بندی مراجعه کنید.

در درخت UI، می‌توانید اصلاح‌کننده‌ها را به عنوان گره‌های بسته‌بندی برای گره‌های طرح‌بندی تجسم کنید:

شکل 1. اصلاح گرها گره های طرح بندی را در درخت رابط کاربری پیچیده می کنند.

افزودن بیش از یک اصلاح کننده به یک ترکیب بندی، زنجیره ای از اصلاح کننده ها را ایجاد می کند. هنگامی که چندین اصلاح کننده را زنجیره ای می کنید، هر گره اصلاح کننده بقیه زنجیره و گره طرح بندی را در داخل می پیچد . به عنوان مثال، هنگامی که یک clip و یک اصلاح کننده size را به هم متصل می کنید، گره اصلاح کننده clip گره اصلاح کننده size را می پوشاند، که سپس گره طرح بندی Image را می پوشاند.

در مرحله چیدمان، الگوریتمی که درخت را راه می‌دهد ثابت می‌ماند، اما هر گره اصلاح‌کننده نیز بازدید می‌شود. به این ترتیب، یک اصلاح‌کننده می‌تواند نیازهای اندازه و محل قرارگیری اصلاح‌کننده یا گره طرح‌بندی را که می‌پیچد، تغییر دهد.

همانطور که در شکل 2 نشان داده شده است، پیاده‌سازی ترکیب‌پذیرهای Image و Text خود شامل زنجیره‌ای از اصلاح‌کننده‌ها است که یک گره طرح‌بندی واحد را می‌پیچد. پیاده‌سازی‌های Row و Column صرفاً گره‌های طرح‌بندی هستند که نحوه چیدمان فرزندان خود را توصیف می‌کنند.

شکل 2. همان ساختار درختی در شکل 1، اما با ترکیبات قابل ترکیب در درخت UI که به صورت زنجیره ای از اصلاح کننده ها تجسم شده است.

به طور خلاصه:

• اصلاح‌کننده‌ها یک اصلاح‌کننده یا گره طرح‌بندی را می‌پیچند.
• گره های چیدمان می توانند چندین گره فرزند را قرار دهند.

بخش‌های زیر نحوه استفاده از این مدل ذهنی را برای استدلال در مورد زنجیره اصلاح‌کننده و چگونگی تأثیر آن بر اندازه مواد ترکیب‌پذیر توضیح می‌دهند.

محدودیت ها در مرحله چیدمان

فاز طرح‌بندی از یک الگوریتم سه مرحله‌ای پیروی می‌کند تا عرض، ارتفاع و مختصات x، y هر گره طرح‌بندی را پیدا کند:

1. اندازه گیری فرزندان : یک گره فرزندان خود را در صورت وجود اندازه گیری می کند.
2. اندازه خود را تعیین کنید : بر اساس آن اندازه گیری ها، یک گره در مورد اندازه خود تصمیم می گیرد.
3. فرزندان مکان : هر گره فرزند نسبت به موقعیت خود گره قرار می گیرد.

Constraints به یافتن اندازه‌های مناسب برای گره‌ها در دو مرحله اول الگوریتم کمک می‌کنند. محدودیت ها حداقل و حداکثر کران را برای عرض و ارتفاع گره تعریف می کنند. هنگامی که گره در مورد اندازه خود تصمیم می گیرد، اندازه اندازه گیری شده آن باید در این محدوده اندازه قرار گیرد.

انواع محدودیت ها

یک محدودیت می تواند یکی از موارد زیر باشد:

• Bounded : گره دارای حداکثر و حداقل عرض و ارتفاع است.

شکل 3. محدودیت های محدود.

• نامحدود : گره به هیچ اندازه ای محدود نمی شود. محدوده حداکثر عرض و ارتفاع روی بی نهایت تنظیم شده است.

شکل 4. محدودیت های نامحدود.

• دقیق : از گره خواسته می‌شود تا اندازه دقیقی را دنبال کند. حداقل و حداکثر کران بر روی یک مقدار تنظیم شده است.

شکل 5. محدودیت های دقیق.

• ترکیب : گره از ترکیبی از انواع محدودیت های بالا پیروی می کند. به عنوان مثال، یک محدودیت می تواند عرض را محدود کند در حالی که حداکثر ارتفاع نامحدود را مجاز می کند، یا یک عرض دقیق را تعیین می کند اما یک ارتفاع محدود را ارائه می دهد.

شکل 6. ترکیبی از محدودیت های محدود و نامحدود و عرض و ارتفاع دقیق.

بخش بعدی چگونگی انتقال این محدودیت ها از والدین به فرزند را شرح می دهد.

چگونه محدودیت ها از والدین به فرزند منتقل می شوند

در اولین مرحله از الگوریتم شرح داده شده در محدودیت ها در مرحله طرح بندی ، محدودیت ها از والدین به فرزند در درخت UI منتقل می شوند.

هنگامی که یک گره والد فرزندان خود را اندازه گیری می کند، این محدودیت ها را برای هر کودک فراهم می کند تا بداند که چقدر بزرگ یا کوچک مجاز است. سپس، هنگامی که اندازه خود را تعیین می کند، به محدودیت هایی که توسط والدین خود اعمال شده است نیز پایبند است.

در سطح بالا، الگوریتم به روش زیر کار می کند:

1. برای تصمیم گیری در مورد اندازه ای که در واقع می خواهد اشغال کند، گره ریشه در درخت UI فرزندان خود را اندازه گیری می کند و همان محدودیت ها را به فرزند اول خود ارسال می کند.
2. اگر فرزند اصلاح‌کننده‌ای باشد که بر اندازه‌گیری تأثیری ندارد، محدودیت‌ها را به اصلاح‌کننده بعدی ارسال می‌کند. محدودیت‌ها به همان شکلی که هستند به زنجیره اصلاح‌کننده منتقل می‌شوند، مگر اینکه به اصلاح‌کننده‌ای که بر اندازه‌گیری تأثیر می‌گذارد، رسیده باشد. سپس محدودیت ها بر این اساس اندازه مجدد می شوند.
3. هنگامی که به گره‌ای رسید که هیچ فرزندی ندارد (که به آن «گره برگ» گفته می‌شود)، اندازه آن را بر اساس محدودیت‌هایی که وارد شده بود، تعیین می‌کند و این اندازه حل‌شده را به والدینش برمی‌گرداند.
4. والد محدودیت های خود را بر اساس اندازه گیری های این کودک تطبیق می دهد و فرزند بعدی خود را با این محدودیت های تنظیم شده فرا می خواند.
5. هنگامی که همه فرزندان یک والدین اندازه گیری می شوند، گره والد در مورد اندازه خود تصمیم می گیرد و آن را به والدین خود منتقل می کند.
6. به این ترتیب، کل درخت ابتدا از عمق عبور می کند. در نهایت، تمام گره ها در مورد اندازه خود تصمیم گرفتند و مرحله اندازه گیری به پایان رسید.

برای مثالی عمیق، ویدیوی سفارش محدودیت‌ها و اصلاح‌کننده را ببینید.

اصلاح کننده هایی که بر محدودیت ها تأثیر می گذارند

در بخش قبل یاد گرفتید که برخی از اصلاح کننده ها می توانند بر اندازه محدودیت تأثیر بگذارند. بخش‌های زیر اصلاح‌کننده‌های خاصی را توصیف می‌کنند که بر محدودیت‌ها تأثیر می‌گذارند.

اصلاح کننده size

اصلاح کننده size ، اندازه دلخواه محتوا را اعلام می کند.

برای مثال، درخت رابط کاربری زیر باید در ظرفی با 300dp در 200dp ارائه شود. محدودیت ها محدود هستند، عرض بین 100dp و 300dp و ارتفاعات بین 100dp و 200dp را مجاز می کنند:

شکل 7. محدودیت های محدود در درخت UI و نمایش آن در یک ظرف.

اصلاح‌کننده size ، محدودیت‌های ورودی را برای مطابقت با مقدار ارسال شده به آن تطبیق می‌دهد. در این مثال، مقدار 150dp است:

شکل 8. اصلاح کننده size محدودیت ها را به 150dp تنظیم می کند.

اگر عرض و ارتفاع کوچکتر از کوچکترین محدودیت محدودیت یا بزرگتر از بزرگترین محدودیت محدودیت باشد، اصلاح کننده با محدودیت های تصویب شده تا جایی که می تواند مطابقت دارد در حالی که همچنان به محدودیت های تصویب شده در زیر پایبند است:

شکل 9. اصلاح کننده size که تا حد امکان به محدودیت عبور شده پایبند است.

توجه داشته باشید که زنجیر کردن چند تغییر size کار نمی کند. اولین اصلاح کننده size ، حداقل و حداکثر محدودیت ها را روی یک مقدار ثابت تنظیم می کند. حتی اگر اصلاح‌کننده اندازه دوم اندازه کوچک‌تر یا بزرگ‌تر را درخواست کند، همچنان باید به محدوده‌های دقیقی که وارد شده است پایبند باشد، بنابراین آن مقادیر را لغو نمی‌کند:

شکل 10. زنجیره ای از دو اصلاح کننده size ، که در آن مقدار دوم ارسال شده در ( 50dp ) مقدار اول ( 100dp ) را لغو نمی کند.

requiredSize تغییر اندازه

اگر به گره خود برای نادیده گرفتن محدودیت های ورودی نیاز دارید، به جای size از اصلاح کننده requiredSize استفاده کنید. اصلاح‌کننده‌ی requiredSize جایگزین محدودیت‌های ورودی می‌شود و اندازه‌ای را که شما به‌عنوان کران‌های دقیق تعیین کرده‌اید، عبور می‌دهد.

هنگامی که اندازه به درخت منتقل می شود، گره فرزند در فضای موجود در مرکز قرار می گیرد:

شکل 11. اصلاح‌کننده‌ی requiredSize که محدودیت‌های دریافتی از اصلاح‌کننده size را نادیده می‌گیرد.

اصلاح کننده های width و height

اصلاح کننده size هم عرض و هم ارتفاع محدودیت ها را تطبیق می دهد. با تغییر دهنده width ، می توانید یک عرض ثابت تنظیم کنید اما ارتفاع را نامشخص بگذارید. به طور مشابه، با اصلاح کننده height ، می توانید یک ارتفاع ثابت تعیین کنید، اما عرض را نامشخص بگذارید:

شکل 12. اصلاح کننده width و اصلاح کننده height به ترتیب یک عرض و ارتفاع ثابت را تنظیم می کنند.

تغییر دهنده sizeIn

اصلاح‌کننده sizeIn به شما امکان می‌دهد حداقل و حداکثر محدودیت‌ها را برای عرض و ارتفاع تنظیم کنید. اگر به کنترل دقیق بر روی محدودیت ها نیاز دارید، از اصلاح کننده sizeIn استفاده کنید.

شکل 13. اصلاح کننده sizeIn با مجموعه minWidth ، maxWidth ، minHeight و maxHeight .

نمونه ها

این بخش خروجی چند قطعه کد را با اصلاح کننده های زنجیره ای نشان می دهد و توضیح می دهد.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

این قطعه خروجی زیر را تولید می کند:

• اصلاح‌کننده fillMaxSize محدودیت‌ها را تغییر می‌دهد تا حداقل عرض و ارتفاع را به حداکثر مقدار - 300dp در عرض و 200dp در ارتفاع تنظیم کند.
• حتی اگر اصلاح‌کننده size می‌خواهد از اندازه 50dp استفاده کند، همچنان باید به حداقل محدودیت‌های ورودی پایبند باشد. بنابراین، اصلاح‌کننده size ، محدودیت‌های دقیق 300 در 200 را نیز خروجی می‌دهد، و عملاً مقدار ارائه‌شده در اصلاح‌کننده size را نادیده می‌گیرد.
• Image از این کران ها پیروی می کند و اندازه 300 در 200 را گزارش می دهد که تا بالای درخت رد می شود.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

این قطعه خروجی زیر را تولید می کند:

• اصلاح‌کننده fillMaxSize محدودیت‌ها را برای تنظیم حداقل عرض و ارتفاع به حداکثر مقدار - 300dp در عرض و 200dp در ارتفاع تنظیم می‌کند.
• اصلاح کننده wrapContentSize حداقل محدودیت ها را بازنشانی می کند. بنابراین، در حالی که fillMaxSize منجر به محدودیت‌های ثابت می‌شود، wrapContentSize آن را به محدودیت‌های محدود بازنشانی می‌کند . گره زیر اکنون می تواند دوباره کل فضا را اشغال کند یا از کل فضا کوچکتر باشد.
• اصلاح‌کننده size محدودیت‌ها را روی حداقل و حداکثر کران 50 تنظیم می‌کند.
• Image به اندازه 50 در 50 تغییر می کند و اصلاح کننده size آن را جلو می برد.
• اصلاح کننده wrapContentSize یک ویژگی خاص دارد. فرزند خود را می گیرد و در مرکز حداقل محدودیت های موجود قرار می دهد . بنابراین، اندازه ای که به والدین خود ارسال می کند برابر با حداقل محدودیت هایی است که به آن منتقل شده است.

با ترکیب تنها سه تغییر دهنده، می توانید اندازه ای را برای composable تعریف کنید و آن را در والد خود قرار دهید.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

این قطعه خروجی زیر را تولید می کند:

• اصلاح کننده clip محدودیت ها را تغییر نمی دهد.
  • اصلاح کننده padding حداکثر محدودیت ها را کاهش می دهد.
  • اصلاح کننده size تمام محدودیت ها را روی 100dp تنظیم می کند.
  • Image به آن محدودیت ها پایبند است و اندازه 100 در 100dp را گزارش می دهد.
  • اصلاح کننده padding 10dp در همه اندازه ها اضافه می کند، بنابراین عرض و ارتفاع گزارش شده را 20dp افزایش می دهد.
  • اکنون در مرحله ترسیم، اصلاح کننده clip روی بوم 120 در 120dp عمل می کند. بنابراین، یک ماسک دایره ای با آن اندازه ایجاد می کند .
  • سپس اصلاح‌کننده padding ، محتوای خود را 10dp در همه اندازه‌ها قرار می‌دهد، بنابراین اندازه بوم را به 100 در 100dp کاهش می‌دهد.
  • Image در آن بوم کشیده شده است. تصویر بر اساس دایره اصلی 120dp بریده شده است، بنابراین خروجی یک نتیجه غیر گرد است.