ما هي LazyVerticalGrid؟ وكيف تعمل في Jetpack Compose؟

كود إنشاء شبكة رأسية باستخدام LazyVerticalGrid في Kotlin Compose

عندما ترغب ببناء احد تطبيقات Android باستخدام Jetpack Compose، فبشكل كبير سوف تحتاج الي وجود عنصر LazyVerticalGrid في مشروعك وهيا واحدة من الأدوات القوية التي تسمح للمطورين بإنشاء شبكات مرنة للعناصر وقابلة للتخصيص بسهولة. في هذه المقالة، سنتعرف على كيفية استخدام LazyVerticalGrid لإنشاء شبكة من العناصر في Kotlin Compose، مع شرح مفصل للكود وكيفية تحسينه لتوفير تجربة مستخدم ممتازة والحصول علي اداء اعلى في تطبيقك .

ما هي LazyVerticalGrid؟

LazyVerticalGrid هي إحدى مكونات الموجوده في Jetpack Compose والتي تسمح لك إنشاء شبكة رأسية من العناصر. حيث تتميز هذه الأداة بقدرتها على توليد العناصر بشكل "كسول" (Lazy)، أي أنها لا تقوم بتحميل جميع العناصر في الذاكرة مرة واحدة، بل تقوم بتحميلها فقط عند الحاجة وهذا يجعل تطبيقك اسرع واخف في استهلاك الذاكره. هذا يجعلها مثالية للتعامل مع قوائم كبيرة من البيانات دون التأثير على أداء التطبيق.

كود إنشاء شبكة رأسية باستخدام LazyVerticalGrid

لنقوم بكتابة كود بسيط بواسطة Jetpack Compose لإنشاء شبكة رأسية تحتوي على عنصرين في كل صف

LazyVerticalGrid(
    contentPadding = PaddingValues(10.dp),
    verticalArrangement = Arrangement.spacedBy(10.dp),
    modifier = Modifier
        .fillMaxSize()
        .padding(paddingValues),
    columns = GridCells.Fixed(2),
) {
    items(
        count = state.model.size, key = { state.model[it].text }
    ) { index ->
        val item = state.model[index]
        MyCard(item = item, onClick = { onClick(item) }, modifier = Modifier.animateItemPlacement())
    }
}

شرح الكود

LazyVerticalGrid: هذه هي الوظيفة الرئيسية التي نستخدمها لإنشاء الشبكة الرأسية. يتم تحديد عدد الأعمدة باستخدام GridCells.Fixed(2)، مما يعني أن كل صف سيحتوي على عنصرين.

contentPadding: يُستخدم لتحديد المسافات الداخلية حول المحتوى داخل الشبكة. في هذا المثال، قمنا بتعيينها إلى PaddingValues(10.dp).

verticalArrangement: يتحكم في كيفية توزيع العناصر عموديًا داخل الشبكة. هنا، قمنا باستخدام Arrangement.spacedBy(10.dp) لإضافة مسافة بين العناصر.

items: تُستخدم هذه الدالة لتكرار العناصر داخل الشبكة. يتم تحديد عدد العناصر باستخدام count، ويتم تعيين مفتاح فريد لكل عنصر باستخدام key.

MyCard: هذا هو العنصر المستخدم لعرض كل عنصر في الشبكة. يمكن استبداله بأي عنصر آخر حسب احتياجات التطبيق.

استخدام GridCells.Adaptive

columns = GridCells.Adaptive(minSize = 120.dp)

LazyVerticalGrid(
    contentPadding = PaddingValues(10.dp),
    verticalArrangement = Arrangement.spacedBy(10.dp),
    modifier = Modifier
        .fillMaxSize()
        .padding(paddingValues),
    columns = GridCells.Fixed(2),
) {
    item(span = { GridItemSpan(maxCurrentLineSpan) }) {
        Text("Welcome to geecoders.com")
    }
    items(
        count = state.model.size, key = { state.model[it].text }
    ) { index ->
        val item = state.model[index]
        MyCard(item = item, onClick = { onClick(item) }, modifier = Modifier.animateItemPlacement())
    }
}