Flutter（7）：基础组件之Text

Flutter教学目录持续更新中

github源代码持续更新中

1.Text介绍

文本显示

2.创建Text

• Text() 构造方法创建，只能生成一种style
• Text.rich() 静态方法创建，能够生成多种style

3.Text属性

• textDirection 文本对齐
  TextAlign.center 将文本对齐容器的中心。
  TextAlign.end 对齐容器后缘上的文本。
  TextAlign.justify 拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
  TextAlign.left 对齐容器左边缘的文本。
  TextAlign.right 对齐容器右边缘的文本。
  TextAlign.start 对齐容器前缘上的文本。
• maxLines 最大行数
• overflow 处理字数溢出
  TextOverflow.clip 剪切溢出的文本以修复其容器。
  TextOverflow.ellipsis 使用省略号表示文本已溢出。
  TextOverflow.fade 将溢出的文本淡化为透明。
• textScaleFactor 字号系数

4.TextStyle style 属性

• color 文本颜色。
• decoration 绘制文本装饰:
  下划线（TextDecoration.underline）
  上划线（TextDecoration.overline）
  删除线（TextDecoration.lineThrough）
  无（TextDecoration.none）
• decorationColor 绘制文本装饰的颜色
• decorationStyle 绘制文本装饰的样式:
  画一条虚线 TextDecorationStyle.dashed
  画一条虚线 TextDecorationStyle.dotted
  画两条线 TextDecorationStyle.double
  画一条实线 TextDecorationStyle.solid
  画一条正弦线(波浪线) TextDecorationStyle.wavy
• fontWeight 绘制文本时使用的字体粗细:
  FontWeight.bold 常用的字体重量比正常重。即w700
  FontWeight.normal 默认字体粗细。即w400
  FontWeight.w100 薄，最薄
  FontWeight.w200 特轻
  FontWeight.w300 轻
  FontWeight.w400 正常/普通/平原
  FontWeight.w500 较粗
  FontWeight.w600 半粗体
  FontWeight.w700 加粗
  FontWeight.w800 特粗
  FontWeight.w900 最粗
• fontStyle 字体变体：
  FontStyle.italic 使用斜体
  FontStyle.normal 使用直立
• textBaseline 对齐文本的水平线:
  TextBaseline.alphabetic：文本基线是标准的字母基线
  TextBaseline.ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
• fontFamily 使用的字体名称（例如，Roboto）。如果字体是在包中定义的，那么它将以'packages/package_name/'为前缀（例如'packages/cool_fonts/Roboto'）
• fontSize 字体大小
• letterSpacing 水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
• wordSpacing 单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。
• height 文本行与行的高度，作为字体大小的倍数
• locale 用于选择区域特定字形的语言环境
• background 文本背景色
• foreground 文本的前景色
• shadows 实现一些特殊效果

4.Text显示单一格式文本

1600583389(1).png

final content = "这是一个flutter入门教学app";
Container(
            color: Colors.grey,
            margin: EdgeInsets.only(top: 10),
            padding: EdgeInsets.all(10),
            child: Text(
              '内容：$content$content$content$content$content$content$content$content',
              textAlign: TextAlign.start,
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
              textScaleFactor: 1.0,
              style: TextStyle(
//                backgroundColor: Colors.blue,
                fontSize: 16,
                fontWeight: FontWeight.bold,
                decorationColor: Colors.black,
                decoration: TextDecoration.lineThrough,
                decorationStyle: TextDecorationStyle.double,
                wordSpacing: 1.0,
                letterSpacing: 0.2,
                height: 1.5,
                textBaseline: TextBaseline.ideographic,
                shadows: [
                  Shadow(
                      blurRadius: 10,
                      offset: Offset(0.5, 0.5),
                      color: Colors.blue)
                ],
              ),
            ),
          ),

5.显示多格式的文本

Text.rich支持显示多种style的文本，需要配合TextSpan使用，同时还可以对文字添加点击等事件响应

1600584138(1).png

Container(
            color: Colors.grey,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(top: 10),
            child: Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                    text: '内容：',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        ToastUtil.showToast('内容：');
                      },
                  ),
                  TextSpan(
                    text: content,
                    style: TextStyle(color: Colors.blue, fontSize: 14),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        print(content);
                        ToastUtil.showToast(content);
                      },
                  )
                ],
              ),
            ),
          ),

下一节我们学习基础组件之Icon

Flutter（8）：基础组件之Icon

Flutter教学目录持续更新中

github源代码持续更新中