close

TextSpan の使用 Flutter: ガイドと例

TextSpan で 使用すると Flutter 、テキストのさまざまな部分にさまざまな書式設定属性を適用することで、リッチ テキストを作成できます。 さまざまなスタイル、色、フォントなどを使用してテキストを作成できます。 は、とウィジェット 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。