تنظیم ویژگی‌های آیتم

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

موقعیت مورد را تنظیم کنید

یک آیتم را در یک مسیر یا سلول خاص با پارامترهای row و column قرار دهید.

پارامترهای row و column اندیس‌های مسیر سطر و ستونی را که آیتم در آن قرار می‌گیرد، مشخص می‌کنند. اندیس‌های مسیر بر اساس ۱ هستند - از یک شروع می‌شوند. مشخص کردن فقط row یا column (نه هر دو) آیتم را در فضای خالی بعدی در آن مسیر قرار می‌دهد. مشخص کردن هر دو، آیتم را در آن سلول قرار می‌دهد.

از یک عدد صحیح مثبت برای مشخص کردن اندیس مسیر از ابتدا استفاده کنید. برای مثال، برای قرار دادن یک آیتم در سطر و ستون اول، از gridItem(row = 1, column = 1) استفاده کنید.

از یک عدد صحیح منفی برای مشخص کردن مسیر نسبت به انتها استفاده کنید. برای مثال، برای قرار دادن یک آیتم در سطر و ستون یکی مانده به آخر، از gridItem(row = -2, column = -2) استفاده کنید.

در مثال زیر، کارت شماره ۲ در ردیف دوم و ستون دوم قرار می‌گیرد. کارت شماره ۳ به آخرین ردیف (با اندیس -۱) اختصاص داده می‌شود، جایی که به طور خودکار اولین ستون موجود در آن مسیر را اشغال می‌کند (شکل ۱).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

شکل ۱. کارت شماره ۲ در خانه جدول در ردیف دوم و ستون دوم و کارت شماره ۳ در ستون اول در ردیف سوم قرار داده شده است.

گسترش ردیف‌ها و ستون‌ها

از پارامترهای rowSpan و columnSpan برای گسترش یک آیتم روی چندین سلول استفاده کنید. می‌توانید یک عنصر رابط کاربری را در یک ناحیه شبکه‌ای قرار دهید، که ناحیه‌ای متشکل از چندین سلول شبکه‌ای است. اصلاح‌کننده gridItem به شما امکان می‌دهد ناحیه شبکه‌ای را با پارامترهای rowSpan و columnSpan مشخص کنید. در مثال زیر، کارت شماره ۱ در ناحیه‌ای متشکل از دو ردیف و دو ستون قرار داده شده است (شکل ۲).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

شکل ۲. کارت شماره ۴ سه ستون را در بر می‌گیرد.

ترازبندی را در یک ناحیه شبکه‌ای تنظیم کنید

شما می‌توانید ترازبندی عنصر رابط کاربری را در یک ناحیه شبکه‌ای با مشخص کردن آن در پارامتر alignment از اصلاح‌کننده gridItem تنظیم کنید. در مثال زیر، #1 در مرکز ناحیه شبکه‌ای متشکل از دو ستون و دو ردیف قرار گرفته است.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

شکل ۳. متن با شماره ۱ در مرکز ناحیه شبکه‌ای متشکل از دو ردیف و دو ستون قرار گرفته است.

قرارگیری خودکار با موارد قرار داده شده مخلوط می‌شود

یک عنصر رابط کاربری در Grid که هیچ موقعیت مشخصی ندارد، به صورت خودکار جایگذاری می‌شود. این مثال نشان می‌دهد که چگونه می‌توانید عناصر با موقعیت خودکار و عناصر رابط کاربری را با سلول‌های شبکه مشخص شده ترکیب کنید. کارت شماره ۲ و کارت شماره ۴ سلول‌های شبکه مشخص شده هستند و سایر موارد به صورت خودکار جایگذاری می‌شوند.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

شکل ۴. کارت شماره ۳ در کنار کارت شماره ۱ قرار می‌گیرد، زیرا این یک جایگذاری خودکار است.