اصلاحگر
draggable
نقطه ورود سطح بالا برای ژستهای کشیدن در یک جهت است،
و فاصله کشیدن را برحسب پیکسل گزارش میکند.
توجه داشته باشید که این اصلاحگر مشابه scrollable است، به این معنا که
فقط اشاره را تشخیص میدهد. باید وضعیت را حفظ کنید و آن را در صفحهنمایش نشان دهید
برای مثال، با جابهجا کردن عنصر ازطریق
offset
اصلاحگر:
@Composable private fun DraggableText() { var offsetX by remember { mutableFloatStateOf(0f) } Text( modifier = Modifier .offset { IntOffset(offsetX.roundToInt(), 0) } .draggable( orientation = Orientation.Horizontal, state = rememberDraggableState { delta -> offsetX += delta } ), text = "Drag me!" ) }
اگر نیاز دارید کل اشاره کشیدن را کنترل کنید، بهجای آن از آشکارساز اشاره کشیدن ازطریق اصلاحکننده
pointerInput
استفاده کنید.
@Composable private fun DraggableTextLowLevel() { Box(modifier = Modifier.fillMaxSize()) { var offsetX by remember { mutableFloatStateOf(0f) } var offsetY by remember { mutableFloatStateOf(0f) } Box( Modifier .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) } .background(Color.Blue) .size(50.dp) .pointerInput(Unit) { detectDragGestures { change, dragAmount -> change.consume() offsetX += dragAmount.x offsetY += dragAmount.y } } ) } }
تند کشیدن
اصلاحگر
swipeable
به شما امکان میدهد عناصر را بکشید که پساز رها شدن، بهسمت معمولاً
دو یا چند نقطه لنگر تعریفشده در یک جهت حرکت میکنند. کاربرد رایج این مورد
پیادهسازی الگوی «کشیدن برای بستن» است.
توجه داشته باشید که این اصلاحگر عنصر را حرکت نمیدهد، بلکه فقط اشاره را
تشخیص میدهد. باید وضعیت را حفظ کنید و آن را در صفحه با،
برای مثال، حرکت دادن عنصر ازطریق
offset
اصلاحگر نشان دهید.
وضعیت کشیدنی در اصلاحگر swipeable الزامی است و میتوان آن را با
rememberSwipeableState() ایجاد و بهخاطر سپرد.
این وضعیت همچنین مجموعهای از روشهای مفید برای پویانمایی برنامهریزیشده به
لنگرها (به
snapTo،
animateTo،
performFling،
و
performDrag)
و همچنین داراییهایی برای مشاهده پیشرفت کشیدن ارائه میدهد.
ژست تند کشیدن را میتوان بهگونهای پیکربندی کرد که انواع مختلفی از آستانهها را داشته باشد، مثلاً
FixedThreshold(Dp)
و
FractionalThreshold(Float)،
و این آستانهها میتوانند برای هر ترکیب نقطه لنگر از-به متفاوت باشند.
برای انعطافپذیری بیشتر، میتوانید resistance را هنگام تند کشیدن فراتر از
محدودهها و همچنین velocityThreshold را که تند کشیدن را به
وضعیت بعدی پویانمایی میکند پیکربندی کنید، حتی اگر به thresholds موقعیتی نرسیده باشید.
@OptIn(ExperimentalMaterialApi::class) @Composable private fun SwipeableSample() { val width = 96.dp val squareSize = 48.dp val swipeableState = rememberSwipeableState(0) val sizePx = with(LocalDensity.current) { squareSize.toPx() } val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states Box( modifier = Modifier .width(width) .swipeable( state = swipeableState, anchors = anchors, thresholds = { _, _ -> FractionalThreshold(0.3f) }, orientation = Orientation.Horizontal ) .background(Color.LightGray) ) { Box( Modifier .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) } .size(squareSize) .background(Color.DarkGray) ) } }
توصیهشده برای شما
- توجه: نوشتار پیوند وقتی جاوا اسکریپت خاموش است نمایش داده میشود
- آشنایی با اشارهها
- مثال پویانمایی پیشرفته: اشارهها {:#gesture-and-animation}
- پویانماییهای مقدارمحور