📌  相关文章
📜  Flutter 文本

📅  最后修改于: 2021-01-02 04:59:21             🧑  作者: Mango

颤动的文字

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

这是一个了解此小部件的简单示例。本示例在应用程序栏中显示我们项目的标题，并在应用程序主体中显示一条消息。

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小部件，该小部件使用MyTextPage()类调用主屏幕。此类包含scaffold小部件，该小部件具有appBar和body ，我们在其中使用了Text小部件分别显示标题和正文。这是Text小部件的一种简单情况，我们必须传递要在页面上显示的字符串。

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

文本小部件构造函数：

文本小部件构造函数用于使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小部件的基本属性：

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

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

溢出：用于确定文本何时不适合可用空间。这意味着我们指定的文本多于可用空间。

TextScaleFactor：用于确定对“文本”小部件显示的文本的缩放比例。假设我们将文本比例因子指定为1.5，那么我们的文本将比指定的字体大小大50％。

SoftWrap：用于确定在没有足够的可用空间时是否显示所有文本小部件内容。如果为true，它将显示所有内容。否则，它将不会显示所有内容。

MaxLines：用于确定文本小部件中显示的最大行数。

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

TextHeightBehavior：用于控制段落在第一行和最后一行的下降之间的显示方式。

样式：这是此小部件的最常见属性，它允许开发人员设置其文本样式。它可以通过指定前景色和背景色，字体大小，字体粗细，字母和单词的间距，语言环境，阴影等来进行样式设置。请参阅下表以更轻松地了解它：

Attributes Descriptions
foreground It determines the paint as a foreground for the text.
background It determines the paint as a background for the text.
fontWeight It determines the thickness of the text.
fontSize It determines the size of the text.
fontFamily It is used to specify the typeface for the font. For this, we need to download a typeface file in our project, and then keep this file into the assets/font folder. Finally, config the pubspec.yaml file to use it in the project.
fontStyle It is used to style the font either in bold or italic form.
Color It is used to determine the color of the text.
letterSpacing It is used to determine the distance between the characters of the text.
wordSpacing It is used to specify the distance between two words of the text.
shadows It is used to paint underneath the text.
decoration We use this to decorate text using the three parameters: decoration, decorationColor, decorationStyle. The decoration determines the location, decorationColor specify the color, decorationStyle determine the shape. 
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小部件

有时我们想同时显示具有多种样式的行或段落，例如粗体，斜体，带下划线，不同的颜色，不同的字体或所有内容。在这种情况下，我们应该使用RichText小部件，该部件允许我们执行多种测试样式而无需切换许多小部件。

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

RichText结构

下图说明了RichText小部件的结构。在此图像中，父TextSpan具有其自己的style属性和一个text参数，然后它可以包含几个具有自己的style属性的子TextSpan。

从上面的概述中，现在我们将看到如何在应用程序中使用此小部件。

例

假设我们的应用程序具有登录屏幕和创建新用户帐户的选项。新用户帐户的创建部分包含常规文本和彩色文本的组合，如以下屏幕所示：

在上图中，我们可以看到文本“没有帐户?注册”是一行文本，最后一部分是可单击的单词，可在注册页面上导航用户。为了使这一类型的文本，我们把它分成两个部分。第一部分使用父TextSpan并输入文本“没有帐户?”黑色。第二部分使用子级TextSpan并输入带有蓝色的文本“ Sign up” 。请参见以下代码：

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

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

在您使用的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(text: ' Sign up',
                        style: TextStyle(color: Colors.blueAccent, fontSize: 20),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {}
                    )
                  ]
              ),
            ),
          )
      )
    );
  }
}

输出：

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

如何在Flutter中的文本小部件中显示图标?

有时，开发人员需要显示带有文本小部件的图标。为此，Flutter在RichText()小部件内提供了一个WidgetSpan()来添加带有文本小部件的图标。以下示例以一种简单的方式对其进行了解释：

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：