تنظیم ویژگی‌های کانتینر

شما می‌توانید پیکربندی محفظه‌ی Grid را برای ایجاد طرح‌بندی‌های انعطاف‌پذیر که به اندازه‌های مختلف صفحه نمایش و انواع محتوا پاسخ می‌دهند، تعریف کنید. این صفحه نحوه‌ی انجام موارد زیر را شرح می‌دهد:

تعریف یک شبکه

یک شبکه (grid) از ستون‌ها و ردیف‌ها تشکیل شده است. کامپوننت Grid یک پارامتر config دارد که یک لامبدا برای تعریف ستون‌ها و ردیف‌های درون GridConfigurationScope می‌پذیرد. مثال زیر یک شبکه (grid) را تعریف می‌کند که دارای سه ردیف و دو ستون است که هر کدام دارای اندازه ثابتی هستند که در Dp مشخص شده است: 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

قرار دادن آیتم‌ها در یک شبکه

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

در مثال زیر، شبکه شش خانه دارد و در هر خانه یک کارت قرار می‌دهد (شکل ۱). هر خانه 160dp x 90dp است که اندازه کل شبکه را 320dp x 270dp می‌کند. 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

شش کارت در یک جدول که سه ردیف و دو ستون دارد، قرار داده شده‌اند.
شکل ۱. شش کارت در یک جدول سه ردیفی و دو ستونی قرار گرفته‌اند.

برای تغییر این رفتار پیش‌فرض به پر کردن بر اساس ستون، ویژگی flow را روی GridFlow.Column تنظیم کنید. 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

تابع flow جهت قرار دادن آیتم‌ها را تغییر می‌دهد.
شکل 2. GridFlow.Row (چپ) و GridFlow.Column (راست).

مدیریت اندازه آهنگ

ردیف‌ها و ستون‌ها در مجموع به عنوان یک مسیر شبکه‌ای (grid track) شناخته می‌شوند. می‌توانید اندازه یک مسیر شبکه‌ای را با استفاده از یکی از روش‌های زیر مشخص کنید:

  • ثابت ( Dp ): یک اندازه خاص (مثلاً column(180.dp) ) را اختصاص می‌دهد.
  • کسری ( Float ): درصدی از کل فضای موجود را از 0.0f تا 1.0f اختصاص می‌دهد (مثلاً row(0.5f) برای 50%).
  • انعطاف‌پذیر ( Fr ): فضای باقی‌مانده را پس از محاسبه مسیرهای ثابت و کسری، به طور متناسب توزیع می‌کند. برای مثال، اگر دو ردیف روی 1.fr و 3.fr تنظیم شوند، دومی ۷۵٪ از ارتفاع باقی‌مانده را دریافت می‌کند.
  • ذاتی (Intrinsic) : اندازه مسیر را بر اساس محتوای داخل آن تعیین می‌کند. برای اطلاعات بیشتر، به بخش تعیین اندازه مسیر شبکه‌ای به صورت ذاتی مراجعه کنید.

مثال زیر از گزینه‌های مختلف اندازه‌گذاری مسیر برای تعریف ارتفاع ردیف‌ها استفاده می‌کند: 

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

ارتفاع ردیف‌ها با استفاده از چهار گزینه اصلی اندازه‌گذاری مسیر تعریف می‌شود.
شکل ۳. ارتفاع ردیف‌ها با استفاده از چهار گزینه اصلی اندازه‌گذاری مسیر در Grid تعریف شده است.

اندازه مسیر شبکه را به صورت ذاتی تعیین کنید

وقتی می‌خواهید طرح‌بندی یک شبکه با محتوا تطبیق پیدا کند، نه اینکه آن را مجبور به قرار گرفتن در یک ظرف ثابت کنید، می‌توانید از اندازه‌بندی ذاتی برای Grid استفاده کنید. اندازه مسیر شبکه با مقادیر زیر تعیین می‌شود:

  • GridTrackSize.MaxContent : از حداکثر اندازه ذاتی محتوا استفاده می‌کند (مثلاً، عرض توسط طول کامل متن در یک بلوک متنی بدون پوشش تعیین می‌شود).
  • GridTrackSize.MinContent : از حداقل اندازه ذاتی محتوا استفاده می‌کند (مثلاً عرض توسط طولانی‌ترین کلمه در یک بلوک متنی تعیین می‌شود).
  • GridTrackSize.Auto : از یک اندازه انعطاف‌پذیر برای یک ترک استفاده می‌کند که بر اساس فضای موجود سازگار می‌شود. این متد به طور پیش‌فرض مانند MaxContent رفتار می‌کند، اما محتوای خود را کوچک و فشرده می‌کند تا در کانتینر والد قرار گیرد.

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

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

اندازه‌های ذاتی در ستون‌ها مشخص شده‌اند.
شکل ۴. اندازه‌های ذاتی مشخص شده در ستون‌ها.

تنظیم فاصله بین سطرها و ستون‌ها

پس از تعیین اندازه مسیرهای شبکه، می‌توانید فاصله شبکه را برای اصلاح فاصله بین مسیرها تغییر دهید. می‌توانید فاصله ستون‌ها را با تابع columnGap و فاصله ردیف‌ها را با rowGap مشخص کنید. در مثال زیر، بین هر ردیف 16dp و بین هر ستون 8dp فاصله وجود دارد (شکل 5). 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

فاصله بین سطرها و ستون‌ها.
شکل ۵. فاصله بین ردیف‌ها و ستون‌ها.

همچنین می‌توانید از تابع راحتی gap برای تعریف فاصله‌هایی با اندازه ستون و ردیف یکسان استفاده کنید و اندازه ستون‌ها و فاصله‌ها را با استفاده از یک تابع به صورت جداگانه تعریف کنید. کد زیر فاصله‌هایی به اندازه 8dp به شبکه اضافه می‌کند: 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

قبلی
شروع به کار
بعدی
تنظیم ویژگی‌های آیتم