إنشاء قائمة محدودة يمكن التمرير فيها
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يمكن أن تساعد القوائم القابلة للتنقّل في إدارة مجموعات البيانات وإنشاء تصميمات سريعة الاستجابة وتسهيل التنقّل. يمكنك عرض مجموعات أصغر من العناصر في تطبيقك
باستخدام قائمة محدودة يمكن التمرير فيها. لتجنُّب مشاكل الأداء في مجموعات البيانات
الأكبر حجمًا أو في قائمة ذات طول غير معروف، اطّلِع على مقالة
تحميل البيانات بشكلٍ بطيء باستخدام القوائم وميزة "التنقّل في البيانات".
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة تطوير البرامج (SDK) لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو
مستوى أعلى.
التبعيات
إنشاء قائمة لفلفة عمودية
استخدِم الرمز البرمجي التالي لإنشاء قائمة لفّ عمودي:
@Composable
private fun ScrollBoxes() {
Column(
modifier = Modifier
.background(Color.LightGray)
.size(100.dp)
.verticalScroll(rememberScrollState())
) {
repeat(10) {
Text("Item $it", modifier = Modifier.padding(2.dp))
}
}
}
النقاط الرئيسية حول الرمز
النتائج
الشكل 1. قائمة يمكن التمرير فيها عموديًا
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول
أهداف تطوير Android الأوسع نطاقًا:
عرض قائمة أو شبكة
تسمح القوائم والشبكات لتطبيقك بعرض المجموعات في شكلٍ
ممتع من الناحية المرئية ويسهل على المستخدمين الاطّلاع عليه.
عرض المكونات التفاعلية
تعرَّف على كيفية استخدام الدوال القابلة للتجميع لإنشاء مكونات جميلة لواجهة المستخدم بسهولة استنادًا إلى نظام التصميم المتعدّد الأبعاد.
أساسيات إنشاء المحتوى (مجموعة فيديوهات)
تعرِض سلسلة الفيديوهات هذه واجهات برمجة التطبيقات المختلفة لتطبيق Compose،
وتوضّح لك بسرعة الميزات المتاحة وكيفية استخدامها.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Create a finite scrollable list\n\n\u003cbr /\u003e\n\nScrollable lists can help manage datasets, create responsive designs, and\nfacilitate navigation. You can display smaller sets of items in your app\nby using a finite scrolling list. To avoid performance issues with larger\ndatasets or a list of unknown length, see\n[Lazily load data with lists and Paging](/develop/ui/compose/quick-guides/content/lazily-load-list).\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a vertical scrolling list\n--------------------------------\n\nUse the following code to create a vertical scrolling list:\n\n\n```kotlin\n@Composable\nprivate fun ScrollBoxes() {\n Column(\n modifier = Modifier\n .background(Color.LightGray)\n .size(100.dp)\n .verticalScroll(rememberScrollState())\n ) {\n repeat(10) {\n Text(\"Item $it\", modifier = Modifier.padding(2.dp))\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/gestures/GesturesSnippets.kt#L112-L124\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- Sets the [`Column`](/reference/kotlin/androidx/compose/foundation/layout/package-summary#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)) scrolling behavior with the [`verticalScroll`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)) modifier and the [`rememberScrollState`](/reference/kotlin/androidx/compose/foundation/package-summary#rememberScrollState(kotlin.Int)) function.\n- To create a horizontal scrolling list, create a [`Row`](/reference/kotlin/androidx/compose/foundation/layout/package-summary#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)) with a [`horizontalScroll`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).horizontalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)) modifier.\n\nResults\n-------\n\n\u003cbr /\u003e\n\n**Figure 1.** A vertical scrolling list.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\n### Compose basics (video collection)\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
