image.png

✨✨✨✨✨ 魏什么_多喝水 Flutter 之路

语雀地址

class Text extends StatelessWidget {  //静态的 widget
  const Text(
    this.data, {
    Key key,
    this.style,         //字体样式 字体大小、字体颜色.....
    this.strutStyle,    //使用的支撑风格
    this.textAlign,     //对齐方式
    this.textDirection, //文本方向
    this.locale,        //国际化
    this.softWrap,      //是否允许换行显示 默认true false时不换行
    this.overflow,      //文本的截断方式
    this.textScaleFactor, //代表文本相对于当前字体大小的缩放因子 默认值为1.0
    this.maxLines,      //文字显示的最大行数
    this.semanticsLabel,//给文本加上一个语义标签 没有实际用处
    this.textWidthBasis,//设置一段文字宽度的显示基础
  })

1. Text 的必选参数：data

Text 的内容 data 是必选参数。其他都为可选参数

Text(
  'Text Demo'
),

2. this.style 字体样式、字体大小、字体颜色

TextStyle 的构造参数：

class TextStyle extends Diagnosticable {
  
  const TextStyle({
    this.inherit = true,  //是否继承父 Text 的样式，默认为 true
如果为false，且样式没有设置具体的值，则采用默认值：白色、字体大小 10px、sans-serif 字体
    this.color,           //字体颜色
    this.backgroundColor, //字体背景色
    this.fontSize,        //字体大小 
    this.fontWeight,      //字体粗细
    this.fontStyle,       //是否在字体中倾斜字形
    this.letterSpacing,   //字母之间的间距
    this.wordSpacing,     //单词之间的间隔
    this.textBaseline,    //用于对齐文本的水平线
    this.height,          //文本的高度.但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
    this.locale,          //用于选择用户语言和格式设置首选项的标识符
    this.foreground,      //文本的前景色
    this.background,      //文本的背景色
    this.shadows,         //在文本下方绘制阴影
    this.fontFeatures,    //字体特征.是个数组
    this.decoration,      //文本的线条
    this.decorationColor, //线条的颜色
    this.decorationStyle, //线条的样式
    this.decorationThickness, //线条的密度,值越大线条越粗
    this.debugLabel,      //文本样式的描述,无实际用处
    String fontFamily,    //用于设置使用哪种自定义字体
    List<String> fontFamilyFallback, //字体列表，当前面的字体找不到时，会在这个列表里依次查找
    String package,       //用于设置使用哪种自定义字体
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning),
       assert(backgroundColor == null || background == null, _kColorBackgroundWarning);
    ...
}

color 、 fontSize 颜色，字体大小

 Text(
    '想都是问题，做才有答案!',
    style: TextStyle(fontSize: 20,color: Colors.blue),
  ),

image.png

fontWeight 字体粗细

  Text(
    '想都是问题，做才有答案! ',
    style: TextStyle(
        fontSize: 20, 
        color: Colors.blue, 
        fontWeight: FontWeight.w100
    ),
  ),
  Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w200,
    ),
  ),Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w300,
    ),
  ),Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w400,
    ),
  ),Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w500,
    ),
  ),
  Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w600,
    ),
  ),
  Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w700,
    ),
  ),
  Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w800,
    ),
  ),
  Text(
    '想都是问题，做才有答案!',
    style: TextStyle(
      fontSize: 20,
      color: Colors.blue,
      fontWeight: FontWeight.w900,
    ),
  ),

image.png

fontStyle 是否在字体中倾斜字形

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontStyle: FontStyle.italic, //默认不倾斜normal
  ),
),

image.png

letterSpacing 字母之间的间隔

  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 0.0,),
  ),

  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 1.0,),
  ),

  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 2.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 3.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 4.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 5.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 6.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 7.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 8.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 9.0,),
  ),
  Text(
    'I love you jinan',
    style: TextStyle(color: Colors.blue, letterSpacing: 10.0,),
  ),

image.png

wordSpacing 单词之间的间隔

Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 0.0,),
),

Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 1.0,),
),

Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 2.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 3.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 4.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 5.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 6.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 7.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 8.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 9.0,),
),
Text(
  'I love you jinan',
  style: TextStyle(color: Colors.blue, wordSpacing: 10.0,),
),

image.png

textBaseline 用于对齐文本的水平线

alphabetic： 用于对齐字母字符底部的水平线

ideographic：用于对齐表意字符的水平线

 Text(
  '想都是问题，做才有答案! I love you jinan',

  style: TextStyle(color: Colors.blue, textBaseline: TextBaseline.alphabetic,fontSize: 15),
),
Text(
  '想都是问题，做才有答案!I love you jinan',
  style: TextStyle(color: Colors.blue, textBaseline: TextBaseline.ideographic,fontSize: 15),
),

image.png

height 文本的高度

