Flutter-Text的使用

关注 https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识

文本作为UI最基本的元素，最基本的用法有这些：

• 字体
• 文字大小、颜色
• 一些常用样式，比如倾斜，加粗，下划线，删除线等
• 文字超出边界之后如何显示
• 文字的单行，多行控制
• 文字的显示方向
• 富文本的显示
• 文字渐变，阴影
• 文本点击事件

字体

如果需要使用自定义字体，则需要在项目中的fonts文件夹下放置字体文件，然后在配置文件pubspec.yaml中进行配置：

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

使用字体主要有两种方式，一种是通过主题设置统一的字体，一种是为单独的Widget设置字体。

通过主题设置字体：

MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: MyHomePage(),
);

单独设置字体：

Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
);

文字大小，颜色，倾斜，加粗

这些样式也都是在TextStyle中设置的：

Text("style: color,fontWeight,fontSize,fontStyle",
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 28,
                fontStyle: FontStyle.italic,
              )),

其中fontSize使用的是逻辑像素，默认为14，FontWeight.bold表示加粗，当然还可以设置指定的值，fontStyle可以用来控制文本是否倾斜。

下划线/上划线，删除线，波浪线

下划线，删除线等属于文本装饰的一种，在TextStyle中通过decoration属性描述：

TextStyle(
                decoration: TextDecoration.underline,
                decorationColor: Colors.blueAccent,
                decorationStyle: TextDecorationStyle.solid),
          ),

效果如下：

text_underline

可以指定下划线的颜色，样式，比如线的实现，还是虚线，还是波浪线等;
对于这些装饰，还可以设置双下划线，点线等效果。

text_underline_double

文字超出边界如何显示

超出边界的显示有三种类型：

• 显示省略号
• 直接截断
• 渐隐

这几种显示样式都是通过overflow属性控制的：

ListTile(
          title: Text(
            "overflow: TextOverflow.ellipsis;overflow: TextOverflow.ellipsis;overflow: TextOverflow.ellipsis;",
            overflow: TextOverflow.ellipsis,
            softWrap: false,
          ),
        ),
        ListTile(
          title: Text(
            "overflow: TextOverflow.clip;overflow: TextOverflow.clip;overflow: TextOverflow.clip;",
            overflow: TextOverflow.clip,
            softWrap: false,
          ),
        ),
        ListTile(
          title: Text(
            "overflow: TextOverflow.fade,overflow: TextOverflow.fade,overflow: TextOverflow.fade,overflow: TextOverflow.fade,",
            overflow: TextOverflow.fade,
            softWrap: false,
          ),
        ),

文字的单行与多行显示

文本的多行显示，可以通过maxLines属性和softWrap属性控制，其中maxLines控制最大行数，softWrap控制是否自动换行。

Text(
            "softWrap: false;softWrap: false;softWrap: false;softWrap: false;softWrap: false;softWrap: false;",
            softWrap: false,
          )

Text(
            "softWrap: true;softWrap: true;softWrap: true;softWrap: true;softWrap: true;",
            softWrap: true,
          )

富文本

可以使用Text.rich/ RichText + TextSpan来显示富文本：

Text.rich(
            TextSpan(
              text: "plain text ",
              children: <TextSpan>[
                TextSpan(
                    text: "color", style: TextStyle(color: Colors.pinkAccent)),
                TextSpan(text: "fontSize", style: TextStyle(fontSize: 28)),
                TextSpan(
                    text: "decoration",
                    style: TextStyle(decoration: TextDecoration.lineThrough)),
              ],
            ),
          )

rich_text

RichText(
              text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                  text: "Text 1", style: TextStyle(color: Colors.blueAccent)),
              TextSpan(
                  text: "Text 2",
                  style: TextStyle(color: Colors.pinkAccent, fontSize: 28)),
            ],
          ))

rich_text_2

文字阴影

文字的阴影可以通过TextStyle中的shadows属性进行控制：

Text(
            "style: letterSpacing,shadows",
            style: TextStyle(
              shadows: <Shadow>[
                Shadow(color: Colors.pink, offset: Offset(1, 2))
              ],
            ),
          )

text_shadow

Text的点击事件

可以使用GestureDetector，也可以使用InkWell：

InkWell(
            child: Text(
              "Default Text",
            ),
            onTap: (){debugPrint("click");},
          )