Flutter基础组件(1):Text(文本)

 


在 Flutter 中,Text是用于显示文本的基础小部件。它不仅简单易用,而且提供了丰富的定制选项,包括样式、对齐、行间距等。本文将详细介绍如何使用Text小部件,并探索其高级特性。

一、基础用法

Text小部件最基本的用法是显示一段文本:

Text('Hello, World!')

二、定制化属性

2.1 文本样式

Text小部件的样式可以通过style属性进行定制:

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    color: Colors.green,
  ),
)

上述代码将文本设置为大号、加粗的绿色文字。

常用样式属性

  • fontSize: 字体大小。
  • fontWeight: 字体粗细。
  • color: 文本颜色。
  • fontFamily: 字体家族。
  • textBaseline: 文本基线。
  • height: 行高。

2.2 文本对齐方式

Text小部件还支持设置文本的对齐方式:

Text(
  'Hello, World!',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 24.0),
)

上述代码将文本居中对齐。

常用对齐方式

  • TextAlign.left: 左对齐。
  • TextAlign.right: 右对齐。
  • TextAlign.center: 居中对齐。
  • TextAlign.justify: 两端对齐。
  • TextAlign.start: 从开始位置对齐(取决于文本方向)。
  • TextAlign.end: 从结束位置对齐(取决于文本方向)。

2.3 行间距和字间距

Text小部件还允许你设置行间距(lineHeight)和字间距(letterSpacing):

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 18.0,
    letterSpacing: 2.0,
  ),
)

上述代码将文本居中对齐。


2.4 换行和软换行

默认情况下,Text小部件中的文本不会换行。如果文本超出了其父级小部件的宽度,它将被截断。要使文本自动换行,可以设置softWrap属性为true

Text(
  'This is a long text that will wrap to the next line because softWrap is true.',
  softWrap: true,
)

2.5 文本溢出

如果文本超出了小部件的边界,除了自动换行外,还可以设置overflow属性来定义如何处理溢出:

Text.rich(
  TextSpan(
    text: 'This text will fade out when it overflows.',
    style: TextStyle(overflow: TextOverflow.fade),
  ),
)

常用溢出选项

  • TextOverflow.clip: 截断并裁剪文本。
  • TextOverflow.ellipsis: 用省略号表示溢出的文本。
  • TextOverflow.fade: 使溢出的文本逐渐淡出。
  • TextOverflow.visible: 显示全部文本,可能会超出边界。

三、富文本

Text小部件还支持富文本(Text.rich),允许在同一行文本中使用不同的样式:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp (
      home: Scaffold(
        body: Text.rich(
          TextSpan(
            children: [
            TextSpan(text: 'Hello, ', style: TextStyle(fontSize: 24.0)),
            TextSpan(
                text: 'World!',
                style: TextStyle(fontSize: 32.0, color: Colors.blue)),
            ],
          ),
        )
      )
    );
  }
}

效果图如下所示:

Flutter_text_B.png

四、DefaultTextStyle

在 Widget 树中,文本的样式默认是可以被继承的(子类文本类组件未指定具体样式时可以使用 Widget 树中父级设置的默认样式),因此,如果在 Widget 树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而DefaultTextStyle正是用于设置默认文本样式的。下面我们看一个例子:

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 不显示debug标识
      home: Scaffold(
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({super.key});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: DefaultTextStyle(
        //1.设置文本默认样式  
        style: TextStyle(
          color:Colors.red,
          fontSize: 20.0,
        ),
        textAlign: TextAlign.start,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const <Widget>[
            Text("hello world"),
            Text("I am Jack"),
            Text("I am Jack",
                style: TextStyle(
                  inherit: false, //2.不继承默认样式
                  color: Colors.grey
                ),
                ),
          ],
        ),
      )
    );
  }
}

上面代码中,我们首先设置了一个默认的文本样式,即字体为20像素(逻辑像素)、颜色为红色。然后通过DefaultTextStyle设置给了子树 Column 节点处,这样一来 Column 的所有子孙 Text 默认都会继承该样式,除非 Text 显示指定不继承样式,如代码中注释 2。示例运行效果如下图:

Flutter_text_C.png


五、字体

可以在 Flutter 应用程序中使用不同的字体。例如,我们可能会使用设计人员创建的自定义字体,或者其他第三方的字体,如 Google Fonts (opens new window)中的字体。本节将介绍如何为 Flutter 应用配置字体,并在渲染文本时使用它们。