行高系数,实际行高 = height * fontSize

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 15,
      height: 2
  ),
),
Divider(color: Colors.grey, height: 0.5,),
Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 15,
      height: 3
  ),
),
Divider(color: Colors.grey, height: 0.5,),
Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 15,
      height: 4
  ),
),
Divider(color: Colors.grey, height: 0.5,),
Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 15,
      height: 5
  ),
),
Divider(color: Colors.grey, height: 0.5,),

image.png

foreground 文本的前景色

background 文本的背景色

因为对 Paint 不熟悉,暂不做笔记...

shadows 阴影

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            //颜色
            color: Colors.deepOrange,
            //偏移量 默认 0,0 （x轴 和  y轴）x 正数偏右,负数偏左.    y 正数向下偏移,负数向上偏移
            offset: Offset(1,2),
            //模糊半径,默认0 
            blurRadius: 5,
        )]
  ),
),

image.png

x轴偏移

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(5,0),//y轴不变 x轴正数, 向右偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(-5,0),//y轴不变 x轴负数, 向左偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(0,5), //x轴不变。 y轴为正数,向下偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(0,-5), //x轴不变。 y轴为负数数,向上偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(5,5), //都为正数  , 向右下角偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(-5,-5), //都是负数 左上角偏移
            blurRadius: 3,
        )]
  ),
),

image.png

其他情况也一样,就是 x,y轴....

fontFeatures 字体特征.是个数组

decoration, 文本的线条

给文字添加删除线、上划线、下划线等,可同时添加多个

• TextDecoration.overline 上划线
• TextDecoration.lineThrough 删除线
• TextDecoration.underline 下划线

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 20,
      decoration: TextDecoration.lineThrough, //删除线
  ),
),

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
    color: Colors.red,
    fontSize: 20,
    decoration: TextDecoration.overline, //上划线
  ),
),

Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
    color: Colors.teal,
    fontSize: 20,
    decoration: TextDecoration.underline, //下划线
  ),
),

image.png

decorationColor 线条的颜色

给删除下增加颜色

 Text(
  '想都是问题，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 20,
      decoration: TextDecoration.lineThrough,
    decorationColor: Colors.deepOrange
  ),
),

image.png

decorationStyle 线条的样式

• TextDecorationStyle.dashed 短横线
• TextDecorationStyle.dotted 点线
• TextDecorationStyle.double 双线
• TextDecorationStyle.solid 实线
• TextDecorationStyle.wavy 波浪线

  Text(
    '我是删除线',
    style: TextStyle(
      color: Colors.red,
      fontSize: 20,
      decoration: TextDecoration.lineThrough,
      decorationColor: Colors.blue,
      decorationStyle: TextDecorationStyle.dashed
    ),
  ),

  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
  //                decorationStyle: TextDecorationStyle.dashed
        decorationStyle: TextDecorationStyle.dotted
    ),
  ),
  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.double
    ),
  ),
  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.solid
    ),
  ),
  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.wavy
    ),
  ),

image.png

decorationThickness

 Text(
    '我是删除线',
    style: TextStyle(
      color: Colors.red,
      fontSize: 20,
      decoration: TextDecoration.lineThrough,
      decorationColor: Colors.blue,
      decorationThickness: 1.00
    ),
  ),

  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationThickness: 2.00
    ),
  ),
  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationThickness: 3.00
    ),
  ),
  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationThickness: 4.00
    ),
  ),
  Text(
    '我是删除线',
    style: TextStyle(
        color: Colors.red,
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.blue,
        decorationThickness: 5.00
    ),
  ),

image.png

3. strutStyle 使用的支撑风格

