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 সমর্থন করে। কন্টেন্টের জন্য innerPadding গণনা করার সময় Scaffold 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-এ সংশ্লিষ্ট মার্জিন শূন্য হবে