close

Использование RichText в Flutter: Руководство и примеры

In 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 виджетами, чтобы добиться желаемых визуальных эффектов в вашем приложении.