Scaffold
ম্যাটেরিয়াল ডিজাইনে, স্কাফোল্ড হলো একটি মৌলিক কাঠামো যা জটিল ইউজার ইন্টারফেসের জন্য একটি প্রমিত প্ল্যাটফর্ম প্রদান করে। এটি UI-এর বিভিন্ন অংশ, যেমন অ্যাপ বার এবং ফ্লোটিং অ্যাকশন বাটনগুলোকে একত্রে ধরে রাখে, যা অ্যাপগুলোকে একটি সুসংহত রূপ ও অনুভূতি দেয়।
উদাহরণ
Scaffold কম্পোজেবল একটি সহজবোধ্য এপিআই প্রদান করে, যা ব্যবহার করে আপনি ম্যাটেরিয়াল ডিজাইন নির্দেশিকা অনুসারে দ্রুত আপনার অ্যাপের কাঠামো তৈরি করতে পারেন। Scaffold প্যারামিটার হিসেবে বেশ কয়েকটি কম্পোজেবল গ্রহণ করে। এগুলোর মধ্যে নিম্নলিখিতগুলো অন্তর্ভুক্ত:
-
topBar: স্ক্রিনের উপরের অংশে থাকা অ্যাপ বার। -
bottomBar: স্ক্রিনের নিচের দিকে থাকা অ্যাপ বার। -
floatingActionButton: একটি বাটন যা স্ক্রিনের নিচের-ডান কোণায় ভেসে থাকে এবং যা ব্যবহার করে আপনি কী-অ্যাকশনগুলো প্রকাশ করতে পারেন।
আপনি অন্যান্য কন্টেইনারের মতোই Scaffold কন্টেন্টও পাস করতে পারেন। এটি content ল্যাম্বডাতে PaddingValues পাস করে, যা আপনার কন্টেন্টের আকার সীমিত করার জন্য তার রুট কম্পোজেবলে প্রয়োগ করা উচিত।
নিম্নলিখিত উদাহরণটিতে একটি সম্পূর্ণ Scaffold বাস্তবায়ন দেখানো হয়েছে। এতে একটি উপরের অ্যাপ বার, একটি নিচের অ্যাপ বার এবং একটি ফ্লোটিং অ্যাকশন বাটন রয়েছে।
@Composable fun ScaffoldExample() { var presses by remember { mutableIntStateOf(0) } Scaffold( topBar = { TopAppBar( colors = topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Top app bar") } ) }, bottomBar = { BottomAppBar( containerColor = MaterialTheme.colorScheme.primaryContainer, contentColor = MaterialTheme.colorScheme.primary, ) { Text( modifier = Modifier .fillMaxWidth(), textAlign = TextAlign.Center, text = "Bottom app bar", ) } }, floatingActionButton = { FloatingActionButton(onClick = { presses++ }) { Icon(Icons.Default.Add, contentDescription = "Add") } } ) { innerPadding -> Column( modifier = Modifier .padding(innerPadding), verticalArrangement = Arrangement.spacedBy(16.dp), ) { Text( modifier = Modifier.padding(8.dp), text = """ This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button. It also contains some basic inner content, such as this text. You have pressed the floating action button $presses times. """.trimIndent(), ) } } }
এই বাস্তবায়নটি নিম্নরূপ:
