النقر والضغط

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تتضمّن العديد من العناصر القابلة للتجميع وظائف مدمجة للنقرات أو النقرات، وتشمل دالة MATLAB onClick. على سبيل المثال، يمكنك إنشاء رمز Surface قابل للنقر عليه ويضمّ جميع سلوكيات تصميم المواد المناسبة للتفاعل مع مساحات العرض:

Surface(onClick = { /* handle click */ }) {
    Text("Click me!", Modifier.padding(24.dp))
}
TapAndPress.kt

ولكن النقرات ليست الطريقة الوحيدة التي يمكن للمستخدم من خلالها التفاعل مع العناصر القابلة للتجميع. تركّز هذه الصفحة على الإيماءات التي تتضمّن مؤشرًا واحدًا، حيث لا يكون موضع هذا المؤشر مهمًا لمعالجة هذا الحدث. يسرد الجدول التالي أنواع الإيماءات التالية:

الردّ على النقر أو النقر

clickable هو مُعدِّل شائع الاستخدام يجعل العنصر القابل للتجميع يتفاعل مع النقرات. يضيف هذا المُعدِّل أيضًا ميزات إضافية، مثل إتاحة استخدام ميزة التركيز، وتمرير الماوس والقلم الرصاص فوق الشاشة، ومؤشر مرئي قابل للتخصيص عند الضغط عليه. يستجيب المُعدِّل "للنقر" بمفهومه الأوسع، ليس فقط باستخدام الماوس أو الإصبع، ولكن أيضًا من خلال أحداث النقر من خلال إدخال لوحة المفاتيح أو عند استخدام خدمات تسهيل الاستخدام.

لنفترض أنّ هناك شبكة من الصور، تظهر فيها صورة بملء الشاشة عندما يصنّفها أحد المستخدمين كصورة مفضّلة:

يمكنك إضافة المُعدِّل clickable إلى كل عنصر في الشبكة لتنفيذ هذا السلوك:

@Composable
private fun ImageGrid(photos: List<Photo>) {
    var activePhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
    LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
        items(photos, { it.id }) { photo ->
            ImageItem(
                photo,
                Modifier.clickable { activePhotoId = photo.id }
            )
        }
    }
    if (activePhotoId != null) {
        FullScreenImage(
            photo = photos.first { it.id == activePhotoId },
            onDismiss = { activePhotoId = null }
        )
    }
}
TapAndPress.kt

يضيف مفتاح التعديل clickable أيضًا سلوكًا إضافيًا:

• interactionSource وindication، اللذان يرسمان تموجًا تلقائيًا عندما ينقر المستخدم على المحتوى القابل للإنشاء. تعرَّف على كيفية تخصيص هذه الإعدادات في صفحة معالجة تفاعلات المستخدِمين.
• السماح لخدمات تسهيل الاستخدام بالتفاعل مع العنصر من خلال ضبط معلومات الدلالات
• يتيح التفاعل باستخدام لوحة المفاتيح أو ذراع التحكم من خلال السماح بالتركيز والضغط على Enter أو وسط لوحة التوجيه للتفاعل.
• اجعل العنصر قابلاً للمَرّر فوقه، حتى يستجيب للماوس أو قلم الشاشة عند تمريرهما فوقه.

الضغط مع الاستمرار لعرض قائمة سياقية

يتيح لك combinedClickable إضافة سلوك النقر مرّتين أو الضغط مع الاستمرار بالإضافة إلى سلوك النقر العادي. يمكنك استخدام combinedClickable لعرض قائمة سياق عندما يلمس المستخدم صورة شبكة ويضغط عليها مع الاستمرار:

var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
val haptics = LocalHapticFeedback.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
    items(photos, { it.id }) { photo ->
        ImageItem(
            photo,
            Modifier
                .combinedClickable(
                    onClick = { activePhotoId = photo.id },
                    onLongClick = {
                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
                        contextMenuPhotoId = photo.id
                    },
                    onLongClickLabel = stringResource(R.string.open_context_menu)
                )
        )
    }
}
if (contextMenuPhotoId != null) {
    PhotoActionsSheet(
        photo = photos.first { it.id == contextMenuPhotoId },
        onDismissSheet = { contextMenuPhotoId = null }
    )
}
TapAndPress.kt