const StrutStyle({
    String fontFamily,     //用于设置使用哪种自定义字体
    List<String> fontFamilyFallback,  //字体列表，当前面的字体找不到时，会在这个列表里依次查找
    this.fontSize, //字体的像素大小 默认14像素
    this.height,   //行高系数,实际行高 = height * fontSize
    this.leading,  //行与行直接的头部额外间距  = leading * fontSize
    this.fontWeight, //字体粗细,(设置没效果...)
    this.fontStyle,  
    this.forceStrutHeight,
    this.debugLabel,
    String package,
  ....
}

4. this.textAlign 对齐方式

• TextAlign.left 左对齐
• TextAlign.right 右对齐
• TextAlign.center 居中
• TextAlign.justify 自适应 两端对齐
• TextAlign.start 如果textDirection 是ltr ，start表示左对齐 ，如果textDirection是rtl，start表示右对齐。
• TextAlign.end 如果textDirection 是ltr，end表示右对齐，如果textDirection是rtl ，end表示左对齐

Text(
  'TextAlign.right TextAlign.right  TextAlign.right  TextAlign.right',
  style: TextStyle(backgroundColor: Colors.green, fontSize: 20),
  textAlign: TextAlign.right,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextAlign.left TextAlign.left TextAlign.left TextAlign.left',
  textAlign: TextAlign.left,
  style: TextStyle(fontSize: 20, backgroundColor: Colors.cyan),
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextAlign.center TextAlign.center TextAlign.center TextAlign.center',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 20, backgroundColor: Colors.brown),
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextAlign.justify TextAlign.justify TextAlign.justify TextAlign.justify',
  textAlign: TextAlign.justify,
  style: TextStyle(fontSize: 20, backgroundColor: Colors.tealAccent),
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextAlign.start TextAlign.start TextAlign.start TextAlign.start',
  textAlign: TextAlign.start,
  style: TextStyle(fontSize: 20, backgroundColor: Colors.blueGrey),
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextAlign.end TextAlign.end TextAlign.end TextAlign.end',
  textAlign: TextAlign.end,
  style: TextStyle(fontSize: 20, backgroundColor: Colors.white70),
),
Divider(height: 0.5, color: Colors.grey),

image.png

5. this.textDirection 文本方向

• TextDirection.ltr：文字方向从左到右
• TextDirection.ltr：文字方向从右到左

Text(
  'TextDirection.ltr TextDirection.ltrTextDirection.ltr  TextDirection.ltr',
  style: TextStyle(
      backgroundColor: Colors.green,
      fontSize: 20
  ),
  textDirection: TextDirection.ltr,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextDirection.rtl TextDirection.rtlTextDirection.rtl TextDirection.rtl',
  textDirection: TextDirection.rtl,
  style: TextStyle(
      fontSize: 20,
      backgroundColor:
      Colors.cyan
  ),
),
Divider(height: 0.5, color: Colors.grey),

image.png

6. locale 国际化

7. softWrap 是否允许换行显示 默认true false时不换行

8. overflow 文本的截断方式

• TextOverflow.ellipsis：多余文本截断后以省略符“...”表示
• TextOverflow.clip：剪切多余文本，多余文本不显示
• TextOverflow.fade：将多余的文本设为透明
• TextOverflow.visible： 多余的文本显示在容器之外

Text(
  'TextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clip',
  style: TextStyle(
      backgroundColor: Colors.green,
      fontSize: 20
  ),
  softWrap: false,
  overflow: TextOverflow.clip,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'TextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clip',
  style: TextStyle(
      backgroundColor: Colors.tealAccent,
      fontSize: 20
  ),
  softWrap: false,
  overflow: TextOverflow.fade,
),
Divider(height: 0.5, color: Colors.grey), Text(
  'TextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clip',
  style: TextStyle(
      backgroundColor: Colors.yellow,
      fontSize: 20
  ),
  softWrap: false,
  overflow: TextOverflow.ellipsis,
),
Divider(height: 0.5, color: Colors.grey), Text(
  'TextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clipTextOverflow.clip',
  style: TextStyle(
      backgroundColor: Colors.orange,
      fontSize: 20
  ),
  softWrap: false,
  overflow: TextOverflow.visible,
),
Divider(height: 0.5, color: Colors.grey),

image.png

最后一个应该是显示在容器之外的,因为我是全屏幕的所以效果不是很明显.

9. textScaleFactor 文字大小倍率系数

Text(
  'Flutter',
  style: TextStyle(
      backgroundColor: Colors.green,
  ),
  textScaleFactor: 1,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'Flutter',
  style: TextStyle(
    backgroundColor: Colors.green,
  ),
  textScaleFactor: 2,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'Flutter',
  style: TextStyle(
    backgroundColor: Colors.green,
  ),
  textScaleFactor: 3,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'Flutter',
  style: TextStyle(
    backgroundColor: Colors.green,
  ),
  textScaleFactor: 4,
),
Divider(height: 0.5, color: Colors.grey),

image.png

10. maxLines 文字显示的最大行数

11. textWidthBasis

/// {@macro flutter.painting.textPainter.textWidthBasis}
  final TextWidthBasis textWidthBasis;

/// The different ways of measuring the width of one or more lines of text.
///
/// See [Text.textWidthBasis], for example.
enum TextWidthBasis {
  /// multiline text will take up the full width given by the parent. For single
  /// line text, only the minimum amount of width needed to contain the text
  /// will be used. A common use case for this is a standard series of
  /// paragraphs. //段落
  parent,

  /// The width will be exactly enough to contain the longest line and no
  /// longer. A common use case for this is chat bubbles. //聊天气泡
  longestLine,
}

Text(
  'FlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutter',
  style: TextStyle(
      backgroundColor: Colors.green,
  ),
  textWidthBasis: TextWidthBasis.parent,
),
Divider(height: 0.5, color: Colors.grey),
Text(
  'FlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutterFlutter',
  style: TextStyle(
    backgroundColor: Colors.green,
  ),
  textWidthBasis: TextWidthBasis.longestLine,
),
Divider(height: 0.5, color: Colors.grey),