Flutter常用組件（Widget）解析-Text

單一格式的文本。

文本組件是以字符串形式顯示的單一格式，這個文本字符串可以是多行顯示也可以是單獨一行顯示，主要取決於你的布局限制。

這樣式內容是可選擇的，如果你省略了，則會使用文本的默認樣式來顯示。如果給定的style的文本繼承屬性是true，即默認的，則這些給定的樣式會與那些默認的文本樣式合並。這種合並的屬性非常有用，比如，讓文字粗體顯示，我們可以使用默認的字體和大小。

child: new Text( 'Hello,  How are you?', textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ),

我們也可以使用富文本編輯器，讓一段文本通過使用不同的TextSpan顯示不同的樣式。比如我們讓"Hello beautiful world"的每個單詞都顯示不同的樣式：

const Text.rich( TextSpan( text: 'Hello', // default text style
    children: <TextSpan>[ TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic，fontSize: 48.0)),//斜體 TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 36.0)),//粗體 ], ), )

當我們對一個文本的行數有要求時，就需要用到maxLines屬性了：

 child: new Text( 'Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?', textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold,fontSize: 48.0), maxLines: 2, ),

 1、textAlign

文本對齊方式

• center: 文本以居中形式對齊。
• left:左對齊，經常使用，讓文本居左進行對齊，效果和start一樣。
• right :右對齊。
• start:以開始位置進行對齊，類似於左對齊。
• end: 以為本結尾處進行對齊，不常用。有點類似右對齊。

2、maxLines

設置最多顯示的行數。用法： maxLines: int整數 

3、overflow

這個屬性是用來設置溢出文本的樣式，通常與maxLines配合一起使用。有以下幾個屬性值：

• clip 超出文本框范圍內的文字直接切斷。顯得很生硬，沒有過度，不友好
• ellipsis 使用省略號來顯示溢出的文本，用的比較多的一種效果
• fade 對超出文本內容的部分會有一個漸變消失的效果，這個不是左右漸變的效果，而是下面部分漸變的效果。可以看例子：

　　　　　'Hello, How are you? I am fine. Thank you', textAlign: TextAlign.center, overflow: TextOverflow.fade, style: TextStyle(fontWeight: FontWeight.bold,fontSize: 48.0), maxLines: 1,

 

 

可以從上圖看到，文本下面部分是有陰影效果的。

4、style

style屬性的內容算是比較多的，通常就是我們對文字樣式的設置

Bold

粗體顯示

Text( 'Hello, How are you? I am fine. Thank you', 
　style: TextStyle(fontWeight: FontWeight.bold),
 )

 

Italics

斜體顯示

child: Text( 'Hello, How are you? I am fine. Thank you', style: TextStyle(fontStyle: FontStyle.italic), ),

 

Opacity和Color

透明度和字體顏色

child: Text( 'Hello, How are you? I am fine. Thank you', style: TextStyle(color: Colors.red),//紅色字體 ),

child: Text( 'Hello, How are you? I am fine. Thank you', style: TextStyle(color: Colors.red.withOpacity(0.5)),//透明度50%的紅色字體 ),

Size

字體大小

child: Text( 'Hello, How are you? I am fine. Thank you', style: TextStyle(color: Colors.red.withOpacity(0.5),fontSize: 48.0), ),

 

Line height

行高

child: Text( 'Hello, How are you? I am fine. Thank you', style: TextStyle(color: Colors.red.withOpacity(0.5),fontSize: 48.0,height: 5.0), ),

 

5、以上就是比較常用的文本組件的屬性，更多更詳細的可以參考網址：一鍵送達