🧩Text

// Some code
Text('Hi')

Размер шрифта с использованием textScaleFactor

Есть два способа настроить размер шрифта: с помощью textScaleFactor в текстовом виджете или с помощью класса TextStyle, который будет рассмотрен в последней части. Атрибут textScaleFactor принимает двойное значение, которое рассматривается как коэффициент масштабирования, и масштабирует текст следующим образом.

// Some code
Text(
  "Hi",
  textAlign: TextAlign.center,
  textScaleFactor: 4.0,
),

Цвет текста

// Some code
Text(
  "Hi",
  textAlign: TextAlign.center,
  textScaleFactor: 2.0,
  style: TextStyle(
    color: Colors.blue
  ),
),

В Flutter виджет Text используется для отображения текста на экране. Он предоставляет множество настроек для управления стилем, выравниванием и поведением текста. Давайте рассмотрим все основные настройки Text и простыми словами объясним, что они делают.

Что такое Text

Text — это базовый виджет в Flutter, который используется для отображения текста на экране. Он позволяет легко показывать строки текста с различными стилями и форматированием. Подумайте о Text как о карандаше, который вы используете, чтобы написать что-то на листе бумаги — он позволяет вам представлять текст визуально в вашем приложении.

Пример использования

В этом примере мы создадим простой текстовый виджет, который отображает строку.

dartКопировать кодimport 'package:flutter/material.dart';

class TextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Text Example')),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: 24, // Размер шрифта
            fontWeight: FontWeight.bold, // Жирный текст
            color: Colors.blue, // Цвет текста
          ),
        ),
      ),
    );
  }
}

Как работает код

1. Scaffold — это основа для нашего интерфейса, как холст для художника.

2. AppBar — верхняя панель, где написано название приложения.

3. Text — основной виджет, который отображает текст.

4. TextStyle — используется для задания стиля текста, например, его размера, цвета и начертания.

Все настройки Text

1. data

   • Описание: Основной текст, который будет отображаться. Это строка текста.

   • Пример:

     data: 'Welcome to Flutter!' // Текст, который будет показан

   • Применение: Определяет содержимое, которое будет отображаться пользователю.

2. style

   • Описание: Определяет стиль текста, такой как размер, цвет и шрифт.

   • Пример:

     style: TextStyle(fontSize: 20, color: Colors.black) // Настройки стиля текста

   • Применение: Позволяет настроить внешний вид текста в Text.

3. textAlign

   • Описание: Указывает, как текст будет выровнен внутри виджета. Может быть TextAlign.left, TextAlign.center, TextAlign.right и другие.

   • Пример:

     textAlign: TextAlign.center // Текст будет выровнен по центру

   • Применение: Полезно для управления горизонтальным выравниванием текста.

4. maxLines

   • Описание: Ограничивает количество строк, которые может занимать текст.

   • Пример:

     maxLines: 2 // Текст будет отображаться только на 2 строках

   • Применение: Полезно для ограничения текста в определенном пространстве.

5. overflow

   • Описание: Определяет, как обрабатывать текст, который выходит за пределы виджета. Может быть TextOverflow.clip, TextOverflow.ellipsis и другие.

   • Пример:

     overflow: TextOverflow.ellipsis // Если текст не помещается, добавляется "..."

   • Применение: Используется для управления поведением текста, когда он слишком длинный для доступного пространства.

6. softWrap

   • Описание: Указывает, нужно ли переносить текст на следующую строку, если он выходит за пределы виджета.

   • Пример:

     softWrap: true // Текст будет переноситься на следующую строку

   • Применение: Полезно для управления тем, как текст отображается в разных условиях.

7. textScaleFactor

   • Описание: Указывает, насколько текст будет увеличен или уменьшен в зависимости от настроек доступности.

   • Пример:

     textScaleFactor: 1.5 // Текст будет в 1.5 раза больше

   • Применение: Позволяет контролировать масштаб текста для лучшей доступности.

8. locale

   • Описание: Указывает локаль, используемую для форматирования текста.

   • Пример:

     locale: Locale('en', 'US') // Устанавливает локаль для текста

   • Применение: Полезно для поддержки различных языков и форматов текста.

9. semanticsLabel

   • Описание: Задает текст для вспомогательных технологий, таких как экранные читалки.

   • Пример:

     semanticsLabel: 'Welcome message' // Описание для вспомогательных технологий

   • Применение: Помогает сделать ваше приложение более доступным для людей с ограниченными возможностями.

Итог

Text — это основной инструмент для отображения текста в Flutter. Он позволяет настраивать внешний вид текста с помощью различных стилей и свойств. Используйте Text, чтобы легко отображать текстовые строки в вашем приложении и делать его более информативным и визуально привлекательным.