【Flutter學習】基本組件之文本組件Text

一，概述　　

　　文本組件（Text）負責顯示文本和定義顯示樣式，

二，繼承關系

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text

三，構造方法

• 單一格式（Text( )）
  
  • 構造方法創建，只能生成一種style
    
    • Text()
      

      const Text(this.data, {
          Key key,
          this.style,
          this.textAlign,
          this.textDirection,
          this.locale,
          this.softWrap,
          this.overflow,
          this.textScaleFactor,
          this.maxLines,
          this.semanticsLabel,
        }) : assert(data != null), textSpan = null, super(key: key);

• 父文本格式(Text.rich( ) && new RichText( ) )
  
  • 靜態方法創建，能夠生成多種style。textSpan 則是可以得TextSpan，最大的用處在於處理多種類型和顯示效果的文字，以及各自點擊事件的處理。
    
    • Text.rich( )
      

      const Text.rich(this.textSpan, {
          Key key,
          this.style,
          this.textAlign,
          this.textDirection,
          this.locale,
          this.softWrap,
          this.overflow,
          this.textScaleFactor,
          this.maxLines,
          this.semanticsLabel,
        }): assert(textSpan != null), data = null, super(key: key);

    • new RichText( )
      

      const RichText({
          Key key,
          @required this.text,
          this.textAlign = TextAlign.start,
          this.textDirection,
          this.softWrap = true,
          this.overflow = TextOverflow.clip,
          this.textScaleFactor = 1.0,
          this.maxLines,
          this.locale,
        }) : assert(text != null) ,assert(textAlign != null), assert(softWrap != null), assert(overflow != null),
             assert(textScaleFactor != null), assert(maxLines == null || maxLines > 0), super(key: key);

四，參數講解 

• String data ： 必填參數，要顯示的字符串
• TextStyle style ：可選參數， 文本樣式
  
  

• TextAlign textAlign  可選參數  文本水平對齊類型（枚舉）
  
  

•  TextDirection textDirection  可選參數 
  

  這個屬性估計是給外國人習慣使用，
  
  相對TextAlign中的start、end而言有用（當start使用了ltr相當於end使用了rtl，也相當於TextAlign使用了left）
  
  對於從左到右的文本（TextDirection.ltr），文本從左向右流動；
  對於從右到左的文本（TextDirection.rtl），文本從右向左流動。

• Locale locale 可選參數（此屬性很少設置，用於選擇區域特定字形的語言環境）
  
  
• bool softWrap 可選參數  是否需要換行
  

  某一行中文本過長，是否需要換行。默認為true，如果為false，則文本中的字形將被定位為好像存在無限的水平空間。

• TextOverflow overflow 可選參數  處理視覺溢出

  * TextOverflow.clip       剪切溢出的文本以修復其容器。

  * TextOverflow.ellipsis  使用省略號表示文本已溢出。

  * TextOverflow.fade     將溢出的文本淡化為透明。

• double  textScaleFactor 可選參數  每個邏輯像素的字體像素數

  例如，如果文本比例因子為1.5，則文本將比指定的字體大小大50％。
  作為textScaleFactor賦予構造函數的值。如果為null，將使用從環境MediaQuery獲取的MediaQueryData.textScaleFactor 即手機的像素密度（1.0、1.5、2.0、3.0）

• int maxLines 可選參宿  文本要跨越的可選最大行數,

  為1，則文本不會換行。否則，文本將被包裹在框的邊緣。

• String semanticsLabel 圖像的語義描述，用於向Andoid上的TalkBack和iOS上的VoiceOver提供圖像描述

  talkback是一款由谷歌官方開發的系統軟件,它的定位是幫助盲人或者視力有障礙的用戶提供語言輔助

  Voiceover功能是APPLE公司在2009年4月新推出的一種語音輔助程序

五，示例demo　　

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text文本組件',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new CenterDemoPage() ,
    );
  }
}

class CenterDemoPage extends StatefulWidget{
   @override
   createState() => new CenterDemoPageState();
}

class CenterDemoPageState extends State<CenterDemoPage>{
   @override
   Widget build(BuildContext context) {
    return new Scaffold(
       appBar: new AppBar(
         title: new Text('Container Widget Demo'),
       ),
       body:_buildDemo() ,
    );
  }

