Flutter常用组件-Text文本组件

一、新建Flutter项目

1. 打开Andorid Studio ，出现下面的界面，选择第二项，新建Flutter项目。

2.打开第二个窗口后，选择第一个选项Flutter Application(flutter应用)，点击Next。

3.分别填入或选择项目名称、Flutter SDK安装路径、项目保存路径与项目描述，然后点击Next。

4.设置包名，Finish。

5.这步完成后，系统就会自动为我们创建一个Flutter项目。

二、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属性，文本的对齐方式，它的属性值有如下几个：

1. center：文本以居中形式对齐（默认）。

2. left与right：左(右)对齐，经常使用，让文本居左(右)进行对齐。

3. start与end：以文本开始(结束)位置进行对齐，类似于左(右)对齐。

• maxLines属性，设置最多显示的行数。

• overflow属性是用来设置文本溢出时，如何处理,有下面几个常用的值：

1. clip：直接切断，剩下的文字就没有了（默认）。

2. ellipsis：在后边显示省略号。

3. fade：溢出的部分会进行一个渐变消失的效果。

• style里属性的内容比较多，这里是设置了：字体大小为25.0,颜色为红色,并且有一个下划线，下划线效果为虚线。

1. fontSize：字体大小。

2. color：字体颜色。

3. decoration：怎么修饰。

4. decorationStyle：修饰的风格。