P06. Flutter Text Widget 文本组件的使用
目录
在开始学习 Text 组件前,我们再来复习一遍最基本的代码编写,肯定有些小伙伴已经忘记了。我们来快速写一个 HelloWorld 程序出来。
看一下最基础的 HelloWold 代码。
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:'Text widget', home:Scaffold( body:Center( child:Text('Hello Mybj') ), ), ); } }
这里我们已经使用了一个最简单的 Text 组件了,但是我们所有属性都是默认的的,下面我们就来多一点修饰这个 Text 组件。
TextAlign 属性
TextAlign
属性就是文本的对齐方式,它的属性值有如下几个(详细请看视频中讲解):
center
: 文本以居中形式对齐,这个也算比较常用的了。left
:左对齐,经常使用,让文本居左进行对齐,效果和 start 一样。right
:右对齐,使用频率也不算高。start
:以开始位置进行对齐,类似于左对齐。end
: 以为本结尾处进行对齐,不常用。有点类似右对齐.
总结起来,也就算三个对齐方式,left
(左对齐)、center
(居中对齐)、right
(右对齐)。我们来看一下具体代码:
child:Text( '码云笔记是一个关注 web 前端开发的独立个人技术博客', textAlign:TextAlign.left, )
maxLines 属性
设置最多显示的行数,比如我们现在只显示 1 行,类似一个新闻列表的题目。代码如下:
child:Text( '码云笔记是一个关注 web 前端开发的独立个人技术博客', textAlign:TextAlign.left, maxLines: 1, )
设置好后,文字只能显示出 1 行了。
overflow 属性
overflow 属性是用来设置文本溢出时,如何处理,它有下面几个常用的值供我们选择。
clip
:直接切断,剩下的文字就没有了,感觉不太友好,体验性不好。ellipsis
:在后边显示省略号,体验性较好,这个在工作中经常使用。fade
: 溢出的部分会进行一个渐变消失的效果,当然是上线的渐变,不是左右的哦。
style 属性
style
属性的内容比较多,具体的你可以查一下 API,我这里带作一个效果,方便大家快速学会 Style 的用法。
我们下面要作的效果为,字体大小为 25.0,颜色为粉红色,并且有一个下划线。
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Text widget', home: Scaffold( body: Center( child: Text( '码云笔记是一个关注 web 前端开发的独立个人技术博客', textAlign: TextAlign.left, overflow: TextOverflow.ellipsis, maxLines: 1, style: TextStyle( fontSize: 25.0, color: Color.fromARGB(255, 255, 150, 150), decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.solid, ), )), ), ); } }
效果如下:
更详细的属性资料可以参看这个网址:TextStyle-class
其实程序员最重要的一个能力就是查看文档的能力,我这里也只是讲些最常使用的,在实际工作中,还是要多查文档。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06. Flutter Text Widget 文本组件的使用
码云笔记 » P06. Flutter Text Widget 文本组件的使用