image.png

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

語雀地址

class Text extends StatelessWidget {  //靜態(tài)的 widget
  const Text(
    this.data, {
    Key key,
    this.style,         //字體樣式 字體大小、字體顏色.....
    this.strutStyle,    //使用的支撐風(fēng)格
    this.textAlign,     //對齊方式
    this.textDirection, //文本方向
    this.locale,        //國際化
    this.softWrap,      //是否允許換行顯示 默認(rèn)true false時不換行
    this.overflow,      //文本的截斷方式
    this.textScaleFactor, //代表文本相對于當(dāng)前字體大小的縮放因子 默認(rèn)值為1.0
    this.maxLines,      //文字顯示的最大行數(shù)
    this.semanticsLabel,//給文本加上一個語義標(biāo)簽 沒有實際用處
    this.textWidthBasis,//設(shè)置一段文字寬度的顯示基礎(chǔ)
  })

1. Text 的必選參數(shù)：data

Text 的內(nèi)容 data 是必選參數(shù)。其他都為可選參數(shù)

Text(
  'Text Demo'
),

2. this.style 字體樣式、字體大小、字體顏色

TextStyle 的構(gòu)造參數(shù)：

class TextStyle extends Diagnosticable {
  
  const TextStyle({
    this.inherit = true,  //是否繼承父 Text 的樣式，默認(rèn)為 true
如果為false，且樣式?jīng)]有設(shè)置具體的值，則采用默認(rèn)值：白色、字體大小 10px、sans-serif 字體
    this.color,           //字體顏色
    this.backgroundColor, //字體背景色
    this.fontSize,        //字體大小 
    this.fontWeight,      //字體粗細(xì)
    this.fontStyle,       //是否在字體中傾斜字形
    this.letterSpacing,   //字母之間的間距
    this.wordSpacing,     //單詞之間的間隔
    this.textBaseline,    //用于對齊文本的水平線
    this.height,          //文本的高度.但它并不是一個絕對值，而是一個因子，具體的行高等于fontSize*height。
    this.locale,          //用于選擇用戶語言和格式設(shè)置首選項的標(biāo)識符
    this.foreground,      //文本的前景色
    this.background,      //文本的背景色
    this.shadows,         //在文本下方繪制陰影
    this.fontFeatures,    //字體特征.是個數(shù)組
    this.decoration,      //文本的線條
    this.decorationColor, //線條的顏色
    this.decorationStyle, //線條的樣式
    this.decorationThickness, //線條的密度,值越大線條越粗
    this.debugLabel,      //文本樣式的描述,無實際用處
    String fontFamily,    //用于設(shè)置使用哪種自定義字體
    List<String> fontFamilyFallback, //字體列表，當(dāng)前面的字體找不到時，會在這個列表里依次查找
    String package,       //用于設(shè)置使用哪種自定義字體
  }) : 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 字體粗細(xì)

  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, //默認(rèn)不傾斜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 文本的高度

行高系數(shù),實際行高 = 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,
            //偏移量 默認(rèn) 0,0 （x軸 和  y軸）x 正數(shù)偏右,負(fù)數(shù)偏左.    y 正數(shù)向下偏移,負(fù)數(shù)向上偏移
            offset: Offset(1,2),
            //模糊半徑,默認(rèn)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軸正數(shù), 向右偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是問題，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(-5,0),//y軸不變 x軸負(fù)數(shù), 向左偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是問題，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(0,5), //x軸不變。 y軸為正數(shù),向下偏移
            blurRadius: 3,
        )]
  ),
),

image.png

Text(
  '想都是問題，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(0,-5), //x軸不變。 y軸為負(fù)數(shù)數(shù),向上偏移
            blurRadius: 3,
        )]
  ),
),

image.png

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

image.png

Text(
  '想都是問題，做才有答案!',
  style: TextStyle(
      color: Colors.blue,
      fontSize: 30,
      shadows: <Shadow>[
        Shadow(
            color: Colors.deepOrange,
            offset: Offset(-5,-5), //都是負(fù)數(shù) 左上角偏移
            blurRadius: 3,
        )]
  ),
),

image.png

其他情況也一樣,就是 x,y軸....

fontFeatures 字體特征.是個數(shù)組

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 使用的支撐風(fēng)格

const StrutStyle({
    String fontFamily,     //用于設(shè)置使用哪種自定義字體
    List<String> fontFamilyFallback,  //字體列表，當(dāng)前面的字體找不到時，會在這個列表里依次查找
    this.fontSize, //字體的像素大小 默認(rèn)14像素
    this.height,   //行高系數(shù),實際行高 = height * fontSize
    this.leading,  //行與行直接的頭部額外間距  = leading * fontSize
    this.fontWeight, //字體粗細(xì),(設(shè)置沒效果...)
    this.fontStyle,  
    this.forceStrutHeight,
    this.debugLabel,
    String package,
  ....
}

4. this.textAlign 對齊方式

• TextAlign.left 左對齊
• TextAlign.right 右對齊
• TextAlign.center 居中
• TextAlign.justify 自適應(yīng) 兩端對齊
• 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 是否允許換行顯示 默認(rèn)true false時不換行

8. overflow 文本的截斷方式

• TextOverflow.ellipsis：多余文本截斷后以省略符“...”表示
• TextOverflow.clip：剪切多余文本，多余文本不顯示
• TextOverflow.fade：將多余的文本設(shè)為透明
• 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

最后一個應(yīng)該是顯示在容器之外的,因為我是全屏幕的所以效果不是很明顯.

9. textScaleFactor 文字大小倍率系數(shù)

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 文字顯示的最大行數(shù)

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),