import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "tttttttttt",
      home: Scaffold(
        appBar: AppBar(
          title: Text("我是标题"),
        ),
        body: HomeContext(),
      ),
    );
  }
}

//自定义的Widget
class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return TextRich();
  }
}

//文本演示
class TextContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "<<定风波>> 苏轼\n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？\n料峭春风吹酒醒，微冷",
        style: TextStyle( //文字的修饰风格,他也是个widget
          fontSize: 20, //文字大小
          color: Colors.orange, //文字颜色 也可以 color:Color(0xffff4400),0x是固定的 ff是透明度 后面的是16进制
          fontWeight: FontWeight.w700, //文字加粗
          backgroundColor: Color(0xffff4400), //文字背景颜色
          height: 2.0,//行高
          decoration:TextDecoration.lineThrough //下划线 none:不加下划线 underline:上方 overline:下方 lineThrough:中间
        ),
        textAlign: TextAlign.center, //文字的对齐方式
        maxLines: 3, //文字修饰的行数
        overflow:TextOverflow.ellipsis,//溢出后如何处理 
      ),
    );
  }
}


//富文本
class TextRich extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text.rich(
          TextSpan(
            text: 'hello world',
            children: [
              TextSpan(
                text: '<<定风波>>',
                style: TextStyle(fontSize: 30,color: Colors.red)
              ),

              TextSpan(
                text: '苏轼',
                style: TextStyle(fontSize: 18,color: Colors.yellow)
              ),
            
              TextSpan(
                text: '\n莫听穿林打叶声,何妨吟啸且徐行。      ',
                style: TextStyle(fontSize: 22,color: Colors.blue)
              )
            
            ]
          ),
          textAlign: TextAlign.center,//让文字居中     
        )
      ],
    );

1:文本:

文本的参数我都在代码里面详细备注了

显示效果为:

2:富文本:

富文本比较有意思,学习的时候看了10几遍,感觉都会了,但是自己动手写的时候却废了...

Text.rich 需要传入一个 TextSpan()

这个TextSpan比较有意思

他可以传入

TextSpan(
                text: '<<定风波>>',
                style: TextStyle(fontSize: 30,color: Colors.red)
              ),

作为独立一行处理,也可以这样写

TextSpan(
            text: 'hello world',
            children: [
              TextSpan(
                text: '<<定风波>>',
                style: TextStyle(fontSize: 30,color: Colors.red)
              ),
             ]
         )

他还带了个 children的数组,这个数组里面还可以在传入TextSpan....多重嵌套

总结:如果文本只有一行,那么直接写text,Style即可 如果有多行,那么在Text.rich里面直接传入多个TextSpan即可

Text.rich 还有个参数可以让文本居中 

textAlign: TextAlign.center 但是这个居中,需要文字是整整一行,也就是说需要文本把这行撑开,在这行上面或者下面的行里的文字不够一行的时候,他们才会居中,个人认为这样不好

所以我在外面包了一层 row 设置row的主轴居中 这样就实现了文本的居中对齐

效果如图: