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

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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

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

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

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

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

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

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

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

به طور خلاصه:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اصلاح کننده size

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

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

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

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

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

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

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

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

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

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

تغییر دهنده sizeIn

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

نمونه ها

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

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 بریده شده است، بنابراین خروجی یک نتیجه غیر گرد است.

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

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

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

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

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

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

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

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

به طور خلاصه:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اصلاح کننده size

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

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

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

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

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

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

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

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

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

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

تغییر دهنده sizeIn

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

نمونه ها

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

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 بریده شده است، بنابراین خروجی یک نتیجه غیر گرد است.

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

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

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

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

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

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

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

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

به طور خلاصه:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اصلاح کننده size

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

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

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

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

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

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

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

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

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

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

اصلاح کننده sizeIn

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

نمونه ها

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

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 دارای یک خاصیت خاص است. فرزند خود را می گیرد و آن را در مرکز حداقل مرزهای موجود که به آن منتقل شده است قرار می دهد . اندازه ای که با والدین خود ارتباط برقرار می کند ، از این رو برابر با حداقل مرزهایی است که به آن منتقل شده اند.

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

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 قطع می شود ، بنابراین خروجی یک نتیجه غیر دور است.

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

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

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

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

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

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

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

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

به طور خلاصه:

• اصلاح کننده ها یک گره اصلاح کننده یا چیدمان را می پیچند.
• گره های چیدمان می توانند چندین گره کودک ایجاد کنند.

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

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

مرحله چیدمان از یک الگوریتم سه مرحله ای برای یافتن عرض ، ارتفاع و x ، y گره هر گره استفاده می کند:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اصلاح کننده size

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

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

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

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

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

اصلاح کننده requiredSize

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

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

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

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

اصلاح کننده sizeIn

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

نمونه ها

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

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 دارای یک خاصیت خاص است. فرزند خود را می گیرد و آن را در مرکز حداقل مرزهای موجود که به آن منتقل شده است قرار می دهد . اندازه ای که با والدین خود ارتباط برقرار می کند ، از این رو برابر با حداقل مرزهایی است که به آن منتقل شده اند.

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

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 قطع می شود ، بنابراین خروجی یک نتیجه غیر دور است.