Flutter 文本

2025年3月17日 | 阅读 7 分钟

在 Flutter 中，Text 是一个用于**在我们的应用程序中以单行显示文本字符串**的 Widget。根据布局约束，我们可以将字符串分成多行，或者可能全部显示在同一行。如果我们没有为 Text Widget 指定任何样式，它将使用最接近的**DefaultTextStyle**类样式。这个类没有任何显式样式。在本文中，我们将学习如何使用 Text Widget 以及如何在我们的应用程序中设置其样式。

这是一个简单的例子来理解这个 Widget。此示例在应用程序栏中显示我们**项目的标题**，并在应用程序的主体中显示一条**消息**。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: MyTextPage()
    );
  }
}
class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("Text Widget Example")
      ),
      body: Center(
          child:Text("Welcome to Javatpoint")
      ),
    );
  }
}

在上面的代码中，我们使用了**MaterialApp** Widget，它使用**MyTextPage()**类调用主屏幕。该类包含**scaffold** Widget，它具有**appBar**和**body**，我们在其中使用**Text** Widget 分别显示标题和正文。这是一个 Text Widget 的简单场景，我们必须传递想要在页面上显示的字符串。

当我们在模拟器或设备上运行此应用程序时，我们应该得到类似于以下屏幕截图的 UI

Text Widget 构造函数

text Widget 构造函数用于自定义我们的文本在 Flutter 中的外观

const Text(String data,{
	Key key,
	TextStyle style,
	StrutStyle strutStyle,
	TextAlign textAlign,
	TextDirection textDirection,
	TextOverflow overflow,
	bool softWrap,
	double textScaleFactor,
	int maxLines,
	String semanticsLabel,
	TextWidthBasis textWidthBasis,
	TextHeightBehavior textHeightBehavior
	}
)

以下是在我们的应用程序中使用的 Text Widget 的基本属性

**TextAlign：**它用于指定我们的文本水平对齐方式。它还控制文本位置。

**TextDirection：**它用于确定 textAlign 值如何控制我们文本的布局。通常，我们从左向右书写文本，但我们可以使用此参数更改它。

**Overflow：**它用于确定当文本不适合可用空间时。这意味着我们指定了比可用空间更多的文本。

**TextScaleFactor：**它用于确定 Text Widget 显示的文本的缩放。假设我们已将文本缩放因子指定为 1.5，那么我们的文本将比指定的字体大小大 50%。

**SoftWrap：**它用于确定在没有足够空间时是否显示所有文本 Widget 内容。如果为真，它将显示所有内容。否则，它不会显示所有内容。

**MaxLines：**它用于确定文本 Widget 中显示的最大行数。

**TextWidthBasis：**它用于控制如何定义文本宽度。

**TextHeightBehavior：**它用于控制段落在第一行和最后一行下降之间如何显示。

**Style：**它是此 Widget 最常见的属性，它允许开发人员设置文本样式。它可以通过指定前景和背景颜色、字体大小、字体粗细、字母和单词间距、区域设置、阴影等来设置样式。查看表格更容易理解

属性	描述
前景	它确定将文本绘制为前景。
背景	它确定将文本绘制为背景。
fontWeight	它确定文本的粗细。
fontSize	它确定文本的大小。
fontFamily	它用于指定字体的字样。为此，我们需要在我们的项目中下载一个字样文件，然后将此文件保存在 assets/font 文件夹中。最后，配置 pubspec.yaml 文件以便在项目中进行使用。
fontStyle	它用于以粗体或斜体样式设置字体的样式。
颜色	它用于确定文本的颜色。
letterSpacing	它用于确定文本字符之间的距离。
wordSpacing	它用于指定文本的两个单词之间的距离。
阴影	它用于在文本下方绘制。
decoration	我们使用它使用三个参数来装饰文本：decoration, decorationColor, decorationStyle。decoration 确定位置，decorationColor 指定颜色，decorationStyle 确定形状。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: MyTextPage()
    );
  }
}
class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("Text Widget Example")
      ),
      body: Center(
          child:Text(
            "Hello World! This is a Text Widget.",
            style: TextStyle(
              fontSize: 35,
              color: Colors.purple,
              fontWeight: FontWeight.w700,
              fontStyle: FontStyle.italic,
              letterSpacing: 8,
              wordSpacing: 20,
              backgroundColor: Colors.yellow,
              shadows: [
                Shadow(color: Colors.blueAccent, offset: Offset(2,1), blurRadius:10)
              ]
            ),
          )
      ),
    );
  }
}

输出

