Функция SwipeToDismissBox

Функция SwipeToDismissBox из material3 оборачивает строку жестом смахивания. Состояние хранят в state, его создают через rememberSwipeToDismissBoxState с начальным значением SwipeToDismissBoxValue.Settled и колбэком confirmValueChange. Под карточкой рисуют backgroundContent, саму строку - в content. Флаг enableDismissFromStartToEnd разрешает смахивание вправо. Это не PullToRefresh и не старый SwipeToDismiss.

Синтаксис

SwipeToDismissBox(
	state = dismissState,
	enableDismissFromStartToEnd = true,
	backgroundContent = { },
	content = { },
)

Параметры

Параметр	Описание
`state`	Состояние смахивания. Получают из `rememberSwipeToDismissBoxState` с нужным `confirmValueChange`.
`backgroundContent`	Лямбда с фоном, который виден под сдвигаемой строкой.
`content`	Лямбда с основной строкой, которую тянут пальцем.
`enableDismissFromStartToEnd`	Если `true`, строку можно смахнуть с начала к концу.

Пример

Давайте покажем красный фон при смахивании строки:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SwipeToDismissBox
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSwipeToDismissBoxState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val dismissState = rememberSwipeToDismissBoxState()
			SwipeToDismissBox(
				state = dismissState,
				enableDismissFromStartToEnd = true,
				backgroundContent = {
					Box(
						modifier = Modifier
							.fillMaxSize()
							.background(Color.Red),
						contentAlignment = Alignment.CenterEnd,
					) {
						Text(
							text = "12345",
							modifier = Modifier.padding(16.dp),
							color = Color.White,
						)
					}
				},
				content = {
					Box(
						modifier = Modifier
							.fillMaxWidth()
							.background(Color.LightGray)
							.padding(16.dp),
					) {
						Text(text = "abcde")
					}
				},
			)
		}
	}
}

На экране при смахивании серой плашки вправо под ней появится красный фон с текстом "12345".

Пример

Давайте запретим смахивание вправо:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SwipeToDismissBox
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSwipeToDismissBoxState
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val dismissState = rememberSwipeToDismissBoxState()
			SwipeToDismissBox(
				state = dismissState,
				enableDismissFromStartToEnd = false,
				backgroundContent = {
					Box(
						modifier = Modifier
							.fillMaxWidth()
							.background(Color.Red),
					)
				},
				content = {
					Text(
						text = "abcde",
						modifier = Modifier
							.fillMaxWidth()
							.background(Color.LightGray)
							.padding(16.dp),
					)
				},
			)
		}
	}
}

На экране строку "abcde" нельзя будет смахнуть вправо, красный фон не откроется.

Смотрите также

метод draggable,
который тянет элемент без фона dismiss
метод anchoredDraggable,
который фиксирует сдвиг на якорях
функция ListItem,
которую часто кладут в content
метод pointerInput,
который ловит жесты вручную