  Widget _buildDemo(){
    return new Center(
     child: new Text(
       '我是一段測試文本Hello World!我是一段測試文本 Hello World!我是一段測試文本 Hello World!我是一段測試文本 Hello World!我是一段測試文本 Hello World!',
      /**
       * 文字對齊方式，可選值有如下五個：
       *  TextAlign.center: 文本居中對齊
       *  TextAlign.left: 文本左對齊
       *  TextAlign.right: 文本右對齊
       *  TextAlign.start: 文本開始位置對齊，類似左對齊
       *  TextAlign.end: 文本結束位置對齊，類似右對齊
       *  TextAlign.justify: 文本兩端對齊
       */
      textAlign: TextAlign.justify,
      /**
       * 文字方向，即文字從那邊開始顯示，該屬性必須設置，可選值有如下兩個：
       * TextDirection.ltr：left to right，文本從左邊開始顯示
       * TextDirection.rtl：right to left，文本從左邊開始顯示，textAlign 為 TextAlign.start 時再設置該值，相當於又把 textAlign 設置為 TextAlign.end。
       * textAlign 為 TextAlign.end 時再設置該值，相當於又把 textAlign 設置為 TextAlign.start
       */
      textDirection: TextDirection.ltr,
      /**
       * 文字最多顯示行數，值為 int 型
       */
      maxLines: 3,
      /**
       * 當文本內容超過最大行數時，剩余內容的顯示方式，相當於Android 的 ellipsize 屬性，可選值有如下三個：
       * TextOverflow.clip：直接切斷，剩下的文字就沒有了
       * TextOverflow.ellipsis：ellipsis:在后邊顯示省略號
       * TextOverflow.fade: 溢出的部分會進行一個漸變消失的效果，softWrap 屬性為 false 時才會有效果
       */
      overflow: TextOverflow.clip,
      /*
       * 是否自動換行，值為 boolean 型：
       * true：文本內容超過一行后可以換行顯示，
       * 當沒有設置 maxLines 屬性且 overflow 為 TextOverflow.ellipsis 失效，顯示單行且文本超出的部分顯示為省略號。
       * false：文本內容超過一行后不可以換行顯示，即只能單行顯示，超出的部分默認切斷處理，如果設置了 overflow 屬性則按照 overflow 屬性值處理。
       * 當設置了 maxLines 屬性且 overflow 為 TextOverflow.ellipsis 失效，即可以換行，最大行數為 maxLines 屬性的值。 
       */
      softWrap:true ,
      /*
       * 文本字體縮放倍數，值為 double 型
       */
      textScaleFactor: 1.2,
      /**
       * 感覺是設置文本所屬區域，可能跟字體有關，這個屬性還沒有看到效果。
       */
      locale: new Locale(''),
      /**
       * 感覺是為該 Text 組件設置標簽，這個屬性還沒有看到效果。
       */
      semanticsLabel: Locale.fromSubtags('1'),
      /** 
       * 文本樣式
       */
      style: new TextStyle(
        //背景顏色，但是這樣設置背景有些文本顯示貌似會有點問題，值為一個 Paint 對象
              //background: backgroundPaint,
              //文字顏色，值為一個 Color 對象
              color: new Color(0xFF000000),
              /**
               * 添加裝飾物，可選值有：
               * TextDecoration.none：無，默認
               * TextDecoration.overline：上划線
               * TextDecoration.lineThrough：刪除線
               * TextDecoration.underline：下划線
               * 也可以調用 TextDecoration.combine() 方法傳入一個集合設置多個裝飾 
               */
              decoration: TextDecoration.underline,
              //設置裝飾物的顏色，值為一個 Color 對象
              decorationColor: new Color(0xFF00FFFF),
              /**
               * 設置裝飾物的樣式，可選值有：
               * TextDecorationStyle.dashed：裝飾線為虛線
               * TextDecorationStyle.dotted ：裝飾線為點構成的線
               * TextDecorationStyle.double ：裝飾線為兩根線
               * TextDecorationStyle.solid ：裝飾線為實心線
               * TextDecorationStyle.wavy ：裝飾線為波浪線
               * 也可以 TextDecorationStyle.values() 方法傳入一個集合設置多種樣式 
               */
              decorationStyle: TextDecorationStyle.dashed,
              //自定義字體的名字，搭配 package 屬性使用
              //fontFamily: ,
              //自定義字體的路徑
              //package: ,
              //字體大小，值為 double 類型
              fontSize: 20.0,
              /*
               * 字體樣式，可選值有：
               * FontStyle.italic：斜體
               * FontStyle.normal：正常   
               */
              fontStyle: FontStyle.italic,
              //字體字重，常用值有 FontWeight.bold（加粗）
              fontWeight: FontWeight.bold,
              /**
               * 貌似文檔中的意思是是否使用父類的樣式來替換空值（沒有設置的值）
               * 如果為 true 則使用父類的樣式來替換控制
               * 如果為 false，則恢復成默認值，白色 10px，字體為 sans-serif 
               */
              inherit: false,
              //字間距，值為 double 類型
              letterSpacing: 2.0,
              /**
               * 感覺是設置文字所屬區域，可能跟字體有關
               * locale
               * 文字陰影，值為一個 Shadow 集合 
               */
              shadows: shadowList,
              /**
               * 文本基線，這個不太理解，感覺用到的情況應該也不多，可選值有兩個
               * TextBaseline.ideographic：用於對齊字母字符的字形底部的水平線
               * TextBaseline.alphabetic：用於對齊表意字符的水平線
               * 也可以 TextBaseline.values() 方法傳入一個集合設置多個基線 
               */
              textBaseline: TextBaseline.ideographic,
              //字體間距，值為 double 類型，應該是用空格隔開時就認為一個單詞，英文容易理解，如 Hello World 就是兩個單詞，中文的詞不用空格隔開，所以文本內容為中文時使用較少
              wordSpacing: 10.0,
              //行高，值為 double 類型，最終是該屬性的值乘以 fontSize 作為行高，所以該值更像是一個行高系數
              height: 2.0),
      ),
     ),
    );
  }
}

六，官方文檔

官網地址