flutter中Text Widget 文本组件的使用【黑马web前端】

更新时间:2019年07月26日 11时16分17秒来源:黑马程序员论坛

看一下最基础的HelloWold代码。

[AppleScript] 纯文本查看 复制代码

[mw_shl_code=html,true]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 JSPang')          ),        ),      );  }}

[/mw_shl_code]

这里我们已经使用了一个最简单的Text组件了，但是我们所有属性都是默认的的，下面我们就来多一点修饰这个Text组件。

TextAlign属性

TextAlign属性就是文本的对齐方式，它的属性值有如下几个（详细请看视频中讲解）：

center: 文本以居中形式对齐,这个也算比较常用的了。
left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
right :右对齐，使用频率也不算高。
start:以开始位置进行对齐，类似于左对齐。
end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

总结起来，也就算三个对齐方式，left(左对齐)、center（居中对齐）、right（右对齐）。我们来看一下具体代码：

[AppleScript] 纯文本查看 复制代码

child:Text(  'Hello JSPang  ,非常喜欢前端，并且愿意为此奋斗一生。我希望可以出1000集免费教程。',  textAlign:TextAlign.left,)

maxLines属性

设置最多显示的行数，比如我们现在只显示1行，类似一个新闻列表的题目。代码如下：

[AppleScript] 纯文本查看 复制代码

child:Text(  'Hello JSPang  ,非常喜欢前端，并且愿意为此奋斗一生。我希望可以出1000集免费教程。',  textAlign:TextAlign.left,  maxLines: 1,)

设置好后，文字只能显示出1行了。

overflow属性

overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。

style属性

style属性的内容比较多，具体的你可以查一下API，我这里带作一个效果，方便大家快速学会Style的用法。

我们下面要作的效果为，字体大小为25.0,颜色为粉红色,并且有一个下划线。

[AppleScript] 纯文本查看 复制代码

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 JSPang  ,非常喜欢前端，并且愿意为此奋斗一生。我希望可以出1000集免费教程。',  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,  ),)          ),        ),      );  }}

更详细的属性资料可以参看这个网址：https://docs.flutter.io/flutter/painting/TextStyle-class.html

其实程序员最重要的一个能力就是查看文档的能力，我这里也只是讲些最常使用的，在实际工作中，还是要多查稳定。

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

flutter中Text Widget 文本组件的使用【黑马web前端】

相关阅读