استخدام RichText في Flutter: الدليل والأمثلة

في Flutter ، RichText عبارة عن عنصر واجهة مستخدم يسمح لك بإنشاء نص بأنماط وتنسيقات مختلفة داخل عنصر واجهة مستخدم نص واحد. يمكنك استخدام TextSpan عناصر واجهة مستخدم متعددة لتحديد أجزاء مختلفة من النص بأنماط مختلفة.

فيما يلي مثال لكيفية الاستخدام RichText:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('RichText Example'),  
     ),  
      body: Center(  
        child: RichText(  
          text: TextSpan(  
            text: 'Hello ',  
            style: DefaultTextStyle.of(context).style,  
            children: <TextSpan>[  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: ' is amazing!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

في هذا المثال، RichText يتم استخدام عنصر واجهة المستخدم لإنشاء نص بأنماط مختلفة. يتم استخدام الأدوات TextSpan كعناصر فرعية لتحديد الأجزاء المختلفة من النص باستخدام أنماط مميزة.

• يتم تصميم الأول TextSpan باستخدام نمط النص الافتراضي للسياق(في هذه الحالة، يرث النمط الافتراضي للنص AppBar).
• يطبق الخيار الثاني TextSpan سمك الخط الغامق واللون الأزرق على الكلمة " Flutter."
• يضيف الثالث TextSpan ببساطة النص "رائع!" إلى النهاية.

يمكنك تخصيص التنسيق والخطوط والألوان والأنماط الأخرى داخل كل منها TextSpan حسب الحاجة.

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

لا تتردد في تجربة أنماط مختلفة وعناصر TextSpan واجهة مستخدم متداخلة لتحقيق التأثيرات المرئية المطلوبة في تطبيقك.