码云 Flutter教程 2021-03-26

P06. Flutter Text Widget 文本组件的使用

文章目录隐藏

TextAlign 属性
maxLines 属性
overflow 属性
style 属性

在开始学习 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,
          ),
        )),
      ),
    );
  }
}

效果如下：