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

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

فيما يلي مثال لكيفية الاستخدام TextSpan داخل Text الأداة:

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('TextSpan Example'),  
     ),  
      body: Center(  
        child: Text.rich(  
          TextSpan(  
            text: 'Hello ',  
            style: TextStyle(fontSize: 20),  
            children: [  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

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

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

آمل أن يساعدك هذا المثال على فهم كيفية الاستخدام TextSpan في Flutter.