การใช้ TextSpan ใน Flutter: คำแนะนำและตัวอย่าง

เมื่อใช้ TextSpan ใน Flutter คุณสามารถสร้าง Rich Text ได้โดยใช้แอตทริบิวต์การจัดรูปแบบที่แตกต่างกันกับส่วนต่างๆ ของข้อความ ช่วยให้คุณสร้างข้อความที่มีสไตล์ สี แบบอักษร และอื่นๆ อีกมากมาย 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.