flutter 之Text介绍

用户1974410

发布于 2022-09-20 16:21:51

1K0

发布于 2022-09-20 16:21:51

文章被收录于专栏：flutter开发精选

Flutter 自带了一套强大的基础 widgets，下面会给大家一一介绍

2.3.1 基本用法

Text widget 可以用来在应用内创建带样式的文本。文本作为UI最基本的元素，最基本的用法有这些：

字体
文字大小、颜色
一些常用样式，比如倾斜，加粗，下划线，删除线等
文字超出边界之后如何显示
文字的单行，多行控制
文字的显示方向
富文本的显示
文字渐变，阴影
文本点击事件

Text("Hello world",
  textAlign: TextAlign.left,
);

Text("Hello world! I'm Jack. "*4,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

Text("Hello world",
  textScaleFactor: 1.5,
);

2.3.2 文字大小，颜色，倾斜，加粗

这些样式也都是在TextStyle中设置的：

Text("style: color,fontWeight,fontSize,fontStyle",
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 28,
                fontStyle: FontStyle.italic,
              )),

其中fontSize使用的是逻辑像素，默认为14，FontWeight.bold表示加粗，当然还可以设置指定的值，fontStyle可以用来控制文本是否倾斜。

2.3.3 下划线/上划线，删除线，波浪线

下划线，删除线等属于文本装饰的一种，在TextStyle中通过decoration属性描述：

TextStyle(
                decoration: TextDecoration.underline,
                decorationColor: Colors.blueAccent,
                decorationStyle: TextDecorationStyle.solid),
          ),

效果如下：

text_underline

可以指定下划线的颜色，样式，比如线的实现，还是虚线，还是波浪线等; 对于这些装饰，还可以设置双下划线，点线等效果。

text_underline_double

2.3.4 文字超出边界如何显示

超出边界的显示有三种类型：

显示省略号
直接截断
渐隐

这几种显示样式都是通过overflow属性控制的：

ListTile(
          title: Text(
            "overflow: TextOverflow.ellipsis;overflow: TextOverflow.ellipsis;overflow: TextOverflow.ellipsis;",
            overflow: TextOverflow.ellipsis,
            softWrap: false,
          ),
        ),
        ListTile(
          title: Text(
            "overflow: TextOverflow.clip;overflow: TextOverflow.clip;overflow: TextOverflow.clip;",
            overflow: TextOverflow.clip,
            softWrap: false,
          ),
        ),
        ListTile(
          title: Text(
            "overflow: TextOverflow.fade,overflow: TextOverflow.fade,overflow: TextOverflow.fade,overflow: TextOverflow.fade,",
            overflow: TextOverflow.fade,
            softWrap: false,
          ),
        ),

2.3.5 文字的单行与多行显示

文本的多行显示，可以通过maxLines属性和softWrap属性控制，其中maxLines控制最大行数，softWrap控制是否自动换行。

Text(
            "softWrap: false;softWrap: false;softWrap: false;softWrap: false;softWrap: false;softWrap: false;",
            softWrap: false,
          )

Text(
            "softWrap: true;softWrap: true;softWrap: true;softWrap: true;softWrap: true;",
            softWrap: true,
          )

2.3.6 富文本

可以使用Text.rich/ RichText + TextSpan来显示富文本：

Text.rich(
            TextSpan(
              text: "plain text ",
              children: <TextSpan>[
                TextSpan(
                    text: "color", style: TextStyle(color: Colors.pinkAccent)),
                TextSpan(text: "fontSize", style: TextStyle(fontSize: 28)),
                TextSpan(
                    text: "decoration",
                    style: TextStyle(decoration: TextDecoration.lineThrough)),
              ],
            ),
          )

rich_text

RichText(
              text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                  text: "Text 1", style: TextStyle(color: Colors.blueAccent)),
              TextSpan(
                  text: "Text 2",
                  style: TextStyle(color: Colors.pinkAccent, fontSize: 28)),
            ],
          ))

rich_text_2

2.3.7 文字阴影

文字的阴影可以通过TextStyle中的shadows属性进行控制：

Text(
            "style: letterSpacing,shadows",
            style: TextStyle(
              shadows: <Shadow>[
                Shadow(color: Colors.pink, offset: Offset(1, 2))
              ],
            ),
          )

2.3.8 自定义字体

flutter还支持自定义字体，给设计提供了更多的灵活性。

自定义字体的步骤如下

1. 导入字体文件

将字体文件放在项目根目录下的 assets 文件夹中。

例如，在项目中导入自定义字体，文件夹结构会像下面这样：

demo_app/ 
‍assets/
    fonts/‍
          ‍some-font.ttf‍

2. 在 pubspec.yaml 中声明字体

现在你已经有一个字体可以使用，接下来则需要告诉 Flutter 它在哪。你可以在 pubspec.yaml 中像下面这样声明：

flutter:
  fonts:
    - family: your font‍
      fonts:
        - asset: sfonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic

`pubspec.yaml` 选项的定义

family 属性决定了字体的名称，你将会在 TextStyle 的 fontFamily 属性中用到。

asset 是字体文件对于 pubspec.yaml 文件的相对路径。这些文件包含了字体中字形的轮廓。构建应用时，这些文件将会被包含在应用程序的资源包中。

单个字体可以引用多个不同轮廓字重及风格的文件：

weight 属性指定了文件中字体轮廓的字重为 100 的整数倍，并且范围在 100 和 900 之间。这些值对应 FontWeight 并能够在 TextStyle对象的 fontWeight 属性上使用。
style 属性指定文件中字体的轮廓是否为 italic 或 normal。这些值对应 FontStyle 并能够在 TextStyle 对象的fontStyle 属性上使用。

3. 在代码中设置默认字体或将字体用于特定 Widget

关于如何应用这些字体，你有两种选择：将其设为默认字体，或者仅在某些特定 Widget 中使用。如果你想要设为默认字体，请将 fontFamily 设为应用（全局）theme 的属性的一部分。提供的 fontFamily 的值必须与 pubspec.yaml 中声明的名称相匹配。

MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: MyHomePage(),
);

如果你希望在特定 Widget（例如 Text Widget）中使用该字体，可以通过 TextStyle 中进行指定。

在这个例子中，我们将在一个 Text Widget 上使用 RobotoMono 字体。同样的，这里的 fontFamily 的值必须与 pubspec.yaml 中声明的值相匹配。

Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
);

字体样式

TextStyle

如若 TextStyle 指定的字体样式缺少相应的字体文件， Engine 则会使用一个更加通用的字体文件，并尝试推断所请求的字体 weight 和样式的轮廓。

完整样例

字体

Raleway 和 RobotoMono 字体是从 Google Fonts 下载的。

`pubspec.yaml`

name: custom_fonts
description: An example of how to use custom fonts with Flutter

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700
  uses-material-design: true

`main.dart`

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: Text('Custom Fonts')),
      body: Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}

Custom Fonts Demo

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-15，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

本文分享自 flutter开发精选微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网站

登录后参与评论

0 条评论

热度