Flutter文本组件-Text

Flutter文本组件之Text使用

Text是显示文本的组件，最常用的组件之一。基本用法如下：

注意：Text组件一定要包裹在Scaffold组件下（也有其他方式，对初学者建议使用此方式）

Text(
      "你好，flutter",
      /*
        设置对齐方式:
        textAlign只是控制水平方向的对齐方式，值说明如下：
        left：左对齐
        right：右对齐
        center：居中
        justify：两端对齐，此属性中文存在bug（Flutter版本：1.17.3）也可以在官方issue中关注此问题
        start：前端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则左对齐，设置TextDirection.rtl则右对齐。
        end：末端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则右对齐，设置TextDirection.rtl则左对齐。
      */
      textAlign: TextAlign.center,
      // 设置自动换行
      softWrap: true,
      /*
        文本超出范围时的处理:
        clip：直接裁剪。
        fade：越来越透明。
        ellipsis：省略号结尾。
        visible：依然显示，此时将会溢出父组件
      */
      overflow: TextOverflow.ellipsis,
      // 最多显示行数
      maxLines: 2,
      style: TextStyle(
          // 设置字体颜色
          color: Colors.red.withOpacity(1.0),
          // 设置文字字号
          fontSize: 20,
          // 设置字体粗细(字体粗细共有9个级别，为w100至w900，FontWeight.bold是w700)
          fontWeight: FontWeight.bold,
          // 设置背景颜色
          backgroundColor: Colors.lightGreenAccent,
          // 设置斜体
          fontStyle: FontStyle.italic,
          // 字符间距
          letterSpacing: 2,
          // 字间距
          wordSpacing: 2,
          // 行高
          height: 1,
          // 装饰线（lineThrough删除线，underline下划线）
          decoration: TextDecoration.underline,
          // 装饰线的颜色
          decorationColor: Colors.yellow,
          // 装饰线的样式（dashed虚线）
          decorationStyle: TextDecorationStyle.dashed,
          // 字体阴影
          shadows: const <Shadow>[
            Shadow(
                offset: Offset(10.0, 10.0),
                blurRadius: 3.0,
                color: Colors.black),
            Shadow(
                offset: Offset(10.0, 10.0),
                blurRadius: 5.0,
                color: Colors.black)
          ]),
    );

设置自定义的字体：

1. 首先下载字体库（比如中华字体库）
2. 将字体文件拷贝的项目中，一般目录是：assets/fonts/，assets和fonts都需要手动创建，此目录不是必须的，而是约定俗成，资源一般都放在assets目录下。
3. 配置pubspec.yaml：

fonts:
  - family: maobi 
    fonts:
      - asset: assets/fonts/maobi.ttf

maobi：是自己对当前字体的命名，有意义即可。

asset：字体文件的目录。

Text('你好，flutter', style: TextStyle(fontFamily: 'maobi',))

设置全局字体样式：

在MaterialApp的theme中设置如下

MaterialApp(
  title: 'Flutter Learn',
  theme: ThemeData(
    textTheme: TextTheme(
        bodyText2: TextStyle(color: Colors.red,fontSize: 24),
    )
  ),
  home: Scaffold(
    body: TextDemo(),
  ),
)