Scaffold في Jetpack Compose — ما هو، الخصائص وكيف يعمل
Scaffold هي دالة composable في Jetpack Compose تنفذ الهيكل الأساسي للشاشة وفقًا لمواصفات Material Design. توفر Scaffold فتحات لـ TopAppBar و BottomBar و FloatingActionButton و Drawer و Snackbar. وفقًا لـ Google Android Documentation, 2025، فإن Scaffold عنصر إلزامي لمعظم الشاشات في تطبيقات Compose، حيث يدير الهوامش لمكونات نظام Material Design.
النقاط الرئيسية
- Scaffold هي هيكل شاشة Material Design يوفر فتحات لـ TopAppBar و BottomBar و FAB و Drawer و Snackbar بهوامش صحيحة.
- ScaffoldState يدير حالة Drawer و Snackbar، مما يتيح فتح وإغلاق القائمة الجانبية وعرض الإشعارات.
- topBar و bottomBar و floatingActionButton هي فتحات Scaffold لدمج مكونات Material Design القياسية.
- drawerGesturesEnabled يتحكم في إيماءة التمرير لفتح القائمة الجانبية، بينما يتحكم snackbarHost في العرض المخصص لـ Snackbar.
- Scaffold تدير تلقائيًا الهوامش لشريط الحالة وشريط التنقل من خلال innerPadding.
ما هو Scaffold في Jetpack Compose
Scaffold هي دالة composable تنفذ هيكل الشاشة وفقًا لمواصفات Material Design. Scaffold ليست حاوية بالمعنى التقليدي — بل هي مدير تخطيط ينسق وضع عدة مكونات قياسية من Material على الشاشة.
تدير Scaffold الهوامش لـ TopAppBar و BottomBar و FloatingActionButton، بالإضافة إلى عناصر النظام — شريط الحالة وشريط التنقل. يضمن ذلك عدم تداخل المحتوى مع عناصر النظام والامتثال لإرشادات Material Design.
وفقًا لـ Material Design Guidelines, 2025، يجب أن تكون Scaffold العنصر الجذر لكل شاشة تطبيق. تحل محل CoordinatorLayout القديم من نظام View وتوفر واجهة برمجة تطبيقات أبسط وتصريحية لبناء تخطيطات الشاشة.
التوقيع الأساسي لـ Scaffold
Scaffold تقبل المعاملات modifier و scaffoldState و topBar و bottomBar و floatingActionButton و drawerContent و snackbarHost و content. يستقبل معامل content PaddingValues — الهوامش التي يجب أن يأخذها المحتوى الرئيسي في الاعتبار.
kotlin
@Composable
fun BasicScaffold() {
Scaffold(
topBar = {
TopAppBar(
title = { Text("الصفحة الرئيسية") }
)
},
floatingActionButton = {
FloatingActionButton(onClick = {}) {
Icon(Icons.Default.Add, contentDescription = "Add")
}
}
) { innerPadding ->
Column(
modifier = Modifier.padding(innerPadding)
) {
Text("المحتوى الرئيسي")
}
}
}فتحات Scaffold: topBar و bottomBar و floatingActionButton
topBar هي الفتحة لوضع شريط التطبيق العلوي، عادةً TopAppBar أو LargeTopAppBar. تضيف Scaffold تلقائيًا هوامش إلى innerPadding للمحتوى حتى لا يتداخل مع topBar. يمكن أن يحتوي TopAppBar على عنوان وأيقونة تنقل وإجراءات.
bottomBar هي الفتحة لشريط التنقل السفلي. تدعم BottomNavigation و BottomAppBar أو NavigationBar. تراعي Scaffold ارتفاع bottomBar عند حساب innerPadding للمحتوى. وفقًا لـ Material Design Guidelines, 2025، يجب استخدام bottomBar في الشاشات التي تحتوي على 3–5 نقاط تنقل.
floatingActionButton هي الفتحة لزر الإجراء العائم. تضع Scaffold تلقائيًا FAB وفقًا لمواصفات Material Design — في الزاوية اليمنى السفلية بهامش صحيح. floatingActionButtonPosition يسمح بنقل FAB إلى منتصف الحافة السفلية للشاشة.
مثال مع جميع الفتحات
في هذا المثال، تستخدم Scaffold جميع الفتحات الرئيسية: TopAppBar بعنوان، و BottomBar بثلاثة عناصر تنقل، و FloatingActionButton للإجراء الرئيسي.
kotlin
@Composable
fun FullScaffold() {
Scaffold(
topBar = {
TopAppBar(
title = { Text("التطبيق") },
navigationIcon = {
IconButton(onClick = {}) {
Icon(Icons.Default.Menu, "Menu")
}
}
)
},
bottomBar = {
NavigationBar {
NavigationBarItem(
icon = { Icon(Icons.Default.Home, "الصفحة الرئيسية") },
label = { Text("Home") },
selected = true,
onClick = {}
)
NavigationBarItem(
icon = { Icon(Icons.Default.Search, "بحث") },
label = { Text("Search") },
selected = false,
onClick = {}
)
}
},
floatingActionButton = {
FloatingActionButton(onClick = {}) {
Icon(Icons.Default.Add, "Add")
}
}
) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
Text("محتوى الشاشة")
}
}
}ScaffoldState: إدارة Drawer و Snackbar
ScaffoldState هو كائن حالة Scaffold الذي يجمع بين DrawerState و SnackbarHostState. يدير DrawerState فتح وإغلاق القائمة الجانبية، بينما يدير SnackbarHostState عرض وإخفاء Snackbar. يتم إنشاء الحالة باستخدام rememberScaffoldState() وتمريرها إلى معامل scaffoldState.
DrawerState يوفر طرق open و close للتحكم البرمجي في Drawer. يمكن أن تكون حالة Drawer مفتوحة أو مغلقة أو مفتوحة جزئيًا. drawerGesturesEnabled يسمح بتعطيل إيماءة التمرير لفتح Drawer، مع ترك الفتح البرمجي فقط عبر زر.
SnackbarHostState يدير Snackbar — الإشعارات المؤقتة في الجزء السفلي من الشاشة. تعرض طريقة showSnackbar Snackbar برسالة وإجراء اختياري. وفقًا لـ Material Design Guidelines, 2025، يجب استخدام Snackbar للرسائل القصيرة دون معلومات مهمة بشكل حرج.
kotlin
@Composable
fun ScaffoldWithDrawer() {
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
topBar = {
TopAppBar(
title = { Text("القائمة") },
navigationIcon = {
IconButton(onClick = {
scope.launch {
scaffoldState.drawerState.open()
}
}) {
Icon(Icons.Default.Menu, "Menu")
}
}
)
},
drawerContent = {
Column(modifier = Modifier.padding(16.dp)) {
Text("العنصر 1")
Text("العنصر 2")
}
}
) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
Text("المحتوى")
}
}
}مثال بناء شاشة مع Scaffold
مثال كامل لشاشة مع Scaffold يشمل TopAppBar و BottomNavigation و FloatingActionButton و Snackbar لعرض الإشعارات عند الضغط على FAB. يتم تمرير ScaffoldState إلى جميع المكونات لتنسيق الحالة.
kotlin
@Composable
fun MainScreen() {
val state = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = state,
topBar = {
TopAppBar(
title = { Text("IT Sectr") },
actions = {
IconButton(onClick = {}) {
Icon(Icons.Default.Notifications, "Notifications")
}
}
)
},
bottomBar = {
NavigationBar {
NavigationBarItem(icon = { Icon(Icons.Default.Home, "الصفحة الرئيسية") },
label = { Text("Home") }, selected = true, onClick = {})
NavigationBarItem(icon = { Icon(Icons.Default.Settings, "الإعدادات") },
label = { Text("Settings") }, selected = false, onClick = {})
}
},
floatingActionButton = {
FloatingActionButton(onClick = {
scope.launch {
state.snackbarHostState.showSnackbar("تم")
}
}) {
Icon(Icons.Default.Add, "Add")
}
}
) { padding ->
Box(
modifier = Modifier.padding(padding).fillMaxSize(),
contentAlignment = Alignment.Center
) {
Text("مرحبًا")
}
}
}InnerPadding والتخطيط التكيفي مع Scaffold
innerPadding هي PaddingValues التي تمررها Scaffold إلى كتلة content. تحتوي على الهوامش اللازمة لمنع تداخل المحتوى مع statusBar و navigationBar و topBar و bottomBar. استخدام innerPadding إلزامي للعرض الصحيح على الأجهزة المختلفة.
تحسب Scaffold تلقائيًا innerPadding بناءً على هوامش النظام وارتفاع الفتحات المثبتة. على الأجهزة ذات كاميرا الجزيرة أو القطع في الشاشة، تضبط Scaffold الهوامش لشريط الحالة. على الأجهزة القديمة ذات الأزرار المادية، قد يكون الهامش السفلي غائبًا.
وفقًا لـ Android Developers, 2024، يجب تطبيق innerPadding على الحاوية الجذرية للمحتوى عبر Modifier.padding(innerPadding). إذا كان المحتوى يستخدم حاوية قابلة للتمرير، يتم تطبيق innerPadding عبر Modifier.consumeWindowInsets للتشغيل الصحيح للوحة المفاتيح وإيماءات النظام.
- طبق innerPadding على الحاوية الجذرية للمحتوى عبر Modifier.padding(innerPadding)
- للحاويات القابلة للتمرير استخدم Modifier.consumeWindowInsets(innerPadding)
- لا تضف هوامش إضافية لشريط الحالة — Scaffold تتعامل مع هذا تلقائيًا
- إذا كان topBar أو bottomBar غائبين، ستكون الهوامش المقابلة في innerPadding صفرًا
الأسئلة الشائعة
كيف يختلف Scaffold عن Column أو Box العادي؟
Scaffold ليست حاوية بل مدير تخطيط يتحكم في الفتحات لـ TopAppBar و BottomBar و FAB و Drawer و Snackbar، كما يعالج تلقائيًا الهوامش لمكونات النظام. Column و Box فقط يضعان العناصر دون مراعاة Material Design.
هل من الإلزامي استخدام Scaffold في كل شاشة؟
Scaffold موصى بها للشاشات التي تستخدم مكونات Material Design. في الشاشات البسيطة دون TopAppBar أو BottomBar أو FAB، Scaffold ليست إلزامية، لكنها توفر هوامش نظام صحيحة عبر innerPadding، وهو مفيد حتى بدون فتحات.
كيفية عرض Snackbar عبر Scaffold؟
مرر ScaffoldState إلى معامل scaffoldState لـ Scaffold، ثم استدع state.snackbarHostState.showSnackbar(“رسالة”) داخل coroutine. ستعرض Scaffold تلقائيًا Snackbar في الجزء السفلي من الشاشة.
هل يمكن استخدام Scaffold بدون scaffoldState؟
نعم، Scaffold تنشئ حالة داخلية افتراضيًا إذا لم يتم تمرير scaffoldState. ومع ذلك، للتحكم البرمجي في Drawer و Snackbar، تحتاج إلى إنشاء وتمرير ScaffoldState عبر rememberScaffoldState().
كيفية تغيير موضع FloatingActionButton في Scaffold؟
استخدم معامل floatingActionButtonPosition لـ Scaffold. افتراضيًا، يكون FAB في الأسفل الأيمن (FabPosition.End). قم بتعيين FabPosition.Center لوضع FAB في منتصف الحافة السفلية للشاشة.
الخلاصة
- Scaffold هي هيكل شاشة Material Design مع إدارة فتحات لـ TopAppBar و BottomBar و FAB و Drawer و Snackbar وهوامش نظام تلقائية.
- topBar و bottomBar و floatingActionButton هي فتحات Scaffold لدمج المكونات القياسية مع تحديد المواقع الصحيح.
- ScaffoldState يجمع بين DrawerState و SnackbarHostState، مما يوفر تحكمًا برمجيًا في القائمة الجانبية والإشعارات عبر coroutines.
- innerPadding هو معامل إلزامي لكتلة content، يحتوي على هوامش لعناصر النظام وفتحات Scaffold المثبتة.
- drawerGesturesEnabled و floatingActionButtonPosition هما معاملان إضافيان لضبط سلوك Scaffold.
- Scaffold تتعامل تلقائيًا مع الهوامش لشريط الحالة وشريط التنقل على الأجهزة ذات تكوينات الشاشة المختلفة.
- للشاشات البسيطة دون مكونات Material، Scaffold ليست إلزامية لكنها موصى بها كعنصر جذر للمعالجة الصحيحة لهوامش النظام.
سنقوم بتطوير تطبيق جوال جاهز
تقدم IT Sectr تطبيقات iOS وAndroid للشركات الناشئة والشركات منذ عام 2017. سوف نقدم لك النصح ونقترح أفضل حل.
اقرأ أيضًا