تفعيل تفاعلات المستخدم

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

تحديد نص

لا يمكن اختيار الدوال المركّبة تلقائيًا، ما يعني أنّه لا يمكن للمستخدمين اختيار نص من تطبيقك ونسخه. لتفعيل اختيار النص، يمكنك تضمين عناصر النص في دالة SelectionContainer المركّبة:

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

فقرة نصية قصيرة يختارها المستخدم

قد تحتاج إلى إيقاف الاختيار في أجزاء معيّنة من منطقة قابلة للاختيار. لإجراء ذلك، عليك تضمين الجزء غير القابل للاختيار في دالة مركّبة DisableSelection:

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

فقرة نصية أطول حاول المستخدم تحديد الفقرة بأكملها، ولكن لم يتم تحديد السطرَين اللذين تم تطبيق DisableSelection عليهما.

إنشاء أقسام نصية قابلة للنقر باستخدام LinkAnnotation

للاستماع إلى النقرات على Text، يمكنك إضافة المُعدِّل clickable. ومع ذلك، قد ترغب في إرفاق معلومات إضافية بجزء معين من قيمة Text، مثل عنوان URL مرفق بكلمة معينة ليتم فتحه في المتصفح. في مثل هذه الحالات، عليك استخدام LinkAnnotation، وهو تعليق توضيحي يمثّل جزءًا من النص يمكن النقر عليه.

باستخدام LinkAnnotation، يمكنك إرفاق عنوان URL بجزء من دالة Text مركّبة يتم فتحه تلقائيًا بعد النقر عليه، كما هو موضّح في المقتطف التالي:

@Composable
fun AnnotatedStringWithLinkSample() {
    // Display multiple links in the text
    Text(
        buildAnnotatedString {
            append("Go to the ")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/",
                    TextLinkStyles(style = SpanStyle(color = Color.Blue))
                )
            ) {
                append("Android Developers ")
            }
            append("website, and check out the")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(style = SpanStyle(color = Color.Green))
                )
            ) {
                append("Compose guidance")
            }
            append(".")
        }
    )
}

يمكنك أيضًا ضبط إجراء مخصّص استجابةً لنقرة المستخدم على جزء من دالة Text المركّبة. في المقتطف التالي، عندما ينقر المستخدم على "Jetpack Compose"، يتم عرض رابط، ويتم تسجيل المقاييس إذا نقر المستخدم على الرابط:

@Composable
fun AnnotatedStringWithListenerSample() {
    // Display a link in the text and log metrics whenever user clicks on it. In that case we handle
    // the link using openUri method of the LocalUriHandler
    val uriHandler = LocalUriHandler.current
    Text(
        buildAnnotatedString {
            append("Build better apps faster with ")
            val link =
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(SpanStyle(color = Color.Blue))
                ) {
                    val url = (it as LinkAnnotation.Url).url
                    // log some metrics
                    uriHandler.openUri(url)
                }
            withLink(link) { append("Jetpack Compose") }
        }
    )
}