Flutter 基本组件之TextView

Text组件的构造方法

构造方法一
该构造方法用于创建一个单一格式的 Text，其中第一个必传参数为文本内容

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

构造方法二
该构造方法用于创建一个富文本的 Text，其中第一个必传参数为 TextSpan，TextSpan 中可以设置 children 属性，包含多个 TextSpan，每个 TextSpan 可以设置各自的文本内容和样式

 const Text.rich(
    this.textSpan, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  }) : assert(
         textSpan != null,
         'A non-null TextSpan must be provided to a Text.rich widget.',
       ),
       data = null,
       super(key: key);

常用属性

属性名	功能	值所属类型
data	Text显示的文本，必填参数	String
textAlign	文本对齐方式（center 居中，left 左 对齐，right 右对齐，justfy 两端对齐）	TextAlign
maxLines	文本显示的最大行数	int
overflow	文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）	TextOverflow
textScaleFactor	文本的缩放比例	double
textDirection	文本方向（ltr从左至右，rtl从右至 左）	TextDirection
style	用于指定文本显示的样式如颜色、字体、粗细、背景等	TextStyle

style属性

属性名	功能	值所属类型
color	设置文本的颜色	Color
fontSize	设置字体大小	double
fontWeight	字体的加粗权重bold粗体，normal正常体	FontWeight
fontStyle	文本显示样式（italic斜体，normal正常体）	FontStyle
letterSpacing	单词之间的间距 如果是负值，会让字母变得更紧凑）	double
wordSpacing	字母之间的间距如果是负值，会让单词变得更紧凑	double
height	行高，需要注意的是这里的值是个比例值	double
decoration	文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线	TextDecoration
decorationColor	文字装饰线颜色	Color
decoration	文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线	TextDecoration
decorationStyle	文字装饰线风格（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪 线）	TextDecorationStyle

/*
 * Text 基本属性 
 */
class NormalText extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
  
    return Text(" 我是Text 基本属性 我是Text 基本属性我是Text 基本属性我是Text 基本属性我是Text 基本属性我是Text 基本属性我是Text 基本属性",
      textAlign: TextAlign.start, //文本对齐方式  TextAlign.left 靠左对齐 , TextAlign.right 靠右对齐,TextAlign.justify 两端对齐,TextAlign.center 居中, TextAlign.start 靠左边开始位置对齐,TextAlign.end 靠对齐容器尾部边缘
      textScaleFactor: 1.2,  // 文本的比例大小 ,比喻文本比例大小是1.5 , 显示出来就是文本的1.5倍.
      textDirection: TextDirection.rtl, // 这是指文本的方向, TextDirection.ltr 这靠左到右显示TextDirection.rtl 这是靠右到左显示
      maxLines: 1, // 最大显示行数,
      overflow: TextOverflow.ellipsis, // 当文字超出显示屏幕的时候, clip 裁剪, fede 渐显 , ellipsis 省略号
      style: TextStyle(
        fontSize:  20,  // 设置 字体的大小
        color: Colors.blue ,// 设置颜色 ,  Color.fromARGB 这可以设置颜色的rgb值, 最后一个值是指透明，1.0完全不透明
        backgroundColor: Color.fromRGBO(222,225, 40, 1.0), // 背景颜色
        fontWeight:  FontWeight.bold ,  // 字体的权重, bold 是粗字体, normal正常字体
         letterSpacing: 1.2 ,// 单词之间的距离
         wordSpacing: 1.6 ,// 字母之间的距离
          height:  1.4 ,  // 行高 , 是一个比例值
          decoration:  TextDecoration.overline ,// 文字的装饰线 
          decorationColor:  Colors.grey,   //装饰线的颜色
          decorationStyle: TextDecorationStyle.double  // 装饰线的样式
      ),
    );
  }

TextSpan

TextSpan跟Text的区别就在于TextSpan是分片，我们可以把一串字符串分为几个片段来管理，每个片段可以单独设置样式

/*
 * TextSpan  的属性 
 */
class TextSpanView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(TextSpan(children: [
      TextSpan(
        text: '张三',
        style: TextStyle(
            color: Colors.red, fontSize: 30.0, fontWeight: FontWeight.bold),
      ),
      TextSpan(
          text: "爱打篮球----",
          style: TextStyle(
              color: Colors.black,
              fontSize: 20.0,
              height: 1.2,
              decoration: TextDecoration.underline,
              wordSpacing: 1.6))
    ]));
  }
}

DefaultTextStyle

父节点的文本样式子节点默认会继承，如果子节点中重新设置了默认样式的某些属性，那么则以子节点设置的为准。我们也可以通过设置inherit: false 不继承父节点的默认样式。

/*
 * DefaultTextStyle
 */
class MyDefaultTextStyle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      // 设置默认的样式, 可以通过继通过设置inherit: false 不继承父节点的默认样式
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 30,
        color: Colors.grey,
        letterSpacing: 1,
        wordSpacing: 3,
        fontWeight: FontWeight.bold,
      ),

      child: Column(
        children: <Widget>[
          Text(
            "text 1",
            style: TextStyle(
              /*这里我们重新指定一下颜色，那么最终的颜色就以子节点的设置为准*/
              color: Colors.deepOrange,
            ),
          ),
          Text(
            "text 2",
            style: TextStyle(
              inherit: false, //inherit设为false表示不继承父节点默认样式，默认值为true
              color: Colors.orange,
            ),
          ),
          Text("text 3") // 这是全部继承父类吃样式,颜色
        ],
      ),
    );
  }
}

效果

image.png