Text()

https://api.flutter.dev/flutter/widgets/Text-class.html

Text() 组件用于简单显示样式文本，它包含一些控制文本显示样式的一些属性。定义如下：

const Text(
  this.data, {
    Key key,
    this.style,    //字体的样式设置
    this.strutStyle,
    this.textAlign,    //对齐方式
    this.textDirection,    //文字方向
    this.locale,
    this.softWrap,
    this.overflow,    //文字超出屏幕后的处理方式
    this.textScaleFactor,    //字体显示倍率
    this.maxLines,    //文字显示最大行数
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  },
)

Text() 的参数

textAlign 文本对齐方式（center居中、left左对齐、right右对齐、justfy两端对齐、start前端对齐、end末端对齐）。示例：textAlign: TextAlign.left 。
textDirection 文本方向（ltr从左至右、rtl从右至左）。 textDirection: TextDirection.ltr 。
overflow 文字超出屏幕后的处理方式（clip裁剪、fade渐隐、ellipsis省略号）。

示例：overflow: TextOverflow.ellipsis, maxLines: 1 。

maxLines 文字显示最大行数
textScaleFactor 字体显示倍率。textScaleFactor: 1.4 。
style 字体的样式设置。style: TextStyle() 。

Text(
  '我是中心内容',
  textAlign: TextAlign.left,
  overflow: TextOverflow.ellipsis, 
  maxLines: 1,
  style: TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.w700,
  ),
)

TextStyle() 的参数

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。

color、backgroundColorr 前景色、背景色

Text('你好', style: TextStyle(color: Colors.red)),
Text('你好', style: TextStyle(color: Colors.red.withOpacity(0.5))),
Text('你好', style: TextStyle(color: Colors.red.shade500)),
color: Colors.transparent,    //透明色
//一个16进制颜色#FF0000. 
//因为Color还需要传入透明度, 255就是最大值(也就是不透明), 转为16进制就是0xFF, 
//所以我们只需这样表示: Color(0xffFF0000)
Text('你好', style: TextStyle(color: Color(0xffFF0000))),
Text('你好', style: TextStyle(color: Color.fromRGBO(255, 0, 0, 1.0))),

设置Widget透明度

Opacity(
  opacity: 0.1,
  child: Text('你好'),
),

初选色

color: Colors.primaries[index % Colors.primaries.length],
static const List<MaterialColor> primaries = <MaterialColor>[
  red,
  pink,
  purple,
  deepPurple,
  indigo,
  blue,
  lightBlue,
  cyan,
  teal,
  green,
  lightGreen,
  lime,
  yellow,
  amber,
  orange,
  deepOrange,
  brown,
  // The grey swatch is intentionally omitted because when picking a color
  // randomly from this list to colorize an application, picking grey suddenly
  // makes the app look disabled.
  blueGrey,
];

随机色

import "dart:math";
class Base {
  static getRangeRandom(min, max) {
    var r1 = Random().nextDouble();
    var r2 = r1 * (max - min + 1) + min;
    return r2.floor();
  }
  static getRandomColor() {
    var str = 'FF';
    for (var i = 0; i < 3; i++) {
      str += getRangeRandom(0, 255).toRadixString(16).toString().padLeft(2, '0');
    }
    return int.parse(str, radix: 16);
  }
}

height 行高

该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
height: 2, //两倍行高 。

fontSize 大小

该属性和Text的textScaleFactor都用于控制字体大小。fontSize: 20.0 。

但是有两个主要区别：

fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。

fontFamily 字体

由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。

fontWeight 粗细

字体粗细（bold粗体、normal正常体）。
字体粗细共有9个级别，为w100至w900，FontWeight.bold是w700 。

fontWeight: FontWeight.w700
fontWeight: FontWeight.bold

fontStyle 斜体

文字样式（italic斜体、normal正常体）。fontStyle: FontStyle.italic 。

wordSpacing、letterSpacing 间隙

单词间隙、字母间隙。letterSpacing: 2.0 。

decoration 装饰线

文字装饰线（none没有线、lineThrough删除线、overline上划线、underline下划线）。
decoration: TextDecoration.underline 。

decorationColor 装饰线颜色

decorationStyle 装饰线样式

装饰器样式。（[dashed、dotted]虚线、double双线、solid单线、wavy波浪线）
decorationStyle: TextDecorationStyle.dashed 。

textBaseline 基线

alphabetic、ideographic 。textBaseline: TextBaseline.ideographic 。

inherit

是否继承样式。默认为true。inherit: false 。

Text.rich 富文本组件

定义：

Text.rich(
  this.textSpan, {    //第一个参数为 TextSpan组件
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  },
)

TextSpan

https://api.flutter.dev/flutter/widgets/RichText-class.html

Text的所有文本内容只能按同一种样式，如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。我们看看TextSpan的定义:

const TextSpan({
  TextStyle style,     //文本片段的样式
  Sting text,    //文本片段的内容
  List<TextSpan> children,    //一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。
  GestureRecognizer recognizer,    //用于对该文本片段上用于手势进行识别处理。
});

示例：

Text.rich(
  TextSpan(
    text: 'outer ',
    children: [
      TextSpan(text: 'Home: '),
      TextSpan(
        text: 'https://www.baidu.com',
        style: TextStyle(fontSize: 24),
      ),
    ],
  ),
  style: TextStyle(
    color: Colors.red,
  ),
),

效果：

手势交互

当然我们也可以设置其他样式，比如大小、斜体等，甚至我们还可以添加点击效果，

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <InlineSpan>[
      TextSpan(text: '登陆即视为同意'),
      TextSpan(
        text: '《xxx服务协议》',
        style: TextStyle(color: Colors.red),
        recognizer: TapGestureRecognizer()..onTap = () {
        },
      ),
    ]),
)

recognizer属性指定手势交互，类型是GestureRecognizer,GestureRecognizer是抽象类，一般使用其子类TapGestureRecognizer实现点击交互。

DefaultTextStyle

https://docs.flutter.io/flutter/widgets/DefaultTextStyle-class.html
在Widget树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），因此，如果在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。

DefaultTextStyle(
  // 设置文本默认样式
  style: TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('hello'),
      Text('hello'),
      Text('hello',
           style: TextStyle(
             inherit: false, // 不继承默认样式
             color: Colors.green,
           )),
    ],
  ),
),

字体

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

本地字体导入

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

在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

使用字体

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

示例：

flutter:
  fonts:
    - family: ali-puhui-regular
      fonts: 
        - asset: assets/fonts/ali-puhui-regular.ttf
    - family: ali-siyuan-bold
      fonts: 
        - asset: assets/fonts/ali-siyuan-bold.ttf

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('结婚就是给自由穿件棉衣'),
    Text('结婚就是给自由穿件棉衣', style: TextStyle(fontFamily: 'ali-puhui-regular')),
    Text('结婚就是给自由穿件棉衣', style: TextStyle(fontFamily: 'ali-siyuan-bold')),
  ],
)

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',
);

62-flutter

文本、字体