من أفضل الممارسات تضمين ملاحظات لمسية عندما يضغط المستخدم لوقت طويل على العناصر، ولهذا السبب يتضمّن المقتطف performHapticFeedback.

إغلاق عنصر قابل للتجميع من خلال النقر على شاشة تمويه

في الأمثلة أعلاه، تضيف clickable وcombinedClickable وظائف مفيدة إلى العناصر القابلة للتجميع. وتعرض هذه العناصر مؤشرًا مرئيًا على التفاعل، وتستجيب للمرّة التي تمرّ فيها مؤشر الماوس فوقها، وتتيح التركيز ولوحة المفاتيح وتسهيل الاستخدام. ولكن لا يكون هذا السلوك الإضافي مرغوبًا فيه دائمًا.

لنلقِ نظرة على شاشة تفاصيل الصورة. يجب أن تكون الخلفية شفافة جزئيًا ويجب أن يتمكّن المستخدم من النقر على هذه الخلفية لإغلاق شاشة التفاصيل:

في هذه الحالة، يجب ألا يتضمّن هذا الخلفية أي إشارة مرئية بشأن التفاعل، ويجب ألا يستجيب للمرور فوقه، ويجب ألا يكون قابلاً للتركيز، ويجب أن يختلف ردّ فعله على أحداث لوحة المفاتيح وإمكانية الاستخدام عن ردّ فعل العنصر المكوّن المعتاد. بدلاً من محاولة تكييف سلوك clickable، يمكنك الرجوع إلى مستوى أقل من التجريد واستخدام المُعدِّل pointerInput مباشرةً مع الطريقة detectTapGestures:

@Composable
private fun Scrim(onClose: () -> Unit, modifier: Modifier = Modifier) {
    val strClose = stringResource(R.string.close)
    Box(
        modifier
            // handle pointer input
            .pointerInput(onClose) { detectTapGestures { onClose() } }
            // handle accessibility services
            .semantics(mergeDescendants = true) {
                contentDescription = strClose
                onClick {
                    onClose()
                    true
                }
            }
            // handle physical keyboard input
            .onKeyEvent {
                if (it.key == Key.Escape) {
                    onClose()
                    true
                } else {
                    false
                }
            }
            // draw scrim
            .background(Color.DarkGray.copy(alpha = 0.75f))
    )
}
TapAndPress.kt

ويكون مفتاح مفتاح التعديل pointerInput هو دالة لامدا onClose. يؤدي ذلك إلى إعادة تنفيذ دالة lambda تلقائيًا، ما يضمن استدعاء دالة الاستدعاء الصحيحة عندما ينقر المستخدم على الشاشة البينية.

النقر مرّتين للتكبير أو التصغير

في بعض الأحيان، لا يتضمّن clickable وcombinedClickable معلومات كافية للردّ على التفاعل بالطريقة الصحيحة. على سبيل المثال، قد تحتاج العناصر القابلة للتجميع إلى الوصول إلى الموضع الذي حدث فيه التفاعل ضمن حدود العنصر القابل للتجميع.

لنلقِ نظرة على شاشة تفاصيل الصورة مرة أخرى. من أفضل الممارسات إتاحة تكبير الصورة من خلال النقر مرّتين:

كما هو موضّح في الفيديو، يحدث التكبير حول موضع حدث النقر. تختلف النتيجة عند تكبير الجزء الأيسر من الصورة مقارنةً بالجزء الأيمن. يمكننا استخدام المُعدِّل pointerInput مع detectTapGestures لدمج موضع النقر في حسابنا:

var zoomed by remember { mutableStateOf(false) }
var zoomOffset by remember { mutableStateOf(Offset.Zero) }
Image(
    painter = rememberAsyncImagePainter(model = photo.highResUrl),
    contentDescription = null,
    modifier = modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onDoubleTap = { tapOffset ->
                    zoomOffset = if (zoomed) Offset.Zero else
                        calculateOffset(tapOffset, size)
                    zoomed = !zoomed
                }
            )
        }
        .graphicsLayer {
            scaleX = if (zoomed) 2f else 1f
            scaleY = if (zoomed) 2f else 1f
            translationX = zoomOffset.x
            translationY = zoomOffset.y
        }
)
TapAndPress.kt