Scaffold

Material Design-এ, স্ক্যাফোল্ড হল একটি মৌলিক স্ট্রাকচার যা জটিল ইউজার ইন্টারফেসের জন্য একটি স্ট্যান্ডার্ডাইজড প্ল্যাটফর্ম প্রদান করে। এটি অ্যাপ বার ও ফ্লোটিং অ্যাকশন বোতামের মতো UI-এর বিভিন্ন পার্টকে একসাথে ধরে রাখে, যার ফলে অ্যাপগুলি একটি সুসংহত লুক ও ফিল পায়।

উদাহরণ

Scaffold কম্পোজ করার উপযুক্ত এলিমেন্ট আপনাকে একটি সহজ API প্রদান করে যা আপনি Material Design নির্দেশিকা অনুসারে আপনার অ্যাপের স্ট্রাকচার দ্রুত অ্যাসেম্বল করতে ব্যবহার করতে পারেন। Scaffold প্যারামিটার হিসেবে একাধিক কম্পোজ করার উপযুক্ত আইটেম গ্রহণ করে। এর মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত:

  • topBar: স্ক্রিনের উপরের দিকে অ্যাপ বার।
  • bottomBar: স্ক্রিনের নিচে অ্যাপ বার।
  • floatingActionButton: স্ক্রিনের নিচে ডানদিকের কোণে হোভার করা একটি বোতাম যা আপনি মূল অ্যাকশন দেখাতে ব্যবহার করতে পারেন।

এছাড়াও, আপনি অন্যান্য কন্টেনারে যেভাবে Scaffold কন্টেন্ট পাস করেন, সেইভাবে করতে পারবেন। এটি PaddingValues-কে content lambda-তে পাস করে যা আপনাকে নিজের কন্টেন্টের রুট কম্পোজ করার উপযুক্ত আইটেমে প্রয়োগ করতে হবে যাতে এর সাইজ সীমিত করা যায়।

নিচের উদাহরণে একটি সম্পূর্ণ 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(),
            )
        }
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

সহজ টপ ও বটম অ্যাপ বার সহ স্ক্যাফোল্ডের একটি প্রয়োগ, সেইসাথে একটি ফ্লোটিং অ্যাকশন বোতাম যা একটি কাউন্টারকে ইটারেট করে। স্ক্যাফোল্ডের ভিতরের কন্টেন্ট হল সাধারণ টেক্সট যা কম্পোনেন্টকে ব্যাখ্যা করে।
ছবি ১. স্ক্যাফোল্ডের প্রয়োগ।

অতিরিক্ত রিসোর্স