A RichText használata itt Flutter: Útmutató és példák

A Flutter, RichText egy widget, amely lehetővé teszi különböző stílusok és formátumú szövegek létrehozását egyetlen szöveg widgeten belül. Több widget segítségével TextSpan határozhatja meg a szöveg különböző részeit, különböző stílusokkal.

Íme egy példa a használatára 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!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Ebben a példában a RichText widget különböző stílusú szövegek létrehozására szolgál. A TextSpan widgeteket gyermekként használják a szöveg különböző részeinek különböző stílusokkal történő meghatározására.

  • Az első TextSpan a kontextus alapértelmezett szövegstílusát használja(ebben az esetben örökli a AppBar) alapértelmezett stílusát.
  • A második TextSpan félkövér betűsúlyt és kék színt alkalmaz a " Flutter " szóra.
  • A harmadik TextSpan egyszerűen hozzáadja a "nagyszerű!" a végéig.

TextSpan Szükség szerint testreszabhatja a formázást, a betűtípusokat, a színeket és az egyéb stílusokat mindegyiken belül .

A RichText widget különösen akkor hasznos, ha különböző stílusokat kell alkalmaznia a szöveg különböző részeire, például formázott tartalom megjelenítésekor vagy bizonyos szavak vagy kifejezések kiemelésekor.

Nyugodtan kísérletezzen különböző stílusokkal és beágyazott TextSpan widgetekkel, hogy elérje a kívánt vizuális effektusokat az alkalmazásban.