در «نوشتن»، می‌توانید چندین اصلاح‌گر را به‌هم زنجیر کنید تا ظاهر و احساس یک عنصر ترکیبی را تغییر دهید. این زنجیره‌های اصلاح‌گر می‌توانند بر محدودیت‌های منتقل‌شده به عناصر ترکیبی که حدود عرض و ارتفاع را تعریف می‌کنند تأثیر بگذارند.
این صفحه توضیح می‌دهد که چگونه اصلاح‌کننده‌های زنجیره‌ای بر محدودیت‌ها و به‌نوبه خود بر اندازه‌گیری و جای‌گذاری عناصر ترکیبی تأثیر می‌گذارند.
اصلاح‌گرها در درخت واسط کاربر
برای درک اینکه اصلاح‌کننده‌ها چگونه بر یکدیگر تأثیر می‌گذارند، بهتر است نحوه نمایش آن‌ها را در درخت واسط کاربر که در مرحله ترکیب تولید می‌شود تجسم کنید. برای اطلاعات بیشتر، بخش ترکیب را ببینید.
در درخت میانای کاربر، می‌توانید اصلاح‌کننده‌ها را به‌عنوان گره‌های بسته‌بندی برای گره‌های چیدمان تصویرسازی کنید:
افزودن بیش از یک اصلاح‌گر به یک عنصر ترکیبی زنجیره‌ای از اصلاح‌گرها ایجاد می‌کند. وقتی
چندین اصلاح‌گر را به‌هم زنجیر می‌کنید، هر گره اصلاح‌گر بقیه زنجیره
و گره چیدمان را دربرمی‌گیرد. برای مثال، وقتی یک clip و یک
size اصلاح‌گر را به‌هم زنجیر می‌کنید، گره اصلاح‌گر clip گره اصلاح‌گر size را می‌پیچد،
که سپس گره چیدمان Image را می‌پیچد.
در مرحله چیدمان، الگوریتمی که درخت را پیمایش می‌کند یکسان می‌ماند، اما از هر گره اصلاح‌گر نیز بازدید می‌شود. به این ترتیب، یک اصلاح‌گر می‌تواند الزامات اندازه و جای گره اصلاح‌گر یا چیدمانی را که دربرمی‌گیرد تغییر دهد.
همان‌طور که در «شکل ۲» نشان داده شده است، پیاده‌سازی توابع ترکیب‌پذیر Image و Text خود شامل زنجیره‌ای از اصلاح‌گرها است که یک گره چیدمان واحد را می‌پیچند.
پیاده‌سازی‌های Row و Column گره‌های چیدمانی هستند که نحوه چیدن فرزندانشان را توصیف می‌کنند.
برای خلاصه کردن:
- تغییردهنده‌ها یک تغییردهنده یا گره چیدمان را می‌پیچند.
- گره‌های چیدمان می‌توانند چندین گره فرزند را چیدمان کنند.
بخش‌های زیر نحوه استفاده از این مدل ذهنی را برای استدلال درباره زنجیره اصلاح‌گر و نحوه تأثیر آن بر اندازه عناصر ترکیبی توضیح می‌دهد.
محدودیت‌ها در مرحله چیدمان
مرحله چیدمان از الگوریتم سه‌مرحله‌ای برای یافتن عرض، ارتفاع، و مختصات x و y هر گره چیدمان استفاده می‌کند:
- اندازه‌گیری کودکان: گره فرزندان خود را، درصورت وجود، اندازه‌گیری می‌کند.
- تصمیم‌گیری درباره اندازه خود: براساس آن اندازه‌گیری‌ها، یک گره درباره اندازه خود تصمیم می‌گیرد.
- قرار دادن فرزندان: هر گره فرزند نسبت به موقعیت گره خودش قرار می‌گیرد.
Constraints به پیدا کردن اندازه‌های مناسب برای گره‌ها در دو مرحله اول الگوریتم کمک می‌کند. محدودیت‌ها مرزهای حداقل و حداکثر را برای عرض و ارتفاع گره تعریف می‌کنند. وقتی گره درباره اندازه خود تصمیم می‌گیرد، اندازه اندازه‌گیری‌شده آن باید در این محدوده اندازه قرار بگیرد.
انواع محدودیت‌ها
محدودیت می‌تواند یکی از موارد زیر باشد:
- محدود: گره دارای حداکثر و حداقل عرض و ارتفاع است.
- بدون محدودیت: گره به هیچ اندازه‌ای محدود نمی‌شود. کران‌های حداکثر عرض و ارتفاع روی بی‌نهایت تنظیم شده است.
- دقیق: از گره خواسته می‌شود که از یک الزام اندازه دقیق پیروی کند. کرانه‌های کمینه و بیشینه روی مقدار یکسانی تنظیم شده است.
- ترکیبی: گره از ترکیبی از انواع محدودیت‌های قبلی پیروی می‌کند. برای مثال، یک محدودیت می‌تواند عرض را محدود کند و درعین‌حال اجازه دهد ارتفاع حداکثر نامحدود باشد، یا عرض دقیق را تنظیم کند اما ارتفاع را محدود کند.
بخش بعدی توضیح می‌دهد که چگونه این محدودیت‌ها از والد به فرزند منتقل می‌شوند.
نحوه انتقال محدودیت‌ها از والد به فرزند
در مرحله اول الگوریتم شرح‌داده‌شده در محدودیت‌های مرحله چیدمان، محدودیت‌ها از والد به فرزند در درخت میانای کاربری منتقل می‌شوند.
وقتی گره والد فرزندانش را اندازه‌گیری می‌کند، این محدودیت‌ها را به هر فرزند ارائه می‌دهد تا به آن‌ها اطلاع دهد که چقدر بزرگ یا کوچک مجاز هستند. سپس، وقتی اندازه خود را تعیین می‌کند، به محدودیت‌هایی که والدینش به آن منتقل کرده‌اند نیز پایبند است.
در سطح بالا، الگوریتم به این صورت کار می‌کند:
- برای تعیین اندازه واقعی که می‌خواهد اشغال کند، گره ریشه در درخت واسط کاربر فرزندانش را اندازه‌گیری می‌کند و همان محدودیت‌ها را به اولین فرزندش ارسال می‌کند.
- اگر کودک اصلاح‌گری باشد که بر اندازه‌گیری تأثیر نمی‌گذارد، محدودیت‌ها را به اصلاح‌گر بعدی ارسال می‌کند. محدودیت‌ها همان‌گونه که هستند به زنجیره اصلاح‌کننده منتقل می‌شوند، مگر اینکه به اصلاح‌کننده‌ای که بر اندازه‌گیری تأثیر می‌گذارد برسند. سپس محدودیت‌ها متناسب با آن تغییر اندازه می‌دهند.
- وقتی به گره‌ای می‌رسیم که هیچ فرزندی ندارد (که به آن «گره برگ» می‌گویند)، اندازه آن براساس محدودیت‌هایی که به آن منتقل شده است تعیین می‌شود و این اندازه حل‌وفصل‌شده به گره والد آن برمی‌گردد.
- والد محدودیت‌های خود را براساس اندازه‌های این فرزند تطبیق می‌دهد و فرزند بعدی خود را با این محدودیت‌های اصلاح‌شده فرا می‌خواند.
- وقتی همه فرزندان یک ولی اندازه‌گیری شدند، گره ولی درباره اندازه خودش تصمیم می‌گیرد و آن را به ولی خودش اعلام می‌کند.
- به این ترتیب، کل درخت به‌صورت عمق‌اول پیمایش می‌شود. درنهایت، همه گره‌ها درباره اندازه‌هایشان تصمیم می‌گیرند و مرحله اندازه‌گیری تکمیل می‌شود.
برای مثال جامع، ویدیو محدودیت‌ها و ترتیب اصلاح‌گر را ببینید.
اصلاح‌کننده‌هایی که بر محدودیت‌ها تأثیر می‌گذارند
در بخش قبلی یاد گرفتید که برخی‌از اصلاح‌کننده‌ها می‌توانند بر اندازه محدودیت تأثیر بگذارند. بخش‌های زیر اصلاح‌کننده‌های خاصی را که بر محدودیت‌ها تأثیر می‌گذارند شرح می‌دهد.
اصلاح‌گر size
اصلاح‌گر size اندازه ترجیحی محتوا را اعلام می‌کند.
برای مثال، درخت واسط کاربر زیر باید در محتوی 300dp
در 200dp پرداز شود. محدودیت‌ها محدود هستند و اجازه می‌دهند عرض بین 100dp و
300dp و ارتفاع بین 100dp و 200dp باشد:
اصلاح‌گر size محدودیت‌های ورودی را تطبیق می‌دهد تا با مقدار منتقل‌شده به آن مطابقت داشته باشد.
در این مثال، مقدار 150dp است:
size محدودیت‌ها را روی 150dp تنظیم می‌کند.اگر عرض و ارتفاع از کوچک‌ترین محدوده محدودیت کوچک‌تر باشد، یا از بزرگ‌ترین محدوده محدودیت بزرگ‌تر باشد، اصلاح‌کننده با محدودیت‌های گذرانده‌شده تا جایی که ممکن است مطابقت پیدا می‌کند و درعین‌حال به محدودیت‌های گذرانده‌شده در موارد زیر پایبند می‌ماند:
size که تا حد امکان به محدودیت عبوری پایبند است.توجه داشته باشید که زنجیر کردن چندین اصلاح‌گر size کار نمی‌کند. اولین اصلاح‌کننده size
محدودیت‌های حداقل و حداکثر را روی مقدار ثابتی تنظیم می‌کند. حتی اگر
اصلاح‌کننده اندازه دوم اندازه کوچک‌تر یا بزرگ‌تری را درخواست کند، همچنان باید
به محدوده‌های دقیق ارسال‌شده پایبند باشد، بنابراین این مقادیر را ملغی نمی‌کند:
size که در آن مقدار دوم منتقل‌شده
در (50dp) مقدار اول (100dp) را ملغی نمی‌کند.اصلاح‌گر requiredSize
اگر می‌خواهید گرهتان محدودیت‌های ورودی را ملغی کند، به‌جای size از اصلاح‌گر requiredSize استفاده کنید. اصلاح‌گر requiredSize جایگزین
محدودیت‌های ورودی می‌شود و اندازه مشخص‌شده را به‌عنوان حدود دقیق ارسال می‌کند.
وقتی اندازه به بالا در درخت منتقل می‌شود، گره فرزند در فضای دردسترس در مرکز قرار می‌گیرد:
requiredSize محدودیت‌های ورودی را از اصلاح‌گر size ملغی می‌کند.اصلاح‌کننده‌های width و height
اصلاح‌گر size هم عرض و هم ارتفاع محدودیت‌ها را تطبیق می‌دهد. با
اصلاح‌گر width، می‌توانید عرض ثابتی تنظیم کنید اما ارتفاع را نامشخص بگذارید.
به‌همین ترتیب، با اصلاح‌گر height می‌توانید ارتفاع ثابتی تنظیم کنید، اما
عرض را تعیین‌نشده بگذارید:
width و اصلاح‌گر height به‌ترتیب عرض و ارتفاع ثابتی را تنظیم می‌کنند.اصلاح‌گر sizeIn
اصلاح‌گر sizeIn به شما امکان می‌دهد محدودیت‌های دقیق حداقل و حداکثر را برای عرض و ارتفاع تنظیم کنید. اگر به کنترل دقیق‌تری بر محدودیت‌ها نیاز دارید، از اصلاح‌کننده sizeIn استفاده کنید.
sizeIn با minWidth، maxWidth، minHeight، و
maxHeight تنظیم شد.مثال‌ها
این بخش برونداد چند تکه‌کد را با اصلاح‌کننده‌های زنجیره‌ای نشان می‌دهد و توضیح می‌دهد.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
این تکه‌کد برونداد زیر را تولید می‌کند:
Image درنتیجه زنجیره اصلاح‌گرها به حداکثر اندازه می‌رسد.- اصلاح‌کننده
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) )
این تکه‌کد برونداد زیر را تولید می‌کند:
Image در مرکز قرار دارد و اندازه آن
50dp است.- اصلاح‌گر
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) )
این گزیده برونداد زیر را تولید می‌کند:
- اصلاح‌کننده
clipمحدودیت‌ها را تغییر نمی‌دهد. - اصلاح‌کننده
paddingمحدودیت‌های حداکثر را کاهش می‌دهد. - توصیف‌گر
sizeهمه محدودیت‌ها را روی100dpتنظیم می‌کند. -
Imageاز این محدودیت‌ها پیروی می‌کند و اندازه100dpرا در100dpگزارش می‌کند. - اصلاح‌گر
paddingدر همه طرف‌ها10dpبه اندازه گزارش‌شده توسطImageاضافه می‌کند، بنابراین چیدمان با حاشیه عرض و ارتفاع120dpرا گزارش می‌کند. - اکنون، در مرحله طراحی، اصلاح‌گر
clipروی بوم120dpدر120dpعمل می‌کند. ماسک دایره‌ای با آن اندازه ایجاد می‌کند. - سپس اصلاح‌گر
paddingمحتوای خود را از همه طرف به‌اندازه10dpدرونی می‌کند که اندازه بوم را برایImageبه100dpبه‌میزان100dpکاهش می‌دهد. Imageدر آن بوم کوچک‌تر رسم می‌شود. تصویر براساس دایره اصلی120dpچیده شده است، بنابراین برونداد نتیجه‌ای غیرگرد است.