SwipeToDismissBox উপাদানটি একজন ব্যবহারকারীকে বাম বা ডানে সোয়াইপ করে একটি আইটেমকে খারিজ বা আপডেট করতে দেয়।
API পৃষ্ঠ
 সোয়াইপ অঙ্গভঙ্গি দ্বারা ট্রিগার হওয়া ক্রিয়াগুলি বাস্তবায়ন করতে কম্পোজযোগ্য SwipeToDismissBox ব্যবহার করুন৷ মূল পরামিতি অন্তর্ভুক্ত:
-  
state: সোয়াইপ আইটেমের গণনার দ্বারা উত্পাদিত মান সংরক্ষণ করার জন্য তৈরি করাSwipeToDismissBoxStateঅবস্থা, যা উত্পাদিত হওয়ার সময় ইভেন্টগুলিকে ট্রিগার করে৷ -  
backgroundContent: আইটেম কন্টেন্টের পিছনে প্রদর্শিত একটি কাস্টমাইজযোগ্য কম্পোজেবল যা বিষয়বস্তু সোয়াইপ করার সময় প্রকাশিত হয়। 
মৌলিক উদাহরণ: সোয়াইপে আপডেট বা খারিজ করুন
এই উদাহরণের স্নিপেটগুলি একটি সোয়াইপ বাস্তবায়ন দেখায় যা হয় শুরু থেকে শেষ পর্যন্ত সোয়াইপ করার সময় আইটেমটিকে আপডেট করে, অথবা শেষ থেকে শুরুতে সোয়াইপ করার সময় আইটেমটিকে খারিজ করে।
data class TodoItem( val itemDescription: String, var isItemDone: Boolean = false )
@Composable fun TodoListItem( todoItem: TodoItem, onToggleDone: (TodoItem) -> Unit, onRemove: (TodoItem) -> Unit, modifier: Modifier = Modifier, ) { val swipeToDismissBoxState = rememberSwipeToDismissBoxState( confirmValueChange = { if (it == StartToEnd) onToggleDone(todoItem) else if (it == EndToStart) onRemove(todoItem) // Reset item when toggling done status it != StartToEnd } ) SwipeToDismissBox( state = swipeToDismissBoxState, modifier = modifier.fillMaxSize(), backgroundContent = { when (swipeToDismissBoxState.dismissDirection) { StartToEnd -> { Icon( if (todoItem.isItemDone) Icons.Default.CheckBox else Icons.Default.CheckBoxOutlineBlank, contentDescription = if (todoItem.isItemDone) "Done" else "Not done", modifier = Modifier .fillMaxSize() .background(Color.Blue) .wrapContentSize(Alignment.CenterStart) .padding(12.dp), tint = Color.White ) } EndToStart -> { Icon( imageVector = Icons.Default.Delete, contentDescription = "Remove item", modifier = Modifier .fillMaxSize() .background(Color.Red) .wrapContentSize(Alignment.CenterEnd) .padding(12.dp), tint = Color.White ) } Settled -> {} } } ) { ListItem( headlineContent = { Text(todoItem.itemDescription) }, supportingContent = { Text("swipe me to update or remove.") } ) } }
কোড সম্পর্কে মূল পয়েন্ট
-  
swipeToDismissBoxStateউপাদান অবস্থা পরিচালনা করে। আইটেমের সাথে ইন্টারঅ্যাকশন হয়ে গেলে এটিconfirmValueChangeকলব্যাককে ট্রিগার করে। কলব্যাক বডি বিভিন্ন সম্ভাব্য ক্রিয়া পরিচালনা করে। কলব্যাক একটি বুলিয়ান ফেরত দেয় যা উপাদানটিকে বলে যে এটি একটি খারিজ অ্যানিমেশন প্রদর্শন করবে কিনা। এই ক্ষেত্রে:-  যদি আইটেমটি শুরু থেকে শেষ পর্যন্ত সোয়াইপ করা হয়, তাহলে এটি 
onToggleDoneল্যাম্বডাকে কল করে, বর্তমানtodoItemঅতিক্রম করে। এটি করণীয় আইটেম আপডেট করার সাথে মিলে যায়। -  যদি আইটেমটি শেষ থেকে শুরুতে সোয়াইপ করা হয়, তাহলে এটি বর্তমান 
todoItemপাস করেonRemoveল্যাম্বডাকে কল করে। এটি করণীয় আইটেম মুছে ফেলার সাথে মিলে যায়। -  
it != StartToEnd: সোয়াইপের দিকStartToEndনা হলে এই লাইনটিtrueহয় এবং অন্যথায়false।falseরিটার্ন করাSwipeToDismissBoxএকটি "টগল করা হয়েছে" সোয়াইপ করার পর অবিলম্বে অদৃশ্য হতে বাধা দেয়, যা একটি ভিজ্যুয়াল নিশ্চিতকরণ বা অ্যানিমেশনের জন্য অনুমতি দেয়। 
 -  যদি আইটেমটি শুরু থেকে শেষ পর্যন্ত সোয়াইপ করা হয়, তাহলে এটি 
 -  
SwipeToDismissBoxপ্রতিটি আইটেমে অনুভূমিক সোয়াইপিং ইন্টারঅ্যাকশন সক্ষম করে। বিশ্রামে, এটি উপাদানটির অভ্যন্তরীণ বিষয়বস্তু দেখায়, কিন্তু যখন একজন ব্যবহারকারী সোয়াইপ করা শুরু করেন, তখন বিষয়বস্তু দূরে সরে যায় এবংbackgroundContentপ্রদর্শিত হয়। স্বাভাবিক বিষয়বস্তু এবংbackgroundContentউভয়ই নিজেদেরকে রেন্ডার করার জন্য প্যারেন্ট কন্টেইনারের সম্পূর্ণ সীমাবদ্ধতা পায়।contentbackgroundContentউপরে আঁকা হয়। এই ক্ষেত্রে:-  
backgroundContentSwipeToDismissBoxValueউপর ভিত্তি করে ব্যাকগ্রাউন্ডের রঙ সহ একটিIconহিসাবে প্রয়োগ করা হয়েছে: -  
StartToEndসোয়াইপ করার সময়Blue- একটি করণীয় আইটেম টগল করা। -  
EndToStartসোয়াইপ করার সময়Red- একটি করণীয় আইটেম মুছে ফেলা। -  
Settledজন্য পটভূমিতে কিছুই প্রদর্শিত হয় না — যখন আইটেমটি সোয়াইপ করা হয় না, তখন পটভূমিতে কিছুই প্রদর্শিত হয় না। -  একইভাবে, প্রদর্শিত 
Iconসোয়াইপের দিকনির্দেশের সাথে খাপ খায়: -  
StartToEndএকটিCheckBoxআইকন দেখায় যখন করণীয় আইটেমটি সম্পন্ন হয় এবং এটি সম্পন্ন না হলে একটিCheckBoxOutlineBlankআইকন দেখায়। -  
EndToStartএকটিDeleteআইকন প্রদর্শন করে। 
 -  
 
@Composable private fun SwipeItemExample() { val todoItems = remember { mutableStateListOf( TodoItem("Pay bills"), TodoItem("Buy groceries"), TodoItem("Go to gym"), TodoItem("Get dinner") ) } LazyColumn { items( items = todoItems, key = { it.itemDescription } ) { todoItem -> TodoListItem( todoItem = todoItem, onToggleDone = { todoItem -> todoItem.isItemDone = !todoItem.isItemDone }, onRemove = { todoItem -> todoItems -= todoItem }, modifier = Modifier.animateItem() ) } } }
কোড সম্পর্কে মূল পয়েন্ট
-  
mutableStateListOf(...)একটি পর্যবেক্ষণযোগ্য তালিকা তৈরি করে যাTodoItemঅবজেক্টকে ধরে রাখতে পারে। যখন এই তালিকা থেকে একটি আইটেম যোগ করা হয় বা সরানো হয়, তখন কম্পোজ UI এর অংশগুলিকে পুনর্গঠন করে যা এটির উপর নির্ভর করে।-  
mutableStateListOf()এর ভিতরে, চারটিTodoItemঅবজেক্ট তাদের নিজ নিজ বর্ণনা দিয়ে শুরু করা হয়েছে: "বিল পরিশোধ করুন", "মুদি কিনুন", "জিমে যান", এবং "ডিনার পান"। 
 -  
 -  
LazyColumntodoItemsএর একটি উল্লম্বভাবে স্ক্রোলিং তালিকা প্রদর্শন করে। -  
onToggleDone = { todoItem -> ... }হল একটি কলব্যাক ফাংশন যাTodoListItemমধ্যে থেকে আহ্বান করা হয় যখন ব্যবহারকারী একটি বস্তুকে সম্পন্ন হিসাবে চিহ্নিত করে। এটিtodoItemএরisItemDoneবৈশিষ্ট্য আপডেট করে। যেহেতুtodoItemsএকটিmutableStateListOf, এই পরিবর্তনটি UI আপডেট করে একটি পুনর্গঠন শুরু করে। -  
onRemove = { todoItem -> ... }হল একটি কলব্যাক ফাংশন যখন ব্যবহারকারী আইটেমটি সরিয়ে দেয়। এটিtodoItemsতালিকা থেকে নির্দিষ্টtodoItemসরিয়ে দেয়। এটি একটি পুনর্গঠনও ঘটায় এবং আইটেমটি প্রদর্শিত তালিকা থেকে সরানো হবে। -  প্রতিটি 
TodoListItemএ একটিanimateItemসংশোধক প্রয়োগ করা হয় যাতে আইটেমটি খারিজ হয়ে গেলে সংশোধকেরplacementSpecবলা হয়। এটি আইটেমটি অপসারণ, সেইসাথে তালিকার অন্যান্য আইটেমগুলির পুনর্বিন্যাসকে অ্যানিমেট করে৷ 
ফলাফল
নিম্নলিখিত ভিডিওটি পূর্ববর্তী স্নিপেটগুলি থেকে প্রাথমিক সোয়াইপ-টু-খারিজ কার্যকারিতা প্রদর্শন করে:
সম্পূর্ণ নমুনা কোডের জন্য GitHub উৎস ফাইলটি দেখুন।
উন্নত উদাহরণ: সোয়াইপে পটভূমির রঙ অ্যানিমেট করুন
নিম্নলিখিত স্নিপেটগুলি দেখায় যে কীভাবে সোয়াইপে একটি আইটেমের পটভূমির রঙ অ্যানিমেট করতে একটি অবস্থানগত থ্রেশহোল্ড অন্তর্ভুক্ত করতে হয়৷
data class TodoItem( val itemDescription: String, var isItemDone: Boolean = false )
@Composable fun TodoListItemWithAnimation( todoItem: TodoItem, onToggleDone: (TodoItem) -> Unit, onRemove: (TodoItem) -> Unit, modifier: Modifier = Modifier, ) { val swipeToDismissBoxState = rememberSwipeToDismissBoxState( confirmValueChange = { if (it == StartToEnd) onToggleDone(todoItem) else if (it == EndToStart) onRemove(todoItem) // Reset item when toggling done status it != StartToEnd } ) SwipeToDismissBox( state = swipeToDismissBoxState, modifier = modifier.fillMaxSize(), backgroundContent = { when (swipeToDismissBoxState.dismissDirection) { StartToEnd -> { Icon( if (todoItem.isItemDone) Icons.Default.CheckBox else Icons.Default.CheckBoxOutlineBlank, contentDescription = if (todoItem.isItemDone) "Done" else "Not done", modifier = Modifier .fillMaxSize() .drawBehind { drawRect(lerp(Color.LightGray, Color.Blue, swipeToDismissBoxState.progress)) } .wrapContentSize(Alignment.CenterStart) .padding(12.dp), tint = Color.White ) } EndToStart -> { Icon( imageVector = Icons.Default.Delete, contentDescription = "Remove item", modifier = Modifier .fillMaxSize() .background(lerp(Color.LightGray, Color.Red, swipeToDismissBoxState.progress)) .wrapContentSize(Alignment.CenterEnd) .padding(12.dp), tint = Color.White ) } Settled -> {} } } ) { OutlinedCard(shape = RectangleShape) { ListItem( headlineContent = { Text(todoItem.itemDescription) }, supportingContent = { Text("swipe me to update or remove.") } ) } } }
কোড সম্পর্কে মূল পয়েন্ট
-  
drawBehindIconকম্পোজেবলের বিষয়বস্তুর পিছনে সরাসরি ক্যানভাসে আঁকা।-  
drawRect()ক্যানভাসে একটি আয়তক্ষেত্র আঁকে এবং নির্দিষ্টColorদিয়ে অঙ্কন সুযোগের সম্পূর্ণ সীমানা পূরণ করে। 
 -  
 -  সোয়াইপ করার সময়, 
lerpব্যবহার করে আইটেমের পটভূমির রঙ মসৃণভাবে রূপান্তরিত হয়।-  
StartToEndথেকে একটি সোয়াইপের জন্য, পটভূমির রঙ ধীরে ধীরে হালকা ধূসর থেকে নীলে পরিবর্তিত হয়। -  
EndToStartথেকে একটি সোয়াইপের জন্য, পটভূমির রঙ ধীরে ধীরে হালকা ধূসর থেকে লালে পরিবর্তিত হয়৷ -  এক রঙ থেকে অন্য রঙে রূপান্তরের পরিমাণ 
swipeToDismissBoxState.progressদ্বারা নির্ধারিত হয়। 
 -  
 -  
OutlinedCardতালিকা আইটেমগুলির মধ্যে একটি সূক্ষ্ম ভিজ্যুয়াল বিচ্ছেদ যোগ করে। 
@Composable private fun SwipeItemWithAnimationExample() { val todoItems = remember { mutableStateListOf( TodoItem("Pay bills"), TodoItem("Buy groceries"), TodoItem("Go to gym"), TodoItem("Get dinner") ) } LazyColumn { items( items = todoItems, key = { it.itemDescription } ) { todoItem -> TodoListItemWithAnimation( todoItem = todoItem, onToggleDone = { todoItem -> todoItem.isItemDone = !todoItem.isItemDone }, onRemove = { todoItem -> todoItems -= todoItem }, modifier = Modifier.animateItem() ) } } }
কোড সম্পর্কে মূল পয়েন্ট
- এই কোড সম্পর্কে মূল পয়েন্টগুলির জন্য, পূর্ববর্তী বিভাগের মূল পয়েন্টগুলি দেখুন, যা একটি অভিন্ন কোড স্নিপেট বর্ণনা করে৷
 
ফলাফল
নিম্নলিখিত ভিডিওটি অ্যানিমেটেড ব্যাকগ্রাউন্ড কালার সহ উন্নত কার্যকারিতা দেখায়:
সম্পূর্ণ নমুনা কোডের জন্য GitHub উৎস ফাইলটি দেখুন।