Jetpack Compose میں Scaffold — یہ کیا ہے، خصوصیات اور یہ کیسے کام کرتا ہے

Jetpack Compose میں Scaffold کیا ہے

Scaffold ایک composable فنکشن ہے جو Material Design تصریح کے مطابق اسکرین کے ڈھانچے کو نافذ کرتا ہے۔ Scaffold روایتی معنوں میں ایک کنٹینر نہیں ہے — یہ ایک لے آؤٹ مینیجر ہے جو اسکرین پر متعدد معیاری Material اجزاء کی جگہ کا تعین مربوط کرتا ہے۔

Scaffold TopAppBar، BottomBar اور FloatingActionButton کے لیے مارجن کا انتظام کرتا ہے، نیز سسٹم عناصر — اسٹیٹس بار اور نیویگیشن بار کا بھی۔ یہ یقینی بناتا ہے کہ مواد سسٹم عناصر کے ساتھ اوورلیپ نہ ہو اور Material Design رہنما اصولوں کی تعمیل کرے۔

Material Design Guidelines, 2025 کے مطابق، Scaffold کو ہر ایپ اسکرین کا جڑ عنصر ہونا چاہیے۔ یہ View سسٹم سے پرانے CoordinatorLayout کی جگہ لیتا ہے اور اسکرین لے آؤٹ بنانے کے لیے ایک آسان، اعلانیہ API فراہم کرتا ہے۔

بنیادی Scaffold دستخط

Scaffold پیرامیٹر modifier، scaffoldState، topBar، bottomBar، floatingActionButton، drawerContent، snackbarHost اور content کو قبول کرتا ہے۔ content پیرامیٹر PaddingValues وصول کرتا ہے — وہ مارجن جنہیں مرکزی مواد کو مدنظر رکھنا چاہیے۔

@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 مواد کے لیے innerPadding کا حساب لگاتے وقت bottomBar کی اونچائی کو مدنظر رکھتا ہے۔ Material Design Guidelines, 2025 کے مطابق، bottomBar کو 3–5 نیویگیشن پوائنٹس والی اسکرینوں پر استعمال کیا جانا چاہیے۔

floatingActionButton فلوٹنگ ایکشن بٹن کے لیے سلاٹ ہے۔ Scaffold خود بخود FAB کو Material Design تصریح کے مطابق رکھتا ہے — صحیح مارجن کے ساتھ نیچے دائیں کونے میں۔ floatingActionButtonPosition FAB کو اسکرین کے نیچے والے کنارے کے مرکز میں منتقل کرنے کی اجازت دیتا ہے۔

تمام سلاٹس کے ساتھ مثال

اس مثال میں، Scaffold تمام اہم سلاٹس استعمال کرتا ہے: عنوان کے ساتھ TopAppBar، تین نیویگیشن آئٹمز کے ساتھ BottomBar اور اہم عمل کے لیے FloatingActionButton۔

@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 پروگرامیٹک Drawer کنٹرول کے لیے open اور close طریقے فراہم کرتا ہے۔ Drawer کی حالت کھلی، بند یا جزوی طور پر کھلی ہو سکتی ہے۔ drawerGesturesEnabled Drawer کھولنے کے لیے سوائپ جیسچر کو غیر فعال کرنے کی اجازت دیتا ہے، صرف بٹن کے ذریعے پروگرامیٹک کھولنا چھوڑ کر۔

SnackbarHostState Snackbar کا انتظام کرتا ہے — اسکرین کے نیچے والے حصے میں عارضی اطلاعات۔ showSnackbar طریقہ ایک پیغام اور اختیاری عمل کے ساتھ Snackbar ظاہر کرتا ہے۔ Material Design Guidelines, 2025 کے مطابق، Snackbar کو اہم معلومات کے بغیر مختصر پیغامات کے لیے استعمال کیا جانا چاہیے۔

@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 کے ساتھ ایک مکمل اسکرین کی مثال میں FAB دبانے پر اطلاعات ظاہر کرنے کے لیے TopAppBar، BottomNavigation، FloatingActionButton اور Snackbar شامل ہیں۔ حالت کے ہم آہنگی کے لیے ScaffoldState تمام اجزاء کو منتقل کیا جاتا ہے۔

@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 کے ذریعے لاگو کیا جاتا ہے۔

• Modifier.padding(innerPadding) کے ذریعے مواد کے جڑ کنٹینر پر innerPadding لاگو کریں
• اسکرول ایبل کنٹینرز کے لیے Modifier.consumeWindowInsets(innerPadding) استعمال کریں
• اسٹیٹس بار کے لیے اضافی مارجن شامل نہ کریں — Scaffold یہ خود بخود کرتا ہے
• اگر topBar یا bottomBar غائب ہے تو، innerPadding میں متعلقہ مارجن صفر ہوں گے