二、Flutter經常使用組件-Text文本組件

1、新建Flutter項目

1. 打開Andorid Studio ，出現下面的界面，選擇第二項，新建Flutter項目。

2. 打開第二個窗口後，選擇第一個選項Flutter Application(flutter應用)，點擊Next。

3. 分別填入或選擇項目名稱、Flutter SDK安裝路徑、項目保存路徑與項目描述，而後點擊Next。

4. 設置包名，Finish。

5. 這步完成後，系統就會自動爲咱們建立一個Flutter項目。

2、Text Widget 文本組件的使用

開始以前必定先給本身一個暗示：Flutter一切皆組件。下面是使用了一個最簡單的Text組件來實現的HelloWold代碼。

import 'package:flutter/material.dart';

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

/*void main(){
  //runApp函數將根組件顯示在屏幕上
  runApp(MyApp());
}*/

/**
 * 根組件
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MaterialApp title",
      home: ScaffoldWidget(),
    );
  }
}

Scaffold的實現代碼：

/**
 * Scaffold
 */
class ScaffoldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold：是Material中主要的佈局組件
    return Scaffold(
      //appBar：在其Scaffold頂部顯示一個應用欄
      appBar: AppBar(
        title: Text("Scaffold AppBar"),
      ),
      //body：顯示主要內容,Center：使其子組件在中間位置
      body: Center(child: TextWidget()),
    );
  }
}

TextWidget實現代碼：

/**
 * Text組件
 */
class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Text組件
    return Text(
        "2019年10月1日是中華人民共和國成立70週年記念日。慶祝中華人民共和國成立70週年大會10月1日舉行，習主席將發表重要講話。慶祝大會後",
        //文本對齊方式
        textAlign: TextAlign.center,
        //最多顯示行數
        maxLines: 2,
        //超出文本處理方式
        overflow: TextOverflow.ellipsis,
        //文本風格
        style: TextStyle(
            //字體大小
            fontSize: 25.0,
            //字體顏色
            //color: Color.fromARGB(255, 255, 0, 0),
            color: Colors.red,
            //修飾器
            decoration: TextDecoration.underline,
            //修飾風格
            decorationStyle: TextDecorationStyle.dashed));
  }
}

實現效果以下圖：

其中用到的經常使用屬性包括TextAlign、maxLines、overflow與style。

• TextAlign屬性，文本的對齊方式，它的屬性值有以下幾個：
  • center：文本以居中形式對齊（默認）。
  • left與right：左(右)對齊，常用，讓文本居左(右)進行對齊。
  • start與end：以文本開始(結束)位置進行對齊，相似於左(右)對齊。
• maxLines屬性，設置最多顯示的行數。
• overflow屬性是用來設置文本溢出時，如何處理,有下面幾個經常使用的值：
  • clip：直接切斷，剩下的文字就沒有了（默認）。
  • ellipsis：在後邊顯示省略號。
  • fade：溢出的部分會進行一個漸變消失的效果。
• style裏屬性的內容比較多，這裏是設置了：字體大小爲25.0,顏色爲紅色,而且有一個下劃線，下劃線效果爲虛線。
  • fontSize：字體大小。
  • color：字體顏色。
  • decoration：怎麼修飾。
  • decorationStyle：修飾的風格。