【Flutter】一、文本及字体样式

一、Text

用于显示文本。

Text(
	'Hello world',
	style: ...
);

1.1 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,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

1.2属性说明

1.2.1 String data

要显示的文本信息

1.2.2 TextStyle style

设置文本样式(颜色、字体大小等)
TextStyle属性说明：

属性	说明
bool inherit	是否继承父节点样式，默认为true
Color color	设置字体颜色 例：Colors.green
Color backgroundColor	设置背景颜色
double fontSize	设置字体大小
FontWeight fontWeight	设置字体粗细 FontWeight.normal:默认，与w400一致 FontWeight.bold:加粗，与w700一致 FontWeight.w[100-900]
FontStyle fontStyle	设置字体样式: FontStyle.normal:正常 FontStyle.italic:斜体
double letterSpacing	字母间间距
double wordSpacing	单词间间距
TextBaseline textBaseline	对齐文本的水平线 TextBaseline.alphabetic TextBaseline.ideographic
double height	文本行高
Locale locale	根据地区以不同方式呈现
Paint foreground	文本颜色，使用该属性时，color需为null Paint()..color = Colors.red
Paint background	文本背景色，使用该属性时，backgroundColor需为null
TextDecoration decoration	TextDecoration.none: 默认 TextDecoration.lineThrough: 删除线 TextDecoration.underline: 下划线 TextDecoration.overline: 上划线
Color decorationColor	控制decoration中产生线的颜色
TextDecorationStyle decorationStyle	控制decoration中产生线的样式 TextDecorationStyle.solid: 实线 TextDecorationStyle.double: 双线 TextDecorationStyle.dotted: 点线 TextDecorationStyle.dashed: 虚线 TextDecorationStyle.wavy: 波浪线
double decorationThickness	控制decoration产生线的粗细
String fontFamily	设置文字字体
List<Shadow> shadows	设置字体阴影 Shadow(color: Colors.black, offset: Offset(1.0, 1.0), blurRadius； 5.0)

1.2.3 StrutStyle strutStyle

/// {@macro flutter.painting.textPainter.strutStyle} 
  final StrutStyle strutStyle;

1.2.4 TextAlign textAlign

设置文本对齐方式。

1. TextAlign.left: 左对齐
2. TextAlign.right: 右对齐
3. TextAlign.center: 居中对齐
4. TextAlign.start: 文本开始位置对齐，类似left
5. TextAlign.end: 文本结束为止对齐，类似right
6. TextAlign.justify: 两端对齐

1.2.5 TextDirection textDirection

设置文本方向。该属性决定了TextAlign.start与TextAlign.end的表现方式。

1. TextDirection.ltr: 文本方向从左到右，此时TextAlign.start左对齐
2. TextDirection.rtl: 文本方向从右到左，此时TextAlign.start右对齐

1.2.6 Locale locale

待定…

1.2.7 bool softWrap

是否换行。

1.2.8 TextOverflow overflow

文本溢出时的表现形式。

1. TextOverflow.ellipsis：文本溢出显示省略号
2. TextOverflow.clip：文本溢出时直接裁剪掉超出部分，不作任何处理
3. TextOverflow.fade：溢出文本淡入透明
4. TextOverflow.visible: 不作处理

1.2.9 double textScaleFactor

字体缩小或放大倍数。

1.2.10 int maxLines

文本最大行数。

1.2.11 String semanticsLabel

待定…

1.2.12 TextWidthBasis textWidthBasis

待定…

1.3 示例代码

Text(
            'Hello world！',
            style: TextStyle(
                color: null,
                backgroundColor: null,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                letterSpacing: 5.0,
                wordSpacing: 6.0,
                textBaseline: TextBaseline.ideographic,
                height: 1.5,
                background: Paint()..color = Colors.blue,
                foreground: Paint()..color = Colors.red,
                decoration: TextDecoration.underline,
                decorationColor: Colors.red,
                decorationStyle: TextDecorationStyle.dashed,
                decorationThickness: 3,
                shadows: [
                  Shadow(
                      color: Colors.black,
                      blurRadius: 10.0,
                      offset: Offset(0.0, 0.0)
                  ),
                ]
            ),
            textAlign: TextAlign.start,
            textDirection: TextDirection.ltr,
            softWrap: true,
            overflow: TextOverflow.visible,
            textScaleFactor: 1.5,
          )

二、TextSpan

使文本不同部分按照不同样式显示。如下：

源码：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TextSpanDemo extends StatelessWidget {
  TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          Text.rich(TextSpan(children: [
            TextSpan(text: 'Hello ', style: TextStyle(color: Colors.blue)),
            TextSpan(
                text: 'world!',
                style: TextStyle(color: Colors.green, fontSize: 20.0))
          ])),
        ]),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text.rich(TextSpan(children: [
              TextSpan(
                text: 'http://',
              ),
              TextSpan(
                  text: 'www.baidu.com',
                  style: TextStyle(color: Colors.green, fontSize: 20.0),
                  recognizer: tapGestureRecognizer..onTap = (){
                    print('www.baidu.com');
                  }
              )
            ])),
          ],
        )
      ],
    );
  }
}

2.1 TextSpan构造器

const TextSpan({
    this.text,
    this.children,
    TextStyle style,
    this.recognizer,
    this.semanticsLabel,
  }) : super(style: style,);

2.2 TextSpan属性说明

属性	说明
String text	要显示的文本信息
List<InlineSpan> children	添加子节点
TextStyle style	同Text的style
GestureRecognizer recognizer	手势识别器
String semanticsLabel	待定…

三、DefaultTextStyle

指定默认样式，可供子节点去继承，如图：

第二个Text手动设置inherit为false可取消继承。
源码：

import 'package:flutter/material.dart';

class DefaultTextStyleDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: TextStyle(
        fontSize: 20.0,
        color: Colors.green
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                  'Hello World!'
              ),
              SizedBox(height: 20.0,),
              Text(
                'Hello World!',
                style: TextStyle(
                  inherit: false,
                  color: Colors.black
                ),
              ),
            ],
          ),
        ],
      )
    );
  }
}

3.1 DefaultTextStyle构造器

const DefaultTextStyle({
    Key key,
    @required this.style,
    this.textAlign,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.maxLines,
    this.textWidthBasis = TextWidthBasis.parent,
    @required Widget child,
  }) : assert(style != null),
       assert(softWrap != null),
       assert(overflow != null),
       assert(maxLines == null || maxLines > 0),
       assert(child != null),
       assert(textWidthBasis != null),
       super(key: key, child: child);

3.2 属性说明

同TextStyle