在 Flutter 中使用字体分两步完成。首先在pubspec.yaml中声明它们,以确保它们会打包到应用程序中。然后通过TextStyle (opens new window)属性使用字体。


5.1 在asset中声明

要将字体文件打包到应用中,和使用其他资源一样,要先在pubspec.yaml中声明它。然后将字体文件复制到在pubspec.yaml中指定的位置,如:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

5.2 使用字体

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);

5.3 Package中的字体

要使用 Package 中定义的字体,必须提供package参数。例如,假设上面的字体声明位于my_package包中。然后创建 TextStyle 的过程如下:

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
  package: 'my_package', //指定包名
);

如果在 package 包内部使用它自己定义的字体,也应该在创建文本样式时指定package参数,如上例所示。

一个包也可以只提供字体文件而不需要在 pubspec.yaml 中声明。 这些文件应该存放在包的lib/文件夹中。字体文件不会自动绑定到应用程序中,应用程序可以在声明字体时有选择地使用这些字体。假设一个名为my_package的包中有一个字体文件:

lib/fonts/Raleway-Medium.ttf

然后,应用程序可以声明一个字体,如下面的示例所示:

 flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf
           weight: 500

lib/是隐含的,所以它不应该包含在 asset 路径中。

在这种情况下,由于应用程序本地定义了字体,所以在创建TextStyle时可以不指定package参数:

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

六、示例代码

下面是一些常见属性的示例代码:


6.1 示例1:基本示例

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 不显示debug标识
      home: Scaffold(
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({super.key});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, Flutter!', // 要显示的文本内容
        style: TextStyle(
          fontSize: 16.0,
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
        textAlign: TextAlign.center, // 居中对齐
      ),
    );
  }
}

Flutter_text_F.png


6.2 示例2:自动换行与溢出处理

Text(
  'This is a long text that will be automatically wrapped if it exceeds the available width of the container. If the text still does not fit, it will be truncated with an ellipsis.',
  softWrap: true, // 自动换行
  overflow: TextOverflow.ellipsis, // 溢出处理方式为省略号
)

Flutter_text_G.png


6.3 示例3:多行文本

Text(
  'This is a long text that will be displayed on multiple lines. The maximum number of lines to display is limited to 2.',
  maxLines: 2, // 最大显示行数为2
)

Flutter_text_H.png


6.4 示例4:style的多个属性

当需要结合多个TextStyle属性时,可以将它们组合到一个TextStyle对象中,并将该对象传递给style属性。下面是一个示例代码,演示了如何结合多个TextStyle属性:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    color: Colors.blue, // 设置文本颜色为蓝色
    fontSize: 20.0, // 设置字体大小为20.0
    fontWeight: FontWeight.bold, // 设置字体粗细为粗体
    fontStyle: FontStyle.italic, // 设置字体样式为斜体
    letterSpacing: 2.0, // 设置字母间距为2.0
    wordSpacing: 5.0, // 设置单词间距为5.0
    decoration: TextDecoration.underline, // 设置下划线
    decorationColor: Colors.red, // 设置下划线颜色为红色
    decorationStyle: TextDecorationStyle.dotted, // 设置下划线样式为点状
    height: 1.5, // 设置行高为1.5倍字体大小

    textBaseline: TextBaseline.alphabetic, // 设置基线对齐方式为字母基线
    shadows: const [
      Shadow(
        color: Colors.black, // 设置阴影颜色为黑色
        offset: Offset(2.0, 2.0), // 设置阴影偏移量
        blurRadius: 3.0, // 设置阴影模糊半径
      ),
    ],
  ),
)

在上述代码中,将多个TextStyle属性组合到了一个TextStyle对象中,并将该对象传递给了style属性。如下图所示:
Flutter_text_I.png

七、注意点

在日常开发中,使用 Text 组件时需要注意以下几点:

  • 尽量使用常量文本:在构建 Text 组件时,如果文本内容是固定的,建议将文本内容定义为常量,以避免在每次重建时都重新创建文本对象。
  • 避免过多的样式嵌套:过多的 TextStyle 嵌套可能会导致性能下降,因此应尽量减少嵌套的层次。
  • 注意文本溢出处理:根据实际需求选择合适的文本溢出处理方式,以保证文本的可读性和用户体验。
  • 使用字体图标:如果需要显示特殊图标或符号,可以考虑使用字体图标(如 Flutter 中的 Icon)代替纯文本,并根据需要进行样式设置。

posted @   fengMisaka  阅读(482)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示