专栏首页Android先生Flutter组件学习(一)—— Text组件

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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android-Annotation教你写自定义注解

    地址:https://juejin.im/post/5a14158df265da432c237bfc

    用户2802329
  • Gradle多渠道打包(动态设定App名称,应用图标,替换常量,更改包名,变更渠道)

    最近有个需求一次要打包9个类型的App,而且常量和String.xml都有变量。虽然之前也是一直存在变量,但是每次也仅仅只打包一个。这让我每次改变量,打包9个。...

    用户2802329
  • Context都没弄明白,还怎么做Android开发?

    作为Android开发者,不知道你有没有思考过这个问题,Activity可以new吗?Android的应用程序开发采用JAVA语言,Activity本质上也是一...

    用户2802329
  • Spring面向切面AOP优先级order顺序混乱

    嘈杂的环境下写代码果然容易分神和出错,当然了不能找借口给自己开脱,还是技术欠佳,导致的低级错误 问:哥们儿,请教一下springAOP日志打印。没报错就是x...

    瑞新
  • Win32 Linux汇编语法区别

    一、简介 作为最基本的编程语言之一,汇编语言虽然应用的范围不算很广,但重要性却勿庸置疑,因为它能够完成许多其它语言所无法完成的功能。就拿 Linux 内...

    ke1th
  • 程序员你为什么这么累【续】:如何应对需求变更

    作者:晓风轻 原文:https://zhuanlan.zhihu.com/p/28719726 我之前的文章 程序员你为什么这么累? 中,我个人观点是加班原因是...

    程序猿DD
  • 编码规范 -- 如何应对需求变更

      现在的程序员为什么这么累,其实很大程度上来说是加班原因使编码质量占了大部分因素,但是不少同学都不认为是代码质量导致的加班,都认为是不断的需求改动导致的加班。...

    Kevin_Zhang
  • 我的编码习惯 - 如何应对需求变更

    我之前的文章 程序员你为什么这么累? 中,我个人观点是加班原因是编码质量占了大部分因素,但是不少同学都不认为是代码质量导致的加班,都认为是不断的需求改动导致的加...

    哲洛不闹
  • JS setInterval函数实现倒计时

    week
  • 前端基础之CSS_2

    标签与标签之间的margin是相对的,它的上下左右有时候只能有2处可以确定,另外2边由于没有参照不会有间隔,所以使用时候一般不会全部上下左右都写上。要表...

    py3study

扫码关注云+社区

领取腾讯云代金券