Flutter基础学习 2-19 Text Widget 文本组件的使用

这篇文章主要介绍Flutter中Text Widget文本组件的使用......

Demo代码如下：

import 'package:flutter/material.dart';
void main() {
     runApp(MyApp());
}
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
       return MaterialApp(
       title: 'Welcome to Flutter',   //title ： 在任务管理窗口中所显示的应用名字
       home: Scaffold(              
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          //在主体的中间区域，添加一个Hello World
          body: Center(
            child: Text(
              'Hello Flutter，这里省略一万个字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字',
              textAlign: TextAlign.left,    //文字对齐方式
              overflow: TextOverflow.ellipsis,   //溢出的文字处理
              maxLines: 1,
              style: TextStyle(
                fontSize: 25.0, //小数一位
                color: Color.fromARGB(255, 125, 125, 255),//文字颜色设置
                decoration: TextDecoration.underline,//下划线
                decorationStyle: TextDecorationStyle.solid,//下划线的样式
              ),
            ),
          ),
       ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

需要注意的知识点：

1、TextAlign属性

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

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

2、maxLines属性

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

3、overflow属性

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

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

4、style属性

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

扫描二维码关注公众号，回复： 6657328 查看本文章

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

运行截图：

Flutter基础学习 2-19 Text Widget 文本组件的使用

猜你喜欢