Flutter学习--Text/RichText

一些快捷方式

command+[ (花括号的左边)-- 返回上次编辑的文件
command+shift+o 打开文件快速搜索框

练习使用一些text的属性

color

flutter的color支持5种写法

  color: Color(0xFF42A5F5),                                            //十六进制色号两个F的位置为透明度，取值范围00～FF
  color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5),         //十六进制色号第一位为透明度，从00～FF
  color: Color.fromARGB(255, 66, 165, 245),                   //十进制色号第一位为透明度，0~255
  color: Color.fromRGBO(66, 165, 245, 1.0),                    //最后一位为透明度, 0.0~1.0
  color: Colors.red                                                   //material内置
)

letterSpacing

字符间距

style: TextStyle(
  letterSpacing: 6.0
)

height

style: TextStyle(
height: 1.5
)

和css一样1.5就是字体大小的1.5倍

decoration

和css的text-decoration类似

style = TextStyle(
  decoration: TextDecoration.underline
)

有5个值
underline：下划线
none：无划线
overline：上划线
lineThrough：中划线
combine：这个就厉害了，可以传入一个List，三线齐划

字符串拼接

// 测试中间添加字符
  String blockStr6 = '单引号''_''空格';   // 输出：单引号_空格

一个小demo

class TextDemo extends StatelessWidget {

  //自定义TextStyle
  final TextStyle _style1 = TextStyle(
    color: Colors.red,
    fontSize: 18.0,
  );

  final TextStyle _style2 = TextStyle(
    color: Colors.yellow,
    fontSize: 18.0,
    backgroundColor: Colors.green
  );

  final String _title = 'Kaadas SmartLcok';
  final String _horner = 'SmortLock No.1';
  final String _content = '各位同事早上好！前段时间小会议室直播使用了一个天猫精灵，不知道是哪位同事拿去测试或试用忘记归还了，麻烦试用完的同事记得把天猫精灵归还至前台哦[Rose][Rose]';
  final String _total = 'Kaadas SmartLcok' 'SmortLock No.1' '各位同事早上好！前段时间小会议室直播使用了一个天猫精灵，不知道是哪位同事拿去测试或试用忘记归还了，麻烦试用完的同事记得把天猫精灵归还至前台哦[Rose][Rose]';  //字符串拼接
  //_totlal 为字符串拼接值

  @override
  Widget build(BuildContext context) {
    return Container(
         child: Column(
           children: <Widget>[
            Text(
              _content,
              style: _style1,//使用_style1回调
              maxLines: 3,//最大显示行数
              overflow: TextOverflow.ellipsis,//字符内容溢出处理方式

            ),

            Text(
              _total,
              style: _style2,
            )

        ],
      ),
    );
  }
}

IMG_3766.PNG

TextSpan

html里有个span这里有个TextSpan，作用基本相同，文字放一行，下面看代码

class TextDemo extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return RichText(//返回一个富文本
      text: TextSpan(
        text: '学习使我快乐😄',
        style:TextStyle(
          color: Colors.red,
        ),
        children: <TextSpan>[
          TextSpan(
            text: 'by',
            style: TextStyle(color: Colors.green)
          ),
          TextSpan(
              text: '小文',
              style: TextStyle(color: Colors.blueGrey)
          ),
        ],
      ),
    );
  }
}

IMG_3767.PNG