Flutter - Text

Flutter - Text 首页 / Flutter入门教程 / Flutter - Text

Text是Flutter中的一个小部件，使无涯教程可以在应用程序中显示文本字符串。如果无涯教程没有为Text widget指定任何样式，它将使用DefaultTextStyle类样式。在本文中，无涯教程将学习如何使用Text 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 Learnfk")
      ),
    );
  }
}

在上面的代码中，无涯教程使用了MaterialApp小部件，该小部件使用MyTextPage()类调用主屏幕。此类包含scaffold小部件，该小部件具有appbar和body，无涯教程在其中使用了Text小部件分别显示标题和正文。这是Text小部件的一种简单情况，无涯教程必须传递要在页面上显示的字符串。m

当无涯教程在仿真器或设备中运行此应用程序时，无涯教程应该获得类似于下面的屏幕截图的UI:

Flutter Text

Text Widget构造函数

Text Widget构造函数用于使无涯教程的文本的自定义外观。

复制代码
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
	}
)

以下是无涯教程应用程序中使用的文本窗口小部件的基本属性:

TextAlign                      -  它用于指定文本如何水平对齐。它还控制文本位置。

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

Overflow                       -  它用于确定文本何时不适合可用空间。这意味着无涯教程指定的文本多于可用空间。

TextScaleFactor         -  它用于确定Text widget显示的文本的缩放比例。假设无涯教程将比例因子指定为1.5，那么文本将比指定的字体大50％。

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

MaxLines                      -  它用于确定显示的最大行数。

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

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

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

属性描述
foreground文本的前景色。
background文本的背景色。
fontWeight文本的粗细。
fontSize文本的大小。
fontFamily它用于指定字体的字体。为此，无涯教程需要在无涯教程的项目中下载一个字体文件，然后将此文件保留到assets/font文件夹中。最后，配置pubspec.yaml文件以在项目中使用它。
fontStyle它用于以bold或italic样式设置字体样式。
Color文本的颜色。
letterSpacing文本字符之间的距离。
wordSpacing文本的两个单词之间的距离。
shadows文本阴影。
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 Text

FlutterRichText部件

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

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

RichText结构

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

Flutter Text

假设无涯教程的应用程序有一个登录屏幕以及创建新用户帐户的选项。创建新的用户帐户部分具有常规文本和彩色文本的组合，如下屏幕所示:

Flutter Text

在上图中，无涯教程可以看到文本“Don't have an account? Sign up”是一行文本，最后一部分是可单击的单词，可在注册页面上导航用户。为了制作这种类型的文本，无涯教程将其分为两部分。第一部分使用父级TextSpan并输入文本“Don't have an account?”黑色。第二部分使用子级TextSpan并输入蓝色的文本“ Sign up”。请参见以下代码:

复制代码
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)
            )
        ]
    ),
),

由于“Sign up”是可单击的文本，因此无涯教程需要对此部分实现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>[
                    TextSpan(text: ' Sign up',
                        style: TextStyle(color: Colors.blueAccent, fontSize: 20),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {}
                    )
                  ]
              ),
            ),
          )
      )
    );
  }
}

当无涯教程在仿真器或设备中运行此应用程序时，无涯教程应该获得类似于下面的屏幕截图的UI:

Flutter Text

Text widget Icon

有时，开发人员需要显示带有文本小部件的icon图标。为此，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:

Flutter Text

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

程序员的数学基础课 -〔黄申〕

Kafka核心技术与实战 -〔胡夕〕

OAuth 2.0实战课 -〔王新栋〕

Python自动化办公实战课 -〔尹会生〕

如何讲好一堂课 -〔薛雨〕

陈天 · Rust 编程第一课 -〔陈天〕

Tony Bai · Go语言第一课 -〔Tony Bai〕

Web 3.0入局攻略 -〔郭大治〕

互联网人的数字化企业生存指南 -〔沈欣〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630