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
উভয়ই নিজেদেরকে রেন্ডার করার জন্য প্যারেন্ট কন্টেইনারের সম্পূর্ণ সীমাবদ্ধতা পায়।content
backgroundContent
উপরে আঁকা হয়। এই ক্ষেত্রে:-
backgroundContent
SwipeToDismissBoxValue
উপর ভিত্তি করে ব্যাকগ্রাউন্ডের রঙ সহ একটি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
অবজেক্ট তাদের নিজ নিজ বর্ণনা দিয়ে শুরু করা হয়েছে: "বিল পরিশোধ করুন", "মুদি কিনুন", "জিমে যান", এবং "ডিনার পান"।
-
-
LazyColumn
todoItems
এর একটি উল্লম্বভাবে স্ক্রোলিং তালিকা প্রদর্শন করে। -
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.") } ) } } }
কোড সম্পর্কে মূল পয়েন্ট
-
drawBehind
Icon
কম্পোজেবলের বিষয়বস্তুর পিছনে সরাসরি ক্যানভাসে আঁকা।-
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 উৎস ফাইলটি দেখুন।