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 等等手势操作事件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容