Flutter组件学习(一)—— Text组件

序言

之前说会给大家一一讲解 Flutter 中的组件,今天咱们就从 Text 组件开始,无图言X,先上图:

Text组件的API

我们先来看一下 Text 组件的构造方法

 1class Text extends StatelessWidget {
 2  const Text(this.data, {
 3    Key key,
 4    this.style,
 5    this.textAlign,
 6    this.textDirection,
 7    this.locale,
 8    this.softWrap,
 9    this.overflow,
10    this.textScaleFactor,
11    this.maxLines,
12    this.semanticsLabel,
13  }) : assert(data != null),
14       textSpan = null,
15       super(key: key);
16
17  const Text.rich(this.textSpan, {
18    Key key,
19    this.style,
20    this.textAlign,
21    this.textDirection,
22    this.locale,
23    this.softWrap,
24    this.overflow,
25    this.textScaleFactor,
26    this.maxLines,
27    this.semanticsLabel,
28  }): assert(textSpan != null),
29      data = null,
30      super(key: key);
31}

构造方法有两个,一个是默认的 Text 样式,一个是现实丰富 Text.rich 样式,这样解释大家应该能猜得到就和 Android 中的 SpannableString 一样,下面来看一下 Text 组件的一些 API

API名称

功能

textAlign

文本对齐方式(center居中,left左对齐,right右对齐,justfy两端对齐)

textDirection

文本方向(ltr从左至右,rtl从右至左)

softWare

是否自动换行(true自动换行,false单行显示,超出屏幕部分默认截断处理)

overflow

文字超出屏幕之后的处理方式(clip裁剪,fade渐隐,ellipsis省略号)

textScaleFactor

字体显示倍率

maxLines

文字显示最大行数

style

字体的样式设置

下面是 TextStyleAPI

API名称

功能

decoration

文字装饰线(none没有线,lineThrough删除线,overline上划线,underline下划线)

decorationColor

文字装饰线颜色

decorationStyle

文字装饰线风格([dashed,dotted]虚线,double两根线,solid一根实线,wavy波浪线)

wordSpacing

单词间隙(如果是负值,会让单词变得更紧凑)

letterSpacing

字母间隙(如果是负值,会让字母变得更紧凑)

fontStyle

文字样式(italic斜体,normal正常体)

fontSize

文字大小

color

文字颜色

fontWeight

字体粗细(bold粗体,normal正常体)

