Flutter 基础widget Text

Flutter 基础widget Text_第1张图片
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 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),
  ),
Flutter 基础widget Text_第2张图片
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,
    ),
  ),
Flutter 基础widget Text_第3张图片
image.png

fontStyle 是否在字体中倾斜字形

Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontStyle: FontStyle.italic, //默认不倾斜normal
  ),
),
Flutter 基础widget Text_第4张图片
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,),
  ),
Flutter 基础widget Text_第5张图片
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,),
),
Flutter 基础widget Text_第6张图片
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),
),
Flutter 基础widget Text_第7张图片
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,),
Flutter 基础widget Text_第8张图片
image.png

foreground 文本的前景色

background 文本的背景色

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

shadows 阴影

Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            //颜色
            color: Colors.deepOrange,
            //偏移量 默认 0,0 (x轴 和  y轴)x 正数偏右,负数偏左.    y 正数向下偏移,负数向上偏移
            offset: Offset(1,2),
            //模糊半径,默认0 
            blurRadius: 5,
        )]
  ),
),
Flutter 基础widget Text_第9张图片
image.png

x轴偏移

Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(5,0),//y轴不变 x轴正数, 向右偏移
            blurRadius: 3,
        )]
  ),
),
Flutter 基础widget Text_第10张图片
image.png
Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(-5,0),//y轴不变 x轴负数, 向左偏移
            blurRadius: 3,
        )]
  ),
),
Flutter 基础widget Text_第11张图片
image.png
Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(0,5), //x轴不变。 y轴为正数,向下偏移
            blurRadius: 3,
        )]
  ),
),
Flutter 基础widget Text_第12张图片
image.png
Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(0,-5), //x轴不变。 y轴为负数数,向上偏移
            blurRadius: 3,
        )]
  ),
),
Flutter 基础widget Text_第13张图片
image.png
Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(5,5), //都为正数  , 向右下角偏移
            blurRadius: 3,
        )]
  ),
),
Flutter 基础widget Text_第14张图片
image.png
Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: [
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(-5,-5), //都是负数 左上角偏移
            blurRadius: 3,
        )]
  ),
),
Flutter 基础widget Text_第15张图片
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, //下划线
  ),
),
Flutter 基础widget Text_第16张图片
image.png

decorationColor 线条的颜色

给删除下增加颜色

 Text(
  '想都是问题,做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 20,
      decoration: TextDecoration.lineThrough,
    decorationColor: Colors.deepOrange
  ),
),
Flutter 基础widget Text_第17张图片
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
    ),
  ),
Flutter 基础widget Text_第18张图片
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
    ),
  ),
Flutter 基础widget Text_第19张图片
image.png

3. strutStyle 使用的支撑风格

const StrutStyle({
    String fontFamily,     //用于设置使用哪种自定义字体
    List 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),
Flutter 基础widget Text_第20张图片
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),
Flutter 基础widget Text_第21张图片
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),
Flutter 基础widget Text_第22张图片
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),
Flutter 基础widget Text_第23张图片
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),

你可能感兴趣的:(Flutter 基础widget Text)