Flutter之Text组件

const Text(
this.data,//this.data 要显示的文本内容
    {Key key,
    this.style,
    this.textAlign,//文本对齐方式
    this.textDirection,//文本方向
    this.locale,
    this.softWrap,//是否自动换行 false文字不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
    this.overflow,//文字超出屏幕之后的处理方式,TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
    this.textScaleFactor,//文本字体的缩放倍数,如:1.5则在默认字体上变成1.5倍大小字体,0.5则是0.5倍
    this.maxLines,//文本最多显示多少行
    this.semanticsLabel,
    }) : assert(data != null),
    textSpan = null,
    super(key: key);
const TextStyle({
    this.inherit = true, //默认为true,设置为false时候表示不显示
    this.color,//文字颜色
    this.fontSize,//文字大小 ,默认是14.0的
    this.fontWeight,//字体粗细  粗体和正常
    this.fontStyle,//文字样式,normal正常 italic 斜体
    this.letterSpacing,//字母间隙(负值可以让字母更紧凑)
    this.wordSpacing,//单词间隙(负值可以让单词更紧凑)
    this.textBaseline, //alphabetic:用于对齐字母字符底部的水平线,  ideographic:用于对齐表意字符的水平线
    this.height,  //用在Text控件上的时候,会乘以fontSize做为行高
    this.locale,//国际化
    this.foreground,//用paint来渲染text,也可以用他来改变字体颜色等
    this.background,
    this.decoration, //四种下划线、lineThrough删除线、overline上划线,默认是无
    this.decorationColor,//线的颜色
    this.decorationStyle,//文字装饰的风格  dashed虚线大间隔,dotted虚线小间隔,double在underline和lineThrough时两条线,在overline时三条线,solid在underline和solidlineThrough时一条线,在overline两条线
    this.debugLabel,
    String fontFamily,
    String package,
    }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
    assert(inherit != null),
    assert(identical(color, null) || identical(foreground, null), _kColorForegroundWarning);
const Text.rich(
    this.textSpan,//可以给文本中的每个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);
body: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.ltr",
                  textDirection: TextDirection.ltr
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.rtl",
                  textDirection: TextDirection.rtl
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.center",
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.left",
                textAlign: TextAlign.left,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.right",
                textAlign: TextAlign.right,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.justify 两端对齐",
                textAlign: TextAlign.justify,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.start",
                textAlign: TextAlign.start,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.end",
                textAlign: TextAlign.end,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: true    是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行",
                softWrap: true,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: false    是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行",
                softWrap: false,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.clip    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.clip,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.ellipsis    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.fade    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.fade,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("textScaleFactor  字体缩放倍数",
                textScaleFactor: 2.0,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "maxLines  文本最多显示多少行,可以和overflow: TextOverflow.ellipsis一起使用,在最后一行末尾显示省略号  文本最多显示多少行文本最多显示多少行文本最多显示多少行",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("color颜色,fontSize大小",
                style: TextStyle(
                    color: Color(0xffff0000),
                    fontSize: 18.0
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontWeight 字体粗细  w100 ~ w900 和粗体与正常,正常是w400,粗体是w700",
                style: TextStyle(
                    fontWeight: FontWeight.bold
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontStyle 文字样式,normal正常, italic 斜体",
                style: TextStyle(
                    fontStyle: FontStyle.italic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 10.0,
                  letterSpacing: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 1.0,
                  letterSpacing: 5.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.alphabetic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.ideographic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height会乘以fontSize做为行高",
                style: TextStyle(
                  height: 2.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height会乘以fontSize做为行高",
                style: TextStyle(
                  height: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "decoration四种下划线underline、lineThrough删除线、overline上划线,默认是无;decorationColor线的颜色;文字装饰的风格  dashed虚线大间隔,dotted虚线小间隔,double在underline和lineThrough时两条线,在overline时三条线,solid在underline和solidlineThrough时一条线,在overline两条线",
                style: TextStyle(
                  fontSize: 20.0,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Color(0xffff0000),
                  decorationStyle: TextDecorationStyle.solid,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text.rich(
                TextSpan(
                    text: "Text.rich方式",
                    children: <TextSpan>[
                      TextSpan(
                          text: "改变颜色",
                          style: TextStyle(
                            color: Color(0xffff0000),
                          )
                      ),
                      TextSpan(
                          text: "改变大小",
                          style: TextStyle(
                              fontSize: 12.0
                          )
                      ),
                    ]
                ),
              ),
            ),
          ],
        ),

练习demo,链接https://gitee.com/xgljh/Flutter

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

推荐阅读更多精彩内容