Flutter常用组件(Widget)解析-Text
单一格式的文本。
文本组件是以字符串形式显示的单一格式,这个文本字符串可以是多行显示也可以是单独一行显示,主要取决于你的布局限制。
这样式内容是可选择的,如果你省略了,则会使用文本的默认样式来显示。如果给定的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的更多相关文章
- Flutter常用组件(Widget)解析-ListView
一个可滚动的列表组件 不管在哪,列表组件都尤为重要和常用. 首先来看个例子: import 'package:flutter/material.dart'; void main () => ru ...
- Flutter常用组件(Widget)解析-Container
一个组件它往往包含了一些常见的painting, positioning和sizing这样的小部件. Container相当于我们常用的div,在Flutter中用的非常多,现在来看看Containe ...
- Flutter常用组件(Widget)解析-Scaffold
实现一个应用基本的布局结构. 举个栗子: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); clas ...
- Flutter常用组件(Widget)解析-Image
显示图片的组件 以下是几种加载图片路径方式: Image.asset 加载asset项目资源中的文件 Image.network 加载网络资源图片,通过url加载 Image.file 加载本地文件中 ...
- Flutter 常用组件
无状态组件(StatelessWidget)是不可变的,这意味着它的属性不能改变,所有的值都是最终的. 有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化.实现一 ...
- Flutter常用布局组件
Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...
- flutter Container组件和Text组件
在开始之前,我们先写一个最简单的入口文件: 后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...
- Flutter 基础组件:Widget简介
概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...
- Ext 常用组件解析
Ext 常用组件解析 Panel 定义&常用属性 //1.使用initComponent Ext.define('MySecurity.view.resource.ResourcePanel' ...
随机推荐
- mysql原理~undo管理
一 简介:undo管理 二 各版本说明 1 5.5 undo位置:默认ibdata1中,不支持独立表空间 缺点:大事务可能造成ibdata1暴涨,只能dump导出导入或者从新搭建 参数: ...
- escape、encodeURI和encodeURIComponent的区别
1.简单解释 简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读. 编码之后的效果是%XX或者%uXXXX这种形式. 其中 ASCII字母. ...
- cdh部署
supermicro安装环境 本次安装基于无因特网的环境,共安装2个节点(一个master节点,一个data及节点),所用系统为centos7.x,所有安装过程均使用root用户.具体的节点信息如下: ...
- Debian 安装配置(包括kdevelop)
最近几天折腾了一下Debian 7 (gnome桌面DVD版,KDE桌面CD版最后会提到),总的来说收获还是挺大的,对比以前使用ubuntu,debian 7给我的感觉像是一个新生婴儿,不带多余的花俏 ...
- 关于python中的类方法(classmethod)和静态方法(staticmethod)
首先明确两点: a)python在创建类的时候,self指向的是类的实例而不是类属性! b)我们所创建的类的方法有两种作用,一种是改变类的属性,一种是改变实例的属性,这点一定要分清! c)我们在调用类 ...
- ARMV8 datasheet学习笔记1:预备知识
1. 前言 ARMv8的架构继承以往ARMv7与之前处理器技术的基础; 除了支持现有的16/32bit的Thumb2指令外,也向前兼容现有的A32(ARM 32bit)指令集. 基于64bit的AAr ...
- Linux 调优方案, 修改最大连接数(ulimit命令)【转】
转自:http://blog.csdn.net/liangxiaozhang/article/details/8363435 Linux对于每个用户,系统限制其最大进程数.为提高性能,可以根据设备资源 ...
- 通过全备+binlog_server同步恢复被drop的库或表
MySQL 中drop 等高危误操作后恢复方法 实验目的: 本次实验以恢复drop操作为例,使用不同方法进行误操作的数据恢复. 方法: 利用master同步 :伪master+Binlog+同步(本文 ...
- scn 时间
Scn转换成时间: select to_char(scn_to_timestamp(3998591352171),'YYYY-MM-DD HH24:MI:SS') from dual: 时间转换成sc ...
- 转载:编译安装Nginx(1.4)《深入理解Nginx》(陶辉)
原文:https://book.2cto.com/201304/19617.html 安装Nginx最简单的方式是,进入nginx-1.0.14目录后执行以下3行命令:./configuremakem ...