close

การใช้ 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 วิดเจ็ตที่ซ้อนกันเพื่อให้ได้เอฟเฟ็กต์ภาพที่ต้องการในแอปของคุณ