Flutter 常用组件-3 文本组件

1 Text

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

常用属性

属性名	类型	默认值	说明
data	String		数据为要显示的文本
maxLines	int	0	文本显示的最大行数
style	TextStyle	null	文本样式，可定义文本的字体大小、颜色、粗细等
textAlign	TextAlign	TextAlign.center	文本水平方向对齐方式，取值右center、end、justify、left、right、start、values
textDirection	TextDirection	TextDirection.ltr	有些文本书写方向从左到右，如英语、中文，有些则是从右到左，比如乌尔都语。从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl
textScaleFactor	double	1.0	字体缩放系数，比如设置为1.5，那么字体会放大1.5倍
textSpan	TextSpan	null	文本块，TextSpan里可以包含文本内容及样式

2 RichText

富文本组件RichText使用多个不同风格的widget显示文本，要显示的文本使用TextSpan对象树来描述，每个对象都有一个用于该子树的关联样式。文本可能多行，也可能显示在同一行，取决于布局约束。

常用属性:

属性名	类型	默认值	说明
text	TextSpan	-	要显示的的文本
textAlign	TextAlign	TextAlign.start	文本水平方向对齐方式，取值右center、end、justify、left、right、start、values
textDirection	TextDirection	TextDirection.ltr	有些文本书写方向从左到右，如英语、中文，有些则是从右到左，比如乌尔都语。从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl
softWrap	bool	true	是否自动换行
overflow	TextOverflow	TextOverflow.clip	内容超出文本范围处理方式，默认截断处理
textScaleFactor	double	1.0	文本缩放比例，默认100%比例显示
maxLines	int	-	最大显示行数

3 Text示例

添加库依赖：

url_launcher: ^5.0.2

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

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

//Text RickText
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '海浪不停 整夜吟唱 孤独陪着我守望 忐忑徘徊 执着等待 我要穿越过这海 灯塔的光 就在彼岸',
                maxLines: 1,
                overflow: TextOverflow.ellipsis, //3小点
                softWrap: true, //自动换行
                style: TextStyle(
                    fontSize: 30.0,
                    decoration: TextDecoration.lineThrough,
                    decorationStyle: TextDecorationStyle.wavy),
              ),
              SizedBox(
                height: 10.0,
              ),
              RichText(
                text: TextSpan(
                  text: '海浪不停 整夜吟唱 孤独陪着我守望 , ',
                  style: TextStyle(color: Color(0xffff0000), fontSize: 20.0),
                  children: [
                    TextSpan(
                      text: '忐忑徘徊 执着等待 我要穿越过这海',
                    ),
                    TextSpan(
                        text: '灯塔的光 就在彼岸', //
                        style: TextStyle(color: Color(0xff0000ff)),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () async {
                            String url = 'https://www.baidu.com/';
                            if (await canLaunch(url)) {
                              await launch(url);
                            } else {
                              throw 'error: $url';
                            }
                          }),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

显示效果：