Flutter组件篇-Text组件

一、Text组件属性

Text("Hello world",
  textAlign: TextAlign.left,//文本对齐方式  (center居中,left左对齐,right右对齐,justfy两端对齐)
  textDirection: TextDirection.ltr,//文本方向  (ltr从左至右,rtl从右至左)
  maxLines: 1,//最大行数
  softWrap: true,//是否自动换行   (true自动换行,false不换行,超出屏幕部分默认截断处理)
  overflow: TextOverflow.clip,//文字超出屏幕之后的处理方式  (clip裁剪,fade渐隐,ellipsis省略号)
  textScaleFactor: 1.5,//字体显示倍率
  style: TextStyle(//文字样式
    color: Colors.blue,//文字颜色  (十六进制颜色写法Color(0xff4caf50)数字0字母xff后跟十六进制代码 0xff中ff代表透明度)
    fontSize: 18.0,//文字大小
    height: 1.2,  //指定行高
    fontStyle: FontStyle.italic,//文字样式  (italic斜体,normal正常体)
    fontFamily: "Courier",//字体
    fontWeight: FontWeight.w900,//文字粗细
    background: Paint()..color=Colors.yellow,
    decoration:TextDecoration.none,//文字装饰线  (none没有线,lineThrough删除线,overline上划线,underline下划线)
    decorationStyle: TextDecorationStyle.dashed//文字装饰线风格  ([dashed,dotted]虚线,double两根线,solid一根实线,wavy波浪线)
  ),
);

二、Text片段

  • 如果我们需要对一个 Text 内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”。
Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
));

三、设置默认样式

  • 在 Widget 树中,文本的样式默认是可以被继承的(子类文本类组件未指定具体样式时可以使用 Widget 树中父级设置的默认样式),因此,如果在 Widget 树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式
DefaultTextStyle(
  //设置文本默认样式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"),
      Text("I am Jack"),
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不继承默认样式
          color: Colors.grey
        ),
      ),
    ],
  ),
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容