Flutter 之 Text 控件

Text 属性

new Text(
         'You have pushed the button this many times:',
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr, 
          softWrap: false,
          overflow: TextOverflow.ellipsis,
          textScaleFactor: 2.0, 
          maxLines: 10,
         )
  • data,Text 控件的第一个属性,指的是 Text 的文本

  • textAlign:文本对齐方式,分别有:
    TextAlign.left 文本左对齐
    TextAlign.right 文本右对齐
    TextAlign.center 文本居中
    TextAlign.justify 文本两端对齐
    TextAlign.start 同 TextAlign.left
    TextAlign.end 同 TextAlign.right

  • textDirection 文本方向,分别有
    TextDirection.ltr 从左到右
    TextDirection.rtl 从右到左

  • softWrap 是否换行处理,如为 false,超出屏幕做截断处理

  • overflow 文字超出屏幕之后的处理方式
    TextOverflow.clip 截断处理
    TextOverflow.fade 超出透明化
    TextOverflow.ellipsis 省略号处理

  • textScaleFactor 字体缩放大小

  • maxLines 限制行数

  • style 属性

      style: TextStyle(
                inherit: true,
                color: const Color(0xff000000),
                backgroundColor: Colors.white,
                fontSize: 32, 
                fontWeight: FontWeight.w900, 
                fontStyle: FontStyle.italic, 
                letterSpacing: 4.0, 
                wordSpacing: 6.0, 
                textBaseline: TextBaseline.ideographic,
                height: 1,
                locale:const Locale('en', 'US'),
               // foreground: paint,
               // background:paint,
                shadows:[BoxShadow(color: Colors.grey, offset: Offset(-1, -1), blurRadius: 5)],
                decoration:TextDecoration.lineThrough,
                decorationColor:Colors.blue,
                 decorationStyle:TextDecorationStyle.double,
                decorationThickness:2.0,
                debugLabel:"label",
                fontFamily:"DIN_Medium.ttf",
                //fontFamilyFallback:,
                package:"assets/fonts",
              ),
  1. inherit 未设置属性是否继承父节点样式
  2. color 字体颜色
  3. backgroundColor 背景颜色
  4. fontSize 字体大小,单位为 pt 或 sp ,默认 14 sp
  5. fontWeight 字体的粗细,正常 (FontWeight.w400) 和粗体
  6. fontStyle 字体样式,正常和斜体
  7. letterSpacing 字符之间的间距倍数
  8. wordSpacing 单词间隙
  9. textBaseline 对齐表意文字的水平线
  10. height 字体的倍数
  11. locale 多国语言设置
  12. foreground 通过 Paint 来设置字体的颜色,color 和 foreground 不能同时设置
  13. background 通过Paint来设置字体的背景颜色,backgroundColor 和 background 不能同时设置
  14. shadows 文字阴影
  15. decoration TextDecoration.none 没有 TextDecoration.underline 下划线TextDecoration.overline 上划线TextDecoration.lineThrough 中间的线(删除线)
  16. decorationColor 划线的颜色
  17. decorationStyle 划线的样式 TextDecorationStyle.solid 实线 TextDecorationStyle.double 画两条线 TextDecorationStyle.dotted 点线(一个点一个点的)TextDecorationStyle.dashed 虚线(一个长方形一个长方形的线)TextDecorationStyle.wavy 正玄曲线
  18. decorationThickness 划线粗细的宽度
  19. debugLabel 调试标签
  20. fontFamily 字体名称
  21. fontFamilyFallback 文字字体列表,如果前面的 fontFamily 提供了,以fontFamily 为准,如果没有提供,则使用该列表第一个元素作为字体,都没提供则使用默认字体
  22. package 文字字体路径

Text.rich 属性

和Text相比多出一个textSpan

new TextSpan(
                text: 'Hello Flutter',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 15.0,
                  decoration: TextDecoration.none,
                ),
                children: <TextSpan>[
                  new TextSpan(
                    text: 'TextSpan',
                    style: new TextStyle(
                      color: Colors.blue,
                    ),
                    recognizer:new TapGestureRecognizer()..onTap = () {
                      //点击具体事件处理
                      print("TapGestureRecognizer");
                    }
                  ),
                ],
              ),

这里有个 .. 的 Dart 语法,这是以前没见过的,查看文档,这种叫

Cascade notation (..)(级联操作符)

级联操作符 (..) 可以在同一个对象上 连续调用多个函数以及访问成员变量。 使用级联操作符可以避免创建 临时变量。

Text 点击事件

Text 点击事件需要借助 GestureDetector

new GestureDetector(
              child: new Text(
                '$_counter',
                textAlign: TextAlign.justify,//对齐方式
                textDirection:TextDirection.ltr,
                style: Theme.of(context).textTheme.display1,
              ),
              onTap: ()  {
                print("Text");
              },
            )

这样在 onTap 里面就可以处理点击事件了,另外还有 onDoubleTap 和 onLongPress 等等手势操作事件。

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

推荐阅读更多精彩内容

  • Text Widget “文本”小组件显示单个样式的文本字符串。字符串可能会跨越多行,也可能全部显示在同一行上,具...
    飞羽_ifeiyv阅读 838评论 0 2
  • 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 37,554评论 5 19
  • 文字显示控件 Text, Text.rich Text 相关属性: Text.rich 相关属性: 很明显这两个控...
    leowwh阅读 13,293评论 10 7
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 丫头的幺弟昨日被山上的土匪乱刀砍死了,只是因为他的生辰礼物被看上,他却不给,便惨遭此等祸事。 丫头领着幺弟的新衣裳...
    姜小颂颂也二喜阅读 294评论 0 0