TextSpanin käyttäminen Flutter: opas ja esimerkit

Käyttämällä TextSpan in Flutter, voit luoda muotoiltua tekstiä käyttämällä erilaisia ​​muotoilumääritteitä tekstin eri osiin. Sen avulla voit luoda tekstiä eri tyyleillä, väreillä, fonteilla ja muilla. TextSpan käytetään sekä widgeteissä Text että RichText widgeteissä rikkaasti muotoillun tekstin aikaansaamiseksi.

Tässä on esimerkki TextSpan widgetin käytöstä 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: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Tässä esimerkissä luomme Text.rich widgetin, Text jossa on TextSpan. TextSpan Sen avulla voimme luoda widgetiin useita erilaisia ​​tekstijaksoja Text, joista jokaisella on omat tyylimääritteensä, kuten kirjasin, väri ja muotoilu.

TextSpan voidaan käyttää myös widgetissä RichText edistyneempien tekstin muotoiluominaisuuksien saavuttamiseksi. Voit vapaasti luoda ja yhdistää useita TextSpan esiintymiä luodaksesi rikkaasti muotoiltua tekstiä haluamallasi tavalla.

Toivon, että tämä esimerkki auttaa sinua ymmärtämään, miten sitä TextSpan käytetään Flutter.