Flutter学习：基础组件（一）

1.Text

用于显示单个样式的文本控件，字符串可以显示一行或者多行，具体取决于布局约束。
text的属性值：

 const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,//图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
  }) : assert(data != null),
       textSpan = null,
       super(key: key);

style	文字基本样式设置，包括（inherit, color, fontSize, fontWeight, fontStyle, letterSpacing, wordSpacing, textBaseline, height, locale, foreground, background,）
textAlign	文本对齐方式（如左对齐，右对齐，中心对齐等）
textDirection	有两种方式：TextDirection.rtl: 在这里插入图片描述 TextDirection.ltr: 在这里插入图片描述
locale	分别是languageCode，scriptCode和countryCode的语言， 脚本和 区域。
softWrap	文本是否可以换行
overflow	对文本进行处理，如果不换行结尾显示省略，还是变模糊等有个属性值（TextOverflow.clip，TextOverflow.ellipsis，TextOverflow.fade）
textScaleFactor	文本比例缩放因子
maxLines	文本最多显示行数

代码如下：

class TestText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text(
      'hello world hello world hello world hello world hello world hello world',
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
      locale: Locale.fromSubtags(languageCode: 'und'),
      softWrap: true,
      overflow: TextOverflow.clip,
      textScaleFactor: 1.5,
      maxLines: 2,
      semanticsLabel: ,
      style: TextStyle(
          inherit: false,
          color: Colors.blue,
          fontSize: 20,
          height: 1
      ),
    );
  }
}

对于文字样式属性的基本了解：

属性	介绍
inherit	是否继承TextSpan tree的样式，默认为true
color	字体颜色
fontSize	字体大小
fontWeight	字体的权重 通过这个fontWeight: FontWeight.w100调节字体的粗细
fontStyle	字体样式，有斜体字，正常字体
letterSpacing	字符间距
wordSpacing	字间距，包括一个单词与一个单词之间的间距
textBaseline	文本基线
height	行高
foreground	文本前景绘制图
background	文本背景绘制图
decoration	添加上划线，下划线，删除线（如TextDecoration.lineThrough）

style: TextStyle(
          inherit: false,
          color: Colors.blue,
          fontSize: 20,
          fontWeight: FontWeight.w100,
          fontStyle: FontStyle.italic,
          letterSpacing: 1.0,
          wordSpacing: 20,
          textBaseline: TextBaseline.ideographic,
          height: 1,
          decoration: TextDecoration.lineThrough,
          decorationStyle: TextDecorationStyle.dashed,
          background:mPaint,
      ),

在这里插入图片描述

1.Text.rich

可以显示具有不同样式TextSpan的段落。
在他的构造器中多了TextSpan参数。

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null),
      data = null,
      super(key: key);

TextSpan的构造器为：

const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
  });

对于这几个参数的介绍：

参数名	描述
style	和Text控件的无差别
text	文本标签
children	集合，添加多个textSpan
recognizer	手势识别，点击等一系列操作

class TestTextRich extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        text: "hello world",
        children: [
          TextSpan(
              text: "Hello world",
              style: TextStyle(
                  inherit: true,
                  fontStyle: FontStyle.italic
              )
          ),
          TextSpan(
              text: "hello world",
              style: TextStyle(
                  inherit: false,
                  fontWeight: FontWeight.bold,
                  fontSize: 50,
                  decoration: TextDecoration.underline
              )
          ),
        ],
        style: TextStyle(
          inherit: false,
          fontSize: 100,
          fontStyle: FontStyle.italic,
        ),
        recognizer: new TapGestureRecognizer()
          ..onTap = () {
            print("点击了父TextSpan");
          },
      ),
      softWrap: true,
      textDirection: TextDirection.rtl,
      textAlign: TextAlign.center,
    );
  }

在这里插入图片描述