单一格式的文本。

文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制。

这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示。如果给定的style的文本继承属性是true,即默认的,则这些给定的样式会与那些默认的文本样式合并。这种合并的属性非常有用,比如,让文字粗体显示,我们可以使用默认的字体和大小。

child: new Text(
'Hello, How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),

我们也可以使用富文本编辑器,让一段文本通过使用不同的TextSpan显示不同的样式。比如我们让"Hello beautiful world"的每个单词都显示不同的样式:

const Text.rich(
TextSpan(
text: 'Hello', // default text style
children: <TextSpan>[
TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic,fontSize: 48.0)),//斜体
TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 36.0)),//粗体
],
),
)

当我们对一个文本的行数有要求时,就需要用到maxLines属性了:

 child: new Text(
'Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 48.0),
maxLines: 2,
),

 1、textAlign

文本对齐方式

  • center: 文本以居中形式对齐。
  • left:左对齐,经常使用,让文本居左进行对齐,效果和start一样。
  • right :右对齐。
  • start:以开始位置进行对齐,类似于左对齐。
  • end: 以为本结尾处进行对齐,不常用。有点类似右对齐。

2、maxLines

设置最多显示的行数。用法: maxLines: int整数

3、overflow

这个属性是用来设置溢出文本的样式,通常与maxLines配合一起使用。有以下几个属性值:

  • clip 超出文本框范围内的文字直接切断。显得很生硬,没有过度,不友好
  • ellipsis 使用省略号来显示溢出的文本,用的比较多的一种效果
  • fade 对超出文本内容的部分会有一个渐变消失的效果,这个不是左右渐变的效果,而是下面部分渐变的效果。可以看例子:
     'Hello, How are you? I am fine. Thank you',
textAlign: TextAlign.center,
overflow: TextOverflow.fade,
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 48.0),
maxLines: 1,

可以从上图看到,文本下面部分是有阴影效果的。

4、style

style属性的内容算是比较多的,通常就是我们对文字样式的设置

Bold

粗体显示

Text(
'Hello, How are you? I am fine. Thank you',
 style: TextStyle(fontWeight: FontWeight.bold),
)

Italics

斜体显示

child: Text(
'Hello, How are you? I am fine. Thank you',
style: TextStyle(fontStyle: FontStyle.italic),
),

Opacity和Color

透明度和字体颜色

child: Text(
'Hello, How are you? I am fine. Thank you',
style: TextStyle(color: Colors.red),//红色字体
),
child: Text(
'Hello, How are you? I am fine. Thank you',
style: TextStyle(color: Colors.red.withOpacity(0.5)),//透明度50%的红色字体
),

Size

字体大小

child: Text(
'Hello, How are you? I am fine. Thank you',
style: TextStyle(color: Colors.red.withOpacity(0.5),fontSize: 48.0),
),

Line height

行高

child: Text(
'Hello, How are you? I am fine. Thank you',
style: TextStyle(color: Colors.red.withOpacity(0.5),fontSize: 48.0,height: 5.0),
),

5、以上就是比较常用的文本组件的属性,更多更详细的可以参考网址:一键送达

Flutter常用组件(Widget)解析-Text的更多相关文章

  1. Flutter常用组件(Widget)解析-ListView

    一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...

  2. Flutter常用组件(Widget)解析-Container

    一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...

  3. Flutter常用组件(Widget)解析-Scaffold

    实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...

  4. Flutter常用组件(Widget)解析-Image

    显示图片的组件 以下是几种加载图片路径方式: Image.asset 加载asset项目资源中的文件 Image.network 加载网络资源图片,通过url加载 Image.file 加载本地文件中 ...

  5. Flutter 常用组件

    无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的. 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化.实现一 ...

  6. Flutter常用布局组件

    Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...

  7. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  8. Flutter 基础组件:Widget简介

    概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...

  9. Ext 常用组件解析

    Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...

随机推荐

  1. canny 算子python实现

    1. Canny介绍 Canny算子与Marr(LoG)边缘检测方法类似,也属于是先平滑后求导数的方法.John Canny研究了最优边缘检测方法所需的特性,给出了评价边缘检测性能优劣的三个指标: 1 ...

  2. tomcat下部署应用helloworld

    部署应用(简单)1.到Tomcat的安装目录的webapps目录,可以看到ROOT,examples, tomcat-docs之类Tomcat自带的的目录.2.在webapps目录下新建一个目录mya ...

  3. lnmp使用socket方式连接nginx优化php-fpm性能

    lnmp使用socket方式连接nginx优化php-fpm性能 Nginx连接fastcgi的方式有2种:TCP和unix domain socket 什么是Unix domain socket?- ...

  4. Linux查看文件命令

    linux查看日志文件内容命令有 cat 由第一行开始显示文件内容 tac 从最后一行开始显示,可以看出 tac 是 cat 的倒着写 nl 显示的时候,顺道输出行号! more 一页一页的显示文件内 ...

  5. jQuery性能优化指南

    总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码:代码 <div id=&q ...

  6. ThinkPHP中如何获取指定日期后工作日的具体日期

    思路: 1.获取到查询年份内所有工作日数据数组2.获取到查询开始日期在工作日的索引3.计算需查询日期索引4.获得查询日期 /*创建日期类型记录表格*/ CREATE TABLE `tb_workday ...

  7. 树链剖分边权模板spoj375

    树链剖分是树分解成多条链来解决树上两点之间的路径上的问题 如何求出树链:第一次dfs求出树上每个结点的大小和深度和最大的儿子,第二次dfs就能将最大的儿子串起来并hash(映射)到线段树上(或者其他数 ...

  8. Python的字符串内建函数(字符串处理)

    Python的字符串内建函数这些方法实现了string模块的大部分方法 , 如下表硕士列出了目前字符串内建支持的方法 string = 'XXX' string.capitalize() # 把字符串 ...

  9. oracle中计算某月的天数

    select add_months(to_date('201202', 'YYYYMM'),1)-to_date('201202', 'YYYYMM') from dual

  10. 《剑指offer》-铺地砖方案数

    我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 又是斐波那契...稍微变形一下. class Solution { pub ...