খারিজ বা আপডেট করতে সোয়াইপ করুন

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 হয় এবং অন্যথায় falsefalse রিটার্ন করা 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 বলা হয়। এটি আইটেমটি অপসারণ, সেইসাথে তালিকার অন্যান্য আইটেমগুলির পুনর্বিন্যাসকে অ্যানিমেট করে৷

ফলাফল

নিম্নলিখিত ভিডিওটি পূর্ববর্তী স্নিপেটগুলি থেকে প্রাথমিক সোয়াইপ-টু-খারিজ কার্যকারিতা প্রদর্শন করে:

চিত্র 1 । সোয়াইপ-টু-খারিজ করার একটি মৌলিক প্রয়োগ যা একটি আইটেমকে সম্পূর্ণ হিসাবে চিহ্নিত করতে পারে এবং একটি তালিকায় একটি আইটেমের জন্য খারিজ অ্যানিমেশন দেখাতে পারে।

সম্পূর্ণ নমুনা কোডের জন্য 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()
            )
        }
    }
}

কোড সম্পর্কে মূল পয়েন্ট

  • এই কোড সম্পর্কে মূল পয়েন্টগুলির জন্য, পূর্ববর্তী বিভাগের মূল পয়েন্টগুলি দেখুন, যা একটি অভিন্ন কোড স্নিপেট বর্ণনা করে৷

ফলাফল

নিম্নলিখিত ভিডিওটি অ্যানিমেটেড ব্যাকগ্রাউন্ড কালার সহ উন্নত কার্যকারিতা দেখায়:

চিত্র 2 । অ্যানিমেটেড ব্যাকগ্রাউন্ড কালার এবং অ্যাকশন রেজিস্টার হওয়ার আগে লম্বা থ্রেশহোল্ড সহ প্রকাশ বা মুছে ফেলার জন্য সোয়াইপ করার একটি বাস্তবায়ন।

সম্পূর্ণ নমুনা কোডের জন্য GitHub উৎস ফাইলটি দেখুন।

অতিরিক্ত সম্পদ