Verwenden von TextSpan in Flutter: Anleitung und Beispiele

Mit TextSpan in Flutter können Sie Rich Text erstellen, indem Sie verschiedene Formatierungsattribute auf verschiedene Teile des Textes anwenden. Sie können damit Text mit verschiedenen Stilen, Farben, Schriftarten und mehr erstellen. TextSpan wird sowohl in den Text- als auch RichText in den Widgets verwendet, um reich formatierten Text zu erhalten.

Hier ist ein Beispiel für die Verwendung TextSpan innerhalb des Text Widgets:

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 In diesem Beispiel erstellen wir ein Text Widget mit einer TextSpan. TextSpan ermöglicht es uns, mehrere verschiedene Textbereiche innerhalb eines Text Widgets zu erstellen, jeder mit seinen eigenen Stilattributen wie Schriftart, Farbe und Formatierung.

TextSpan kann auch innerhalb des Widgets verwendet werden, RichText um erweiterte Textformatierungsfunktionen zu erreichen. TextSpan Es steht Ihnen frei, mehrere Instanzen zu erstellen und zu kombinieren, um nach Ihren Wünschen reich formatierten Text zu erstellen.

Ich hoffe, dieses Beispiel hilft Ihnen zu verstehen, wie man TextSpan es verwendet Flutter.