বটম শিট

Material Design 3 মোডাল বটম শীটের একটি উদাহরণ।

আপনি বটম শিট প্রয়োগ করতে চাইলে, আপনি ModalBottomSheet কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করতে পারবেন।

আপনি content স্লট ব্যবহার করতে পারেন, যা কলামে কন্টেন্ট কম্পোজেবল লেআউট করার জন্য ColumnScope ব্যবহার করে:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}

প্রোগ্রামাটিক উপায়ে কন্ট্রোল শিটের স্টেট কন্ট্রোল করা

প্রোগ্রামাটিক উপায়ে শিট বড় ও ছোট করতে, SheetState ব্যবহার করুন। ModalBottomSheet-এ sheetState প্যারামিটার সহ পাস করতে হবে এমন SheetState-এর একটি ইনস্ট্যান্স তৈরি করতে আপনি rememberModalBottomSheetState ব্যবহার করতে পারবেন। SheetState show ও hide ফাংশনে অ্যাক্সেস দেয়, পাশাপাশি বর্তমান শীটের স্ট্যাটাস সম্পর্কিত প্রপার্টিও দেয়। এইসব সাসপেন্ডিং ফাংশনের জন্য CoroutineScope প্রয়োজন — যেমন, rememberCoroutineScope ব্যবহার করা — এবং আপনি UI ইভেন্টের উত্তরে এগুলিকে কল করতে পারেন। বটম শিট লুকানোর পরে কম্পোজিশন থেকে ModalBottomSheet সরিয়ে দিতে ভুলবেন না।

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}

Jetpack Compose-এ কন্টেন্ট দেখানো একটি মডেল বটম শিট।