【Flutter -- 基础组件】文本组件 Text ＆ TextStyle ＆ TextSpan

本篇文章会介绍 Flutter 里常用的 UI 控件 – 文本。

1. Text

Text 用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。

1.1 属性

const Text(
    this.data, {
    
    Key key,
    this.style, // 字体样式
    this.strutStyle,
    this.textAlign, // 文字对齐
    this.textDirection, // 文字方向
    this.locale,
    this.softWrap, // 自动换行，默认是 true，自动换行
    this.overflow, // 溢出样式
    this.textScaleFactor, // 字体倍数，字体大小 * textScaleFactor
    this.maxLines, // 最大行数
    this.semanticsLabel,
    this.textWidthBasis,
  })

1.2 实例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
        appBar: AppBar(
          title: Text('文本及样式'),
        ),
          body:Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Text("1.Text",
                textScaleFactor: 1.5,
              ),

              const Text("hello,I'm Kevin"),

              Text("少壮不努力，老大徒伤悲。" * 3,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          )
      )

    );
  }
}

1.3 效果图

2. TextStyle

TextStyle 用于指定文本显示的样式如颜色、字体、粗细、背景等。

2.1 属性

 const TextStyle({
    
    this.inherit = true, // 为false 的时候不显示
    this.color, // 颜色 
    this.backgroundColor,
    this.fontSize,   // 字号
    this.fontWeight,   // 字重，加粗也用这个字段 FontWeight.w700
    this.fontStyle,  // FontStyle.normal FontStyle.italic斜体
    this.letterSpacing, // 字符间距 就是单个字母或者汉字之间的间隔，可以是负数
    this.wordSpacing,   // 段落间距，以空格为准
    this.textBaseline,   // 基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）
    this.height,   // 当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.decoration,  // 添加上划线，下划线，删除线 
    this.decorationColor,    // 划线的颜色
    this.decorationStyle, // 这个style可能控制画实线，虚线，两条线，点, 波浪线等
    this.decorationThickness,
    this.debugLabel,
    String fontFamily, // 字体
    List<String> fontFamilyFallback,
    String package,
  }) 

2.2 实例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
        appBar: AppBar(
          title: Text('文本及样式'),
        ),
          body:Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Text("2.TextStyle",
                textScaleFactor: 1.5,
              ),

              Text("一份耕耘，一份收获。",
                style: TextStyle(
                    color: Colors.blue,
                    fontSize: 18.0,
                    height: 1.2,
                    fontFamily: "Courier",
                    background: Paint()..color=Colors.yellow,
                    decoration:TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.dashed
                ),
              ),
            ],
          )
      )

    );
  }
}

2.3 效果图

3. TextSpan

Text 的所有文本内容只能按同一种样式，如果我们需要对一个 Text 内容的不同部分按照不同的样式显示，这时就可以使用 TextSpan，它代表文本的一个“片段”。

3.1 属性

const TextSpan({
    
  TextStyle style,  //该文本片段的样式
  Sting text,   //该文本片段的内容
  List<TextSpan> children, // 是一个TextSpan的数组，也就是TextSpan可以包括其他TextSpan
  GestureRecognizer recognizer, // 用于对该文本片段上用于手势进行识别处理。
});

3.2 实例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
        appBar: AppBar(
          title: Text('文本及样式'),
        ),
          body:Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Text("3.TextSpan",
                textScaleFactor: 1.5,
              ),

              const Text.rich(TextSpan(
                  children: [
                    TextSpan(
                        text: "我的 CSDN 博客: "
                    ),
                    TextSpan(
                        text: "https://blog.csdn.net/duoduo_11011",
                        style: TextStyle(
                            color: Colors.blue
                        ),
                    ),
                  ]
              )),
            ],
          )
      )

    );
  }
}

3.3 效果图

参考文献

• 文本及样式