Flutter文本快速学习

Flutter 中的文本控件（Text Widget）用于在应用程序中显示单行或多行文本。下面是一些关于 Flutter 文本控件的详细介绍和示例代码。

文本样式

Flutter 的文本控件提供了很多可定制的文本样式选项，例如字体大小、颜色、字重、字体样式等等。下面是一些常用的样式属性：

• style：一个 TextStyle 对象，用于设置文本的样式属性。
• textAlign：枚举值，用于指定文本的对齐方式（left、right、center 等等）。
• textDirection：一个 TextDirection 对象，用于指定文本的方向（ltr 或 rtl）。
• softWrap：一个布尔值，用于指定文本是否自动换行。
• overflow：一个 TextOverflow 枚举值，用于指定文本溢出时的处理方式（clip、fade、ellipsis 等等）。

下面是一个示例：

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 24.0,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    letterSpacing: 2.0,
  ),
  textAlign: TextAlign.center,
  textDirection: TextDirection.ltr,
  softWrap: true,
  overflow: TextOverflow.clip,
),

在这个示例中，我们创建了一个带有多种样式属性的文本控件。

文本跨度

Flutter 中的文本可以由多个不同样式的文本片段组成，每个片段称为一个“跨度”（Span）。使用 Flutter 的 TextSpan 类可以创建包含多个跨度的文本，每个跨度可以有不同的样式。下面是一个示例：

Text.rich(
  TextSpan(
    children: <InlineSpan>[
      TextSpan(
        text: 'Hello',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(text: ', '),
      TextSpan(
        text: 'world',
        style: TextStyle(color: Colors.blue),
      ),
      TextSpan(text: '!'),
    ],
  ),
),

在这个示例中，我们创建了一个带有两个不同样式的文本片段的文本控件。

Demo 示例代码

下面是一个完整的 Flutter 示例应用程序，它演示了如何使用文本控件和样式属性来显示不同格式的文本：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Widget Demo'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Hello World',
              style: TextStyle(
                fontSize: 24.0,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.underline,
                decorationColor: Colors.red,
                letterSpacing: 2.0,
              ),
              textAlign: TextAlign.center,
              textDirection: TextDirection.ltr,
              softWrap: true,
              overflow: TextOverflow.clip,
            ),
            SizedBox(height: 16.0),
            Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  TextSpan(
                    text: 'Hello',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  TextSpan(text: ', '),
                  TextSpan(
                    text: 'world',
                    style: TextStyle(color: Colors.blue),
                  ),
                  TextSpan(text: '!'),
                ],
              ),
              textAlign: TextAlign.center,
              textDirection: TextDirection.ltr,
              softWrap: true,
              overflow: TextOverflow.clip,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个带有两个不同格式的文本控件，并使用 Column 和 SizedBox 将它们分开。