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 小部件，以在您的应用程序中实现所需的视觉效果。