Wigets学习之Text

Text → span(HTML)

用于显示文本的部件

参数说明

• data: 显示的内容(必传)
• style: 设置文本的样式,可通过TextStyle设置,未设置 style 参数,则采用最近的DefaultTextStyle部件定义的样式,如果TextStlye.inherit为true,则指定的样式和DefaultTextStyle合并
• textAlign: 文本对齐方式,可用TextAlign中的值
• textDirection: 文本排列方向,TextDirection.ltr(左到右),TextDirection.rtl(右到左)
• locale: 设置语言环境
• softWrap: 是否换行,默认为true
• overflow: 文本溢出样式,如果不指定softWrap=true或者不指定maxLines则Textoverflow.clip(截取)和Textoverflow.fade(超出文本渐变透明)没有效果,一般常用的是Textoverflow.ellipsis(超出显示省略号)
• textScaleFactor: 文本缩放比例,可以实现控制文本大小,默认为 1.0
• maxLines: 最多展示几行
• semanticsLabel: 语义化描述
• textWidthBasis: 定义如何测量渲染文本的宽度

TextStyle

• color: 设置颜色
• backgroundColor: 设置背景色
• fontSize: 设置大小
• fontWeight: 设置粗细
• fontStyle: 设置样式FontStyle.italic(斜体)
• letterSpacing: 设置间距
• height: 设置行高
• decoration: 设置装饰线条
• decorationColor: 设置装饰线条颜色
• decorationStyle: 设置装饰线条样式dashed(虚线)\dotted(点)\double(双线)\solid(单线)\wavy(波浪线)
• decorationThickness: 设置装饰线条的粗细
• fontFamily: 设置字体

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello Flutter ' * 20,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
            color: Colors.red,
            backgroundColor: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 20,
            letterSpacing: 4,
            height: 1.5,
            decoration: TextDecoration.lineThrough,
            decorationColor: Colors.green,
            decorationThickness: 5.0),
      ),
    );
  }
}

RichText

展示富文本的部件

• text：显示的内容(必填)。是一个InLineSpan类型。一般使用TextSpan部件
• textAlign: 对齐方式
• textDirection: 文本排列方式，一般需要指定，不指定会报错
• softWrap：是否换行,默认为true
• overflow：文本溢出样式
• textScaleFactor: 文本缩放比例
• maxLines: 最多展示几行
• textWidthBasis: 定义如何测量渲染文本的宽度

TextSpan

展示文本的部件，可以嵌套使用。Text不能嵌套使用。

• text: 展示的内容
• children: 子部件，是一个List<InLineSpan>类型
• style: 文字样式，和Text一致。
• recognizer：手势检测，是一个GestureRecognizer类型
• semanticsLabel: 语义化描述

如果要使用TextSpan必须放在RichText类型的部件中，不能单独使用。除了使用RichText部件外还可以使用Text.rich

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RichText(
        textDirection: TextDirection.ltr,
        text: TextSpan(children: [
          TextSpan(text: "网站: "),
          TextSpan(
              text: "codebook.vercel.app",
              style: TextStyle(color: Colors.blue),
              recognizer: TapGestureRecognizer()..onTap = () => {print('点击网站')})
        ]),
      ),
    );
  }
}

Text.rich

创建一个类型为InLineSpan的文本部件

• textSpan：显示内容(必填)
• style：和Text一致
• textAlign: 对齐方式
• textDirection: 文本排列方式，一般需要指定，不指定会报错
• softWrap：是否换行,默认为true
• overflow：文本溢出样式
• textScaleFactor: 文本缩放比例
• maxLines: 最多展示几行
• semanticsLabel: 语义化描述
• textWidthBasis: 定义如何测量渲染文本的宽度

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text.rich(
        TextSpan(children: [
          TextSpan(text: "网站："),
          TextSpan(
              text: "codebook.vercel.app",
              style: TextStyle(color: Colors.blue),
              recognizer: TapGestureRecognizer()..onTap = () => {print('点击网站')})
        ]),
        textDirection: TextDirection.ltr,
      ),
    );
  }
}