flutter控件之--------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,
  }

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,
  }

它有两种构造方法,一种是text 一种是 text.rich,第一种就是简单的文本,第二种是段落式的文本,可以给文本中的每个textSpan设置其样式。(以上两种构造方式区别等下面介绍属性的时候一并介绍)

属性
1.data
文本的内容

2.style
文本的样式

const TextStyle({
    this.inherit = true,
    this.color,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.debugLabel,
    String fontFamily,
    String package,
  }) 

①inherit
默认为true,设置为false时候表示不显示
②color
字体颜色

③fontSize
fontSize.png

fontSize默认是14.0的
④fontWeight
字体的粗体
⑤fontStyle

normal正常 italic 斜体


fontStyle.png

⑥letterSpacing
字符间距
⑦wordSpacing
单词间距
⑧textBaseline
alphabetic:用于对齐字母字符底部的水平线
ideographic:用于对齐表意字符的水平线
textBaseline.png

⑨height
用在Text控件上的时候,会乘以fontSize做为行高,

⑩locale
国际化
⑪foreground
用paint来渲染text,也可以用他来改变字体颜色等
⑫background
⑬decoration
有四种下划线、删除线、上划线,默认是无


decoration.png

⑭decorationStyle
线的样式,源码中有这些样式
decorationStyle.png

⑮fontFamily和package(自定义字体的时候用的到,后面再详解)
children: <Widget>[
              new Text('聆听璇律', style: new TextStyle(inherit: true),),
              //color颜色--fontSize字体大小--fontWeight粗细
              new Text('李一桐黄蓉',
                style: new TextStyle(color: Colors.red,
                    fontSize: 18.0,
                    fontWeight: FontWeight.w800),),
              //fontStyle斜体
              new Text('陆雪琪', style: new TextStyle(
                  fontSize: 18.0, fontStyle: FontStyle.italic)),
              //letterSpacing字符间距
              new Text('三十年河东,三十年河西。莫欺少年穷!',
                style: new TextStyle(letterSpacing: 10.0),),
              //单词间距
              new Text('i hit you',
                style: new TextStyle(wordSpacing: 30.0),),
              new Text('七里香textBaseline',
                //style: new TextStyle(textBaseline: TextBaseline.alphabetic),)
                style: new TextStyle(textBaseline: TextBaseline.ideographic),),
              //'height: 用在Text控件上的时候,会乘以fontSize做为行高,
              new Text('夜空中最亮的星',
                style: new TextStyle(height: 2.0),),
              //decoration和decorationStyle
              new Text(
                  '烟花易冷', style: new TextStyle(
                  decoration: TextDecoration.lineThrough,
                  decorationStyle: TextDecorationStyle.wavy)),
            ],
textStyle.png

3.textAlign

enum TextAlign {
  /// Align the text on the left edge of the container.
  left,

  /// Align the text on the right edge of the container.
  right,

  /// Align the text in the center of the container.
  center,

  /// Stretch lines of text that end with a soft line break to fill the width of
  /// the container.
  ///
  /// Lines that end with hard line breaks are aligned towards the [start] edge.
  justify,

  /// Align the text on the leading edge of the container.
  ///
  /// For left-to-right text ([TextDirection.ltr]), this is the left edge.
  ///
  /// For right-to-left text ([TextDirection.rtl]), this is the right edge.
  start,

  /// Align the text on the trailing edge of the container.
  ///
  /// For left-to-right text ([TextDirection.ltr]), this is the right edge.
  ///
  /// For right-to-left text ([TextDirection.rtl]), this is the left edge.
  end,
}
textAlignRight.png
body: new Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
        child: new Text('4588856125146s 848fsf4sd6fa46fa4sf4a6sfsf46sf1a1',
          textAlign: TextAlign.right,),
      ),

4.textDirection
This decides how textAlign values like TextAlign.start and TextAlign.end are interpreted.
如文档介绍,他和textAlign.start 和textAlign.end一样,这里不多做介绍。

5.softWrap
文本是否能换行,bool类型

5.overflow

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,
}

overflow 用来指定超出文本的表示方式,是截断文本啊还是用三个点显示等

6.maxLines
用来指定文本最多显示多少行

7.textScaleFactor
文本字体的缩放倍数,如:1.5则在默认字体上变成1.5倍大小字体,0.5则是0.5倍

下面讲解第二种构造方式textSpan

new Text.rich(
            new TextSpan(
              text: '聆听璇律测试',
              children: <TextSpan>[
                new TextSpan(
                  text: '测试1',
                  style: new TextStyle(color: Colors.red)
                ),
                new TextSpan(
                    text: '哈哈',
                    style: new TextStyle(color: Colors.yellow)
                ),
              ]
            )
        )
textSpan.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 管理学培训主要和大家分享管理学的原则,一些适用于企业管理的原则。 管理学培训——第一个原则是“找出杰出的公司”。 ...
    scho阅读 504评论 0 0
  • 你充满电了吗? 我只能很真实地回答,没有。羞愧。 参照高效精力管理三个核心要素,创造意义、积极互动与储存能量,自己...
    秋秋絮语阅读 569评论 2 0
  • 今天天气闷闷的,空气又干又燥,还有点闷热。不多会儿就开始下雨了,我站在窗边看着川流不息的车辆和人群。有的打着伞疾步...
    毒醉_阅读 248评论 0 1
  • 各位师兄师姐,清晨好! 你们有没有在体制内同一个环境下同样的工作一干就是十多年甚至二十多年的?(大家举个手) 一年...
    菩提书侠阅读 1,402评论 9 11
  • 公司:宁波大发化纤有限公司 姓名:冯玉停 期数:六项精进224期感谢二组学员,234期感谢三组志工 [日精进打卡第...
    尘埃wyzh阅读 130评论 0 0