Flutter组件学习（2）文本控件Text

目录

回顾

文本控件Text

Text常用属性

---

回顾

上一篇0901博客里介绍了导航栏，要基于MaterialApp和Scaffold，并且在Scaffold父容器里添加了导航栏，接下来，还是基于Scaffold容器，添加body属性

Text常用属性

style: TextStyle(           height: 10,           fontSize: 30,           color: Colors.green,           backgroundColor: Colors.yellow,           letterSpacing: 5.0,           fontWeight: FontWeight.w900,           decoration: TextDecoration.lineThrough,           decorationStyle: TextDecorationStyle.dashed,           decorationColor: Colors.purple         )	TextStyle属性设置控件 高度 字号 字体颜色 背景颜色 字符间距 加粗 设置下划线（文字上方，中间，下方） 下划线格式（直线，虚线（横线虚线，双横线虚线，单横线虚线，点点虚线）） 下划线颜色 backgroundColor: Colors.green, background: new Paint()..color=Colors.yellow 这两种设置背景，不能同时出现，会报错，建议用后者
maxLines:1,	最大行数
textScaleFactor: 1.7	文字缩放倍数
overflow: TextOverflow.ellipsis,	如果文字过多，末尾用省略号代替或者截断文本
softWrap: false,	设置是否是单行显示
textAlign: TextAlign.left,	文本的对齐方式
'我是文本控件'*10	*10复制10次
fontFamily: "Courier"	设置字体样式
inherit: false,	false不继承默认样式,通常和DefaultTextStyle一起使用

测试

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

class MyAppText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text('Text文本控件练习'),
          textTheme: TextTheme(
            title: TextStyle(
              fontSize: 18,
              color: Colors.yellow
            )
          ),
        ),
        body: TextClass(),
      ),
    );
  }
}

class TextClass extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text(
      'Hello world哈哈哈' * 10,
      style: TextStyle(
        fontSize: 30,
        color: Colors.blue,
        height: 1.2,
        decoration: TextDecoration.underline,
        decorationColor: Colors.purple,
        decorationStyle: TextDecorationStyle.dashed,
        fontFamily: 'Courier',
        background: new Paint()..color=Colors.yellow,
        letterSpacing: 5,
        fontWeight: FontWeight.w600
      ),
      textAlign: TextAlign.center,
      textScaleFactor: 1.1,
    );
  }
}

运行效果

TextSpan属性

要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”

这里要用到Text.rich

class TextClass extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text.rich(
      TextSpan(
        style: TextStyle(
          fontSize: 30,
          color: Colors.blue
        ),
        children: [
          TextSpan(text: 'hello '),
          TextSpan(text: 'world '),
          TextSpan(
            text: '哈哈哈 ',
            style: TextStyle(
              fontSize: 14,
              color: Colors.purple
            )
          )
        ]
      )
    );
}

DefaultTextStyle

文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），因此，如果在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的 

class TextClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return DefaultTextStyle(
      style: TextStyle(fontSize: 30, color: Colors.red),
      child: Column(
        children: <Widget>[
          Text('hello world'),
          Text('哈哈哈')
        ],
      ),
    );
}

如果在Text里调用inherit: false，我们看下效果

Text('哈哈哈',
  style: TextStyle(
    inherit: false,
    color: Colors.green
  ),
)