1.在 Flutter 中更改文本的字体系列

将字体 .ttf 文件添加到应用程序的文件夹中。说。assets/font/

将资产和字体添加到 pubspec.yaml 文件中的 flutter 属性。您可以向应用程序添加一种或多种字体系列。在本教程中，我们将添加两种字体。

flutter:

  uses-material-design: true

  assets:
    - assets/font/

  fonts:
    - family: Font1
      fonts:
        - asset: assets/font/font1.ttf
    - family: Font2
      fonts:
        - asset: assets/font/font2.ttf

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      ),
      body: Center(
          child: Column(children: <Widget>[
        Container(
          padding: EdgeInsets.all(20),
          child: Text(
            'Welcome to Flutter Tutorial by googleflutter.com',
            style: TextStyle(
                fontFamily: "Font1", fontSize: 40, fontWeight: FontWeight.bold),
          ),
        ),
        Container(
            padding: EdgeInsets.all(20),
            child: Text(
              'Welcome to Flutter Tutorial by googleflutter.com',
              style: TextStyle(
                  fontFamily: "Font2",
                  fontSize: 40,
                  fontWeight: FontWeight.bold),
            )),
      ])),
    );
  }
}

截图

googleflutter.com/flutter-tex…

利用这种思路你也可以尝试自己的程序多字体，可以尝试用provider，bloc或者getx等状态管理工具

2.介绍Text 以字符的方式截断

Text 以字符的方式截断

github.com/flutter/flu…

在flutter中，Text控件默认的溢出显示模式是TextOverflow.fade ,就是淡出

在iOS或者Android平台默认的文件截断模式一般是…省略，flutter里面对应的截断模式为TextOverflow.ellipsis ,不过这里的截断是英文按照单词来的，这样的模式会导致如果最后一个单词很长时，截断显示会整理省略而不是最后超出的字符省略，导致模块可能有一大块空白。

Dart系统定义的截断模式

/// How overflowing text should be handled.
///
/// A [TextOverflow] can be passed to [Text] and [RichText] via their
/// [Text.overflow] and [RichText.overflow] properties respectively.
enum TextOverflow {
  /// Clip the overflowing text to fix its container.
  clip,

  /// Fade the overflowing text to transparent.
  fade,

  /// Use an ellipsis to indicate that the text has overflowed.
  ellipsis,

  /// Render overflowing text outside of its container.
  visible,
}

如何解决英文单词被整体截断呢？

将单词的每个字符切割开，插入宽度0的占位字符，打破系统默认的机制，这样就可以以字符为单位省略了

需要注意。这种方式相当于修改了文本的内容，一般文本最大一行显示可以用，如果文本支持2行以及以上的显示的话，将会导致换行不再按照字符进行而按照单词进行

下面是Example实现

extension TextOverflowUtil on String {
  /// 将flutter系统默认的单词截断模式转换成字符截断模式
  /// 通过向文本中插入宽度为0的空格实现
  static String toCharacterBreakStr(String word) {
    if (word == null || word.isEmpty) {
      return word;
    }
    String breakWord = '';
    word.runes.forEach((element) {
      breakWord += String.fromCharCode(element);
      breakWord += '\u200B';
    });
    return breakWord;
  }
}

以上就是关于字体设置，以及文本截断的方式，你学到了吗？

在 Flutter 中更改文本的字体，以及截断text文本

1.在 Flutter 中更改文本的字体系列

2.介绍Text 以字符的方式截断

Text 以字符的方式截断