当我们在模拟器或设备上运行此应用程序时，我们应该得到类似于以下屏幕截图的 UI

Flutter RichText Widget

有时我们想**显示带有多种样式（例如粗体、斜体、下划线、不同颜色、不同字体或所有内容同时）的行或段落**。在这种情况下，我们应该使用 RichText Widget，它允许我们在不切换许多 Widgets 的情况下执行多种文本样式。

RichText 是 Flutter 中一个非常有用的 Widget，用于在 UI 上显示具有多种样式的文本段落。在 Widget 内部，我们可以通过提供一个**TextSpan** Widget 的**树**来拥有不同的样式。每个 TextSpan 都可以设置自己的样式以覆盖默认样式。

RichText 结构

下图解释了 RichText Widget 的结构。在此图像中，父 TextSpan 具有自己的 style 属性和一个 text 参数，然后它可能包含几个具有自己 style 属性的子 TextSpan。

从上面的概述中，现在我们将看到如何在我们的应用程序中使用这个 Widget。

示例

假设我们的应用程序有一个**登录屏幕**和一个创建**新用户帐户**的选项。创建新用户帐户部分结合了常规文本和彩色文本，如下面的屏幕所示

在上图中，我们可以看到文本**“没有帐户？注册”**是一行文本，其中最后一部分是可以点击的单词，它将用户导航到注册页面。要制作这种类型的文本，我们将**它分成两部分**。第一部分使用**父** TextSpan 并输入文本**“没有帐户？”**，并使用**黑色**颜色。第二部分使用**子** TextSpan 并输入文本**“注册”**，并使用**蓝色**颜色。请参阅以下代码

RichText(
	text: TextSpan(
		text: 'Don\'t have an account?',
		style: TextStyle(color: Colors.black, fontSize: 20),
		children: <TextSpan>[
            TextSpan(text: ' Sign up',
                style: TextStyle(color: Colors.blueAccent, fontSize: 20)
            )
        ]
    ),
),

由于“注册”是可点击的文本，因此我们需要在此部分实现**onTap()**操作。TextSpan 包含**TapGestureRecognizer()**，它实现了 onTap() 操作。在我们的示例中，我们将使用 recognizer 属性使文本可点击。让我们显示整个代码段以更清楚地理解它。

在您使用的 IDE 中创建一个新项目。打开项目，导航到 lib 文件夹，并将以下代码替换为**main.dart**文件。

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: MyTextPage()
    );
  }
}
class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("Rich Text Widget Example")
      ),
      body: Container(
          child: Center(
            child: RichText(
              text: TextSpan(
                  text: 'Don\'t have an account?',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                  children: <TextSpan>[
                    TextSpan(text: ' Sign up',
                        style: TextStyle(color: Colors.blueAccent, fontSize: 20),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {}
                    )
                  ]
              ),
            ),
          )
      )
    );
  }
}

输出

当我们在模拟器或设备上运行此应用程序时，我们应该得到类似于以下屏幕截图的 UI

如何在 Flutter 的文本 Widget 中显示图标？

有时，开发人员需要使用文本 Widget 显示一个**图标**。为此，Flutter 在 RichText() Widget 内部提供了一个**WidgetSpan()**，用于向文本 Widget 添加图标。以下示例以一种简单的方式解释了它

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyTextPage()
    );
  }
}
class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("Rich Text Widget Example")
      ),
      body: Container(
          child: Center(
            child:RichText(
              text: TextSpan(
                style: Theme.of(context).textTheme.body1,
                children: [
                  TextSpan(text: 'Click ', style: TextStyle(fontSize: 25)),
                  WidgetSpan(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 2.0),
                      child: Icon(Icons.add, color: Colors.red),
                    ),
                  ),
                  TextSpan(text: ' to add', style: TextStyle(fontSize: 25)),
                ],
              ),
            )
          )
      )
    );
  }
}

输出

当我们在模拟器或设备上运行此应用程序时，我们应该得到类似于以下屏幕截图的 UI

下一个主题Flutter TextField

← 上一个下一个 →

Flutter 文本

Text Widget 构造函数

Flutter RichText Widget

RichText 结构

如何在 Flutter 的文本 Widget 中显示图标？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 文本

Text Widget 构造函数

Flutter RichText Widget

RichText 结构

如何在 Flutter 的文本 Widget 中显示图标？

相关帖子

Flutter Toast

Flutter 表单

Flutter 图表

Flutter 图标

Flutter 进度条

Flutter Tabbar

Flutter 动画

Flutter Tooltip

Flutter 按钮

Flutter 表格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器