还有一点需要注意的是,在 Flutter 中,并不是每个 Widget 都有点击事件,比如 Text 就没有,这时候你需要用一个 GestureDetector 组件包住 Text 组件,然后实现它里面的 onTap() 事件,详细看下面代码:

  1class _TextViewWidget extends State<TextViewWidget> {
  2  @override
  3  Widget build(BuildContext context) {
  4    return new Column(
  5      children: <Widget>[
  6        Text('什么也不设置'),
  7        Padding(
  8          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
  9          child: Text(
 10            '设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行设置换行',
 11            //是否自动换行 false文字不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
 12            softWrap: true,
 13          ),
 14        ),
 15        Padding(
 16          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 17          child: Text(
 18            '设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则设置超出屏幕之后的显示规则',
 19            //文字超出屏幕之后的处理方式  TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
 20            overflow: TextOverflow.ellipsis,
 21          ),
 22        ),
 23        Padding(
 24          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 25          child: Text(
 26            '设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数设置最大显示行数',
 27            maxLines: 2,
 28            overflow: TextOverflow.ellipsis,
 29          ),
 30        ),
 31        Padding(
 32          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 33          child: Text(
 34            '文本方向 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
 35            //TextDirection.ltr从左至右,TextDirection.rtl从右至左
 36            textDirection: TextDirection.rtl,
 37          ),
 38        ),
 39        Padding(
 40          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 41          child: Text(
 42            '文本对齐方式 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
 43            //TextAlign.left左对齐,TextAlign.right右对齐,TextAlign.center居中对齐,TextAlign.justfy两端对齐
 44            textAlign: TextAlign.center,
 45          ),
 46        ),
 47        Padding(
 48          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
 49          child: Text(
 50            '设置颜色和大小',
 51            style: TextStyle(
 52              color: const Color(0xfff2c2b2),
 53              fontSize: 17,
 54            ),
 55          ),
 56        ),
 57        Padding(
 58          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
 59          child: Text(
 60            '设置粗细和斜体',
 61            style: TextStyle(
 62              //字体粗细,粗体和正常
 63              fontWeight: FontWeight.bold,
 64              //文字样式,斜体和正常
 65              fontStyle: FontStyle.italic,
 66            ),
 67          ),
 68        ),
 69        Padding(
 70          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
 71          child: Text(
 72            '设置文字装饰',
 73            style: TextStyle(
 74              //none无文字装饰,lineThrough删除线,overline文字上面显示线,underline文字下面显示线
 75              decoration: TextDecoration.underline,
 76              decorationColor: Colors.red,
 77              decorationStyle: TextDecorationStyle.wavy
 78            ),
 79          ),
 80        ),
 81        Padding(
 82          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 83          child: Text(
 84            '单词间隙 hello world i am jack',
 85            style: TextStyle(
 86              wordSpacing: 10.0,
 87            ),
 88          ),
 89        ),
 90        Padding(
 91          padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
 92          child: Text(
 93            '字母间隙 hello world',
 94            style: TextStyle(
 95              letterSpacing: 10.0,
 96            ),
 97          ),
 98        ),
 99        Padding(
100          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
101          child: GestureDetector(
102            onTap: () {
103              print("点击了按钮");
104            },
105            child: Text(
106              '设置文字点击事件',
107              style: TextStyle(
108                color: Colors.blue,
109                fontWeight: FontWeight.bold,
110                fontStyle: FontStyle.italic,
111              ),
112            ),
113          ),
114        ),
115        Padding(
116          padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
117          child: Text.rich(
118            new TextSpan(
119                text: 'Text.rich',
120                style: new TextStyle(
121                    color: Colors.yellow,
122                    fontSize: 13,
123                    decoration: TextDecoration.none),
124                children: <TextSpan>[
125                  new TextSpan(
126                      text: '拼接1',
127                      style: new TextStyle(
128                          color: Colors.blue,
129                          fontSize: 14,
130                          decoration: TextDecoration.none)),
131                  new TextSpan(
132                      text: '拼接2',
133                      style: new TextStyle(
134                          color: Colors.black,
135                          fontSize: 15,
136                          decoration: TextDecoration.none)),
137                  new TextSpan(
138                      text: '拼接3',
139                      style: new TextStyle(
140                          color: Colors.red,
141                          fontSize: 16,
142                          decoration: TextDecoration.none)),
143                  new TextSpan(
144                      text: '拼接4',
145                      style: new TextStyle(
146                          color: Colors.grey,
147                          fontSize: 17,
148                          decoration: TextDecoration.none)),
149                ]),
150          ),
151        )
152      ],
153    );
154  }
155}

代码已上传至Github:https://github.com/24Kshign/FlutterWorkSpace/tree/master/flutter_element

原文发布于微信公众号 - IT先森养成记(cyg_24kshign)

原文发表时间:2018-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏上善若水

018android初级篇之自定义圆形进度条

项目需要,需要一个圆形的进度条,所想到的实现方案是这样的: 自定义View,订制一个圆形的进度条。下面简述实现,有不当之处敬请指正。

1085
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

3916
来自专栏前端小叙

js焦点轮播图

汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play。不用加...

62113
来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

3019
来自专栏逸鹏说道

逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

好几天没上QQ了,今天上了个QQ,,额....额...貌似消息还挺多,没及时回复的还请见谅~~刚好昨天无聊把水印这快封装出来了,支持图片水印,文字水印,索引图...

3556
来自专栏淡定的博客

css3的一些新属性总结

box-sizing规定了盒子的计算方式,常用于消除hover时,盒子之间的影响,有三个属性:

781
来自专栏cnblogs

Css3新特性应用之形状

一、自适应椭圆 * border-radius特性:     * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽...

1799
来自专栏知道一点点

【原创】bootstrap框架的学习 第五课

<h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。</p>

883
来自专栏用户2442861的专栏

HTML/CSS基础知识学习笔记

http://www.cnblogs.com/scue/p/4276339.html

1451
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

2936

扫码关注云+社区

领取腾讯云代金券