تنظیم رفتار آیتم

از Modifier.flex برای کنترل نحوه تغییر اندازه، ترتیب و ترازبندی یک آیتم درون FlexBox استفاده کنید.

اندازه کالا

از ویژگی‌های basis, grow و shrink برای کنترل اندازه یک آیتم استفاده کنید.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}
FlexBoxSnippets.kt

تنظیم اندازه اولیه

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

نوع مقدار	رفتار	قطعه کد نکته: حداکثر اندازه ذاتی جعبه‌ها 100dp است.	مثال استفاده از کانتینر با عرض 600dp
Auto (پیش‌فرض)	از حداکثر اندازه ذاتی کالا استفاده کنید. برای مثال، حداکثر عرض ذاتی یک Text composable برابر با عرض تمام متن آن در یک خط است - بدون پوشش.	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
dp ثابت	اندازه ثابت در Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
درصد	درصدی از اندازه ظرف.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

اگر مقدار مبنا کمتر از حداقل اندازه ذاتی آیتم باشد، به جای آن از حداقل اندازه ذاتی استفاده می‌شود. برای مثال، اگر یک آیتم Text که حاوی یک کلمه است برای نمایش به 50dp نیاز داشته باشد، اما همچنین دارای basis = 10.dp باشد، از مقدار 50dp استفاده می‌شود.

وقتی جا هست، آیتم‌ها را پرورش دهید

grow برای مشخص کردن میزان رشد یک آیتم در صورت وجود فضای اضافی استفاده کنید. این میزان، فضای باقی مانده در کانتینر FlexBox پس از جمع شدن مقادیر basis همه آیتم‌ها است. مقدار grow نشان می‌دهد که یک فرزند نسبت به هم‌نیاهای خود چه مقدار از فضای اضافی را دریافت خواهد کرد. به طور پیش‌فرض، آیتم‌ها رشد نخواهند کرد.

مثال زیر یک FlexBox با سه آیتم فرزند را نشان می‌دهد. هر کدام مقدار پایه 100dp دارند. فرزند اول مقدار grow مثبت دارد. از آنجایی که فقط یک فرزند با مقدار grow وجود دارد، مقدار واقعی بی‌ربط است - تا زمانی که مثبت باشد، فرزند تمام فضای اضافی را دریافت می‌کند.

تصاویر، رفتار FlexBox را زمانی که اندازه کانتینر آن 600dp است، نشان می‌دهند.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

هر فرزند مقدار پایه 100dp دارد. 300dp فضای اضافی وجود دارد. فرزند ۱ به اندازه 300dp رشد می‌کند تا فضای اضافی را پر کند.

در مثال زیر، اندازه ظرف و اندازه basis یکسان هستند. تفاوت این است که هر فرزند مقدار grow متفاوتی دارد.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow = 2f } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow = 3f } ) } FlexBoxSnippets.kt

هر فرزند مقدار پایه 100dp دارد. 300dp فضای اضافی وجود دارد. مقدار رشد کل ۶ است. فرزند ۱ به اندازه (۱ / ۶) * ۳۰۰ = 50dp رشد می‌کند فرزند دوم به اندازه (2 / 6) * 300 = 100dp رشد می‌کند فرزند ۳ به اندازه (۳ / ۶) * ۳۰۰ = 150dp رشد می‌کند

وقتی فضای کافی وجود ندارد، آیتم‌ها را کوچک کنید

shrink برای تعیین میزان کوچک شدن یک آیتم در زمانی که کانتینر FlexBox فضای کافی برای همه آیتم‌ها ندارد، استفاده کنید. shrink مانند grow عمل می‌کند، با این تفاوت که به جای توزیع فضای اضافی بین آیتم‌ها، کسری فضا بین آیتم‌ها توزیع می‌شود. مقدار shrink مشخص می‌کند که آیتم چه مقدار از کسری فضا را دریافت می‌کند، یا بهتر بگوییم، آیتم چقدر کوچک می‌شود. به طور پیش‌فرض، آیتم‌ها مقدار shrink برابر با 1f دارند، به این معنی که به طور مساوی کوچک می‌شوند.

مثال زیر دو ترکیب‌پذیر Text را با متن یکسان نشان می‌دهد. فرزند اول مقدار shrink برابر با 1f دارد، به این معنی که برای جذب تمام فضای خالی، کوچک می‌شود.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}
FlexBoxSnippets.kt

با کوچک شدن اندازه کانتینر، Child 1 کوچک می‌شود.

اندازه کانتینر	رابط کاربری فلکس باکس
700dp
500dp
450dp

ترازبندی آیتم

از alignSelf برای کنترل نحوه ترازبندی یک آیتم نسبت به محور متقاطع استفاده کنید. این ویژگی، ویژگی alignItems مربوط به container مربوط به این آیتم را لغو می‌کند. این ویژگی تمام مقادیر ممکن مشابه را دارد، به علاوه Auto که رفتار container مربوط به FlexBox را به ارث می‌برد.

برای مثال، این FlexBox دارای alignItems تنظیم شده روی Start و پنج فرزند است که ترازبندی محور متقاطع را لغو می‌کنند.

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}
FlexBoxSnippets.kt

سفارش کالا

به طور پیش‌فرض، FlexBox آیتم‌ها را به ترتیبی که در کد تعریف شده‌اند، چیدمان می‌کند. این رفتار را با استفاده order لغو کنید.

مقدار پیش‌فرض برای order صفر است و FlexBox آیتم‌ها را بر اساس این مقدار و به صورت صعودی مرتب می‌کند. هر آیتمی که مقدار order یکسانی داشته باشد، به همان ترتیبی که تعریف شده است، چیدمان می‌شود. از مقادیر order منفی و مثبت برای انتقال آیتم‌ها به ابتدا یا انتهای یک layout بدون تغییر محل تعریف آنها استفاده کنید.

مثال زیر دو آیتم فرزند را نشان می‌دهد. اولی order پیش‌فرض صفر و دومی ترتیب -1 را دارد. پس از مرتب‌سازی، فرزند ۱ بعد از فرزند ۲ ظاهر می‌شود.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}
FlexBoxSnippets.kt