Flutter——Text Widget篇

前言

上一篇文章讲到了StatefulWidget和StatelessWidget，那么接下来的几篇文章就来讲讲flutter中比较常用的组件。

Text文本组件

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Text widget"),
        ),
        body: Text(
          'Hello Text',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

效果图

到此我们已经使用最简单的Text组件了，但是当前Text里面所有属性都是默认的的，下面我们就来讲讲Text组件的一些属性。

textAlign----文本的对齐方式

center: 文本居中对齐。
left:文本左对齐。
right :文本右对齐。
start:以文本开始位置进行对齐，类似于左对齐。
end: 以文本结尾处进行对齐，类似右对齐。

//设置居中对齐（这里为了演示，我给Text外面包裹一层Container并指定宽度）
 body: Container(
          //设置宽度为屏幕宽度
          width: window.physicalSize.width,
          child: Text(
            'Hello Text',
            textAlign: TextAlign.center,
          ),
 )

maxLines----设置最多显示的行数

          child: Text(
            '大家好，我是练习时长两年半的个人代码生，我的兴趣爱好是唱跳，code，篮球，music',
            textAlign: TextAlign.left,
            maxLines: 1,
          )

比如这里我最多显示行数为1，大家可以明显看到，从“唱”这个字，后面的内容都看不到了

image.png

overflow----文本溢出时的处理方式

clip：直接切断，剩下的文字就没有了。
ellipsis：在后边显示省略号。
fade：溢出的部分会进行一个渐变消失的效果。

          child: Text(
            '大家好，我是练习时长两年半的个人代码生，我的兴趣爱好是唱跳，code，篮球，music',
            textAlign: TextAlign.left,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          )

这里我给overflow设置ellipsis，大家可以明显看到后面多了3个点

image.png

style----一般用于设置文本的颜色，字号，字体等属性

比如我现在给字体大小设置为28.0,颜色为红色,并且有一个删除线，我这里只是举一个例子，比较常用的style，更多的大家可以自行查阅https://docs.flutter.io/flutter/painting/TextStyle-class.html

          child: Text(
            '大家好，我是练习时长两年半的个人代码生，我的兴趣爱好是唱跳，code，篮球，music',
            textAlign: TextAlign.left,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              color: Colors.red,//字体红色
              fontSize: 28.0,//字体大小28
              decoration: TextDecoration.lineThrough,//设置删除线
            ),
          )

尾声

本篇文章到此就结束了，希望大家能掌握Text组件的使用，接下来会继续给大家带来flutter中的其他组件！

最后编辑于：2019.05.10 09:58:30