Flutter之文本组件Text和RichText

Flutter之文本组件Text和RichText

1、概述

文本组件负责显示文本和定义显示的样式

2、Text 常用属性（显示简单样式⽂本，包含控制⽂本显示样式的属性）

• data：String类型，要显示的文本
• maxLines：int类型，默认值是0，文本显示的最大行数，有多余的⽂本，可以通过 overflow 来指定截断⽅式，默认是直接截断，例如TextOverflow.ellipsis 会将多余⽂本截断后以省略符“…”表示
• style：TextStyle类型，文本样式
• textAlign：TextAlign类型，默认值是TextAlign.center，文本水平方向的对齐方式，取值center、end、justify、left、right、start、values
• textDirection：TextDirection类型，默认值是TextDirection.ltr，文本的书写方向
• textSpan：文本块，TextSpan类型，文本块

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), 
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              '你好flutter你好flutter你好flutter你好flutter你好flutter',
              style: TextStyle(
                color: Colors.pink,
                fontSize: 20.0,
                fontWeight: FontWeight.w600,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dashed
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis
            ),
            Text(
              '中国加油',
              textAlign: TextAlign.center
            ),
            RichText(
              text: TextSpan(
                text: '中国加油',
                style: TextStyle(
                  color: Colors.blue
                ),
                children: [
                  TextSpan(
                    text: '武汉加油',
                    style: TextStyle(
                      color: Colors.red
                    )
                  )
                ]
              ),
            )
          ]
        )
      ), 
    );
  }
}