نص النمط

تتضمّن العناصر القابلة للتجميع من النوع Text عدة مَعلمات اختيارية لتنسيق محتواها. في ما يلي قائمة بالمَعلمات التي تغطي حالات الاستخدام الأكثر شيوعًا مع النص. للاطّلاع على جميع مَعلمات Text، اطّلِع على Compose Text رمز المصدر.

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

أنماط النصوص الشائعة

تصف الأقسام التالية الطرق الشائعة لاختيار نمط النص.

تغيير لون النص

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

الكلمات

تغيير حجم النص

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

الكلمات

جعل النص مائلاً

استخدِم المَعلمة fontStyle لكتابة النص بخط مائل (أو اضبط FontStyle آخر).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

الكلمات

جعل النص غامقًا

استخدِم مَعلمة fontWeight لجعل النص غامقًا (أو اضبط قيمة FontWeight أخرى).

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

الكلمات

إضافة ظل

تتيح لك المعلمة style ضبط كائن من النوع TextStyle وضبط معلمات متعددة، مثل الظل. تتلقّى Shadow لونًا للظل أو الإزاحة أو مكانها بالنسبة إلى Text ونصف قطر التمويه الذي يبدو مموّهًا.

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}
TextSnippets.kt

الكلمات

إضافة أنماط متعددة في النص

لضبط أنماط مختلفة ضمن العنصر القابل للتجميع Text نفسه، استخدِم AnnotatedString، وهي سلسلة يمكن وضع تعليقات توضيحية عليها باستخدام أنماط من التعليقات التوضيحية العشوائية.

AnnotatedString هي فئة بيانات تحتوي على ما يلي:

  • قيمة Text
  • List من النوع SpanStyleRange، ما يعادل النمط المضمّن مع نطاق الترتيب ضمن قيمة النص
  • List من ParagraphStyleRange، لتحديد محاذاة النص واتجاهه وارتفاع السطر ونمط المسافة البادئة للنص

إنّ TextStyle مخصّص للاستخدام في Text القابل للإنشاء، بينما يُستخدم SpanStyle وParagraphStyle في AnnotatedString. لمزيد من المعلومات عن الأنماط المتعدّدة في فقرة، يُرجى الاطّلاع على إضافة أنماط متعدّدة في فقرة.

يحتوي AnnotatedString على أداة إنشاء آمنة من حيث النوع لتسهيل إنشاء: buildAnnotatedString.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}
TextSnippets.kt

الكلمات

تفعيل التنسيق المتقدّم باستخدام Brush

لتفعيل تنسيق نص أكثر تقدّمًا، يمكنك استخدام واجهة برمجة التطبيقات Brush مع TextStyle وSpanStyle. يمكنك الآن استخدام Brush في أي مكان تستخدم فيه عادةً TextStyle أو SpanStyle.

استخدام فرشاة لتحديد نمط النص

يمكنك ضبط النص باستخدام فرشاة مدمَجة في TextStyle. على سبيل المثال، يمكنك ضبط فرشاة linearGradient على النص على النحو التالي:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

استخدام دالة linearGradient في Brush API مع قائمة محدّدة من الألوان
الشكل 2. استخدام دالة linearGradient في Brush API مع قائمة محدّدة من الألوان

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

عمليات التكامل

بما أنّه يمكنك استخدام Brush مع كلّ من TextStyle وSpanStyle، يكون الدمج مع TextField وbuildAnnotatedString سلسًا.

لمزيد من المعلومات عن استخدام Brush API ضمن TextField، راجِع إدخال الأنماط باستخدام Brush API.

تنسيق إضافي باستخدام SpanStyle

تطبيق فرشاة على جزء من النص

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

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

استخدام فرشاة تلقائية مع linearGradient كنمط للنص
الشكل 4. استخدام فرشاة تلقائية مع linearGradient كنمط لـ Text
التعتيم في نطاق نصي

لضبط مستوى الشفافية لجزء معيّن من النص، استخدِم المَعلمة alpha الاختيارية في SpanStyle. استخدِم الفرشاة نفسها لتطبيقها على كلا جزءَي النص، وغيِّر مَعلمة ألفا في النطاق المقابل. في نموذج الرمز، يتم عرض الفاصل الأول من النص بنصف مستوى الشفافية (alpha =.5f) بينما يتم عرض الفاصل الثاني بمستوى شفافية كامل (alpha = 1f).

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

باستخدام مَعلمة alpha في buildAnnotatedString وSpanStyle، بالإضافة إلى linearGradient لإضافة مستوى التعتيم إلى نطاق نص
الشكل 5. استخدام مَعلمة alpha في buildAnnotatedString وSpanStyle، بالإضافة إلى linearGradient لإضافة مستوى شفافية إلى جزء من النص

مصادر إضافية

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

تطبيق تأثير المظلة على النص

يمكنك تطبيق مفتاح التعديل basicMarquee على أي عنصر قابل للإنشاء لإنشاء تأثير تمرير متحرك. يحدث تأثير المظلة إذا كان المحتوى واسعًا جدًا بحيث لا يمكن وضعه ضمن القيود المتاحة. يتم تلقائيًا ضبط إعدادات معيّنة (مثل السرعة والتأخير الأوّلي) في basicMarquee، ولكن يمكنك تعديل هذه المَعلمات لتخصيص التأثير.

ينفِّذ المقتطف التالي تأثيرًا أساسيًا للتمييز على عنصر Text قابل للتركيب:

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

الشكل 6: مُعدِّل basicMarquee المطبَّق على النص