كيفية إدارة التمرير في Jetpack Compose: تطبيق عملي مع ListView
في عالم تطوير تطبيقات الاندرويد ، تعتبر Jetpack Compose واحدة من أحدث وأقوى الأدوات لبناء وإنشاء تطبيقات Android بشكل سريع واداء عالي و في هذه المقالة، سنشرح بالتفصيل كيفية إنشاء ListView أفقيًا وعموديًا وكيفية إضافة التمرير إلى الأعمدة في Jetpack Compose باستخدام Kotlin بشكل مبسط وتفصيلي .
ما هوJetpack Compose ؟
Jetpack Compose هي مكتبة حديثة من Google لبناء واجهات المستخدم في تطبيقات Android باستخدام لغة البرمجة Kotlin. يعتمد الإنشاء على مفهوم البرمجة التعريفية، حيث تصف الشكل الذي يجب أن تبدو عليه الواجهة، بدلاً من كيفية إنشائها خطوة بخطوة. وهذا يجعل التعليمات البرمجية أكثر قابلية للقراءة والصيانة.
شرح الكود لإنشاء ListView العمودي
val data = listOf("A", "B", "C", "D")
LazyColumn(
modifier = Modifier.constrainAs(lazyColumn) {
top.linkTo(text.bottom, margin = 16.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) {
items(data) { item ->
Text(text = item)
}
}
شرح كود LazyColumn.
مزايا LazyColumn:
شرح الكود البرمجي لإضافة Scrolling إلى Column
Column (
Modifier.constrainAs(lazyColumn) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}.verticalScroll(rememberScrollState()),
) {
Text(text = "This is Test" ,
Modifier
.background(Color.Cyan)
.padding(80.dp))
Text(text = "This is Test" ,
Modifier
.background(Color.Blue)
.padding(80.dp))
Text(text = "This is Test" ,
Modifier
.background(Color.Cyan)
.padding(80.dp))
Text(text = "This is Test" ,
Modifier
.background(Color.Yellow)
.padding(80.dp))
Text(text = "This is Test" ,
Modifier
.background(Color.Cyan)
.padding(80.dp))
}
إنشاء قوائم أفقية باستخدام LazyRow
val data = listOf("A", "B", "C", "D")
LazyRow(
modifier = Modifier.constrainAs(lazyColumn) {
top.linkTo(text.bottom, margin = 16.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) {
items(data) { item ->
Text(text = item)
}
}
مزايا LazyRow
LazyColumn(
contentPadding = PaddingValues(vertical = 15.dp),
verticalArrangement = Arrangement.spacedBy(10.dp),
modifier = Modifier
.fillMaxSize()
.padding(paddingValues)
) {
stickyHeader {
Text("My Images")
}
item {
10.spacerHeight()
LazyRow(
horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
items(count = state.backgrounds.size) { index ->
val item = state.backgrounds[index]
MyBackground(item = item)
}
}
}
stickyHeader {
Text("My Backgrounds")
}
items(
count = state.model.size, key = { state.model[it].text }) { index ->
val item = state.model[index]
MyCard(item = item, onClick = { onClick(item) })
}
}
في الكود السابق تم ادراج LazyColumn بشكل كامل على مستوى الصفحه وبداخله item يوجد بداخله LazyRow لعمل list بشكل افقي حتى يصبح لدينا اكث من قائمه في نفس الصفحه
تم استخدام stickyHeader لعمل نص مثبت بحيث يتغير النص عندما يظهر النص الاخر الموازي له وهذا اذا كان لديك اكثر من قائمه
يُعد LazyColumn وLazyRow أداتين قويتين في Jetpack Compose اللتين تتيحان عرض القوائم بكفاءة وأداء عالٍ. باستخدام هذه الأدوات، يمكنك إنشاء واجهات مستخدم مرنة وسلسة مع تحسين تجربة المستخدم. سواء أكانت القوائم أفقية أم رأسية، يقدم Jetpack Compose الحل الأمثل.
