Flutter 基本控件--Text的使用

Text：该 widget 可让创建一个带格式的文本

字体样式解析如下：

const TextStyle({
    this.inherit: true,        // 为false的时候不显示
    this.color,                // 字体颜色 
    this.fontSize,             // 字体字号
    this.fontWeight,           // 字重，加粗也用这个字段  FontWeight.w700
    this.fontStyle,            // FontStyle.normal  FontStyle.italic斜体
    this.letterSpacing,        // 字符间距  就是单个字母或者汉字之间的间隔，可以是负数
    this.wordSpacing,          // 字间距 句字之间的间距
    this.textBaseline,         // 基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的
    this.height,               // 当用来Text控件上时，行高
    this.decoration,           // 添加上划线，下划线，删除线 
    this.decorationColor,      // 划线的颜色
    this.decorationStyle,      // 这个style可能控制画实线，虚线，两条线，点, 波浪线等
    this.debugLabel,
    String fontFamily,        // 字体
    String package,
  }) 

具体代码

import 'package:flutter/material.dart';

class TextDemo extends StatefulWidget {
  _TextDemo createState() => _TextDemo();
}

class _TextDemo extends State<TextDemo> {
  @override
  void initState() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      margin: EdgeInsets.only(top: 50),
      child: Column(
        children: [
          Text("简单用法1"),
          Text(
            "简单用法2",
            style: TextStyle(color: Colors.green, fontSize: 16),
          ),
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.all(20), //设置四周外边距为20
            padding: EdgeInsets.only(top: 10, left: 20), //设置上和左内边距
            child: Text(
              "简单用法3-设置字体",
              style: TextStyle(
                  color: Colors.green,
                  fontSize: 16,
                  fontStyle: FontStyle.italic),
            ),
          ),
          Text(
            "简单用法4-添加下划线",
            style: TextStyle(
              color: Colors.green,
              fontSize: 16,
              decoration: TextDecoration.underline,
            ),
          ),
          Container(
            width: double.infinity, // 宽度上撑满
            child: Text(
              "简单用法5-右边对齐",
              textAlign: TextAlign.right,
            ),
          ),
          RichText(
            text: TextSpan(
                //TextSpan中的style 样式需要设置属性，不设置无法显示文字
                style: DefaultTextStyle.of(context).style,
                children: <InlineSpan>[
                  TextSpan(text: '哈哈', style: TextStyle(color: Colors.red)),
                  TextSpan(text: '，'),
                  TextSpan(
                      text: '这是一个富文本', style: TextStyle(color: Colors.blue)),
                ]),
          ),
          Text.rich(
            TextSpan(children: [
              TextSpan(text: "我", style: TextStyle(color: Colors.red)),
              TextSpan(text: "也", style: TextStyle(color: Colors.grey)),
              TextSpan(text: "是富文本", style: TextStyle(color: Colors.blue)),
            ]),
          ),
        ],
      ),
    ));
  }
}

最终实现效果

标签：控件,style,TextStyle,--,TextSpan,color,Colors,Text
来源： https://blog.csdn.net/u010350891/article/details/114178988