关于flutter:Flutter-116Flutter手把手教程UI布局和Widget文本和样式-Text-Widget

8次阅读

共计 3848 个字符，预计需要花费 10 分钟才能阅读完成。

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

咱们先来看 Text 的构造函数都有哪些参数：

const Text( 
    this.data, { 
    //data 就是咱们须要展现的文字 是字符串类型，这个是必传字段，其余的都是可选
    Key key,    
    //widget 的标识
    this.style, 
    // 文本款式，类型是 TextStyle
    this.strutStyle, 
    // 用来设置最小行高的参数
    this.textAlign, 
    // 文本的对齐形式，类型是 TextAlign
    this.textDirection, 
    // 文字方向，类型是 TextDirection
    this.locale, 
    // 抉择用户语言和格局的标识符，类型是 Locale，次要用于国际化
    this.softWrap, 
    //bool 类型，false 标识文本只有一行，程度方向有限
    this.overflow, 
    // 超出显示区域后的展现形式，类型是 TextOverflow
    this.textScaleFactor,
    //double 类型 示意文本绝对于以后字体的缩放系数，默认为 1.0
    this.maxLines,
    // int 类型，显示的最大行数
    this.semanticsLabel, 
    //String 类型，给文本加上一个语义标签
    this.textWidthBasis,
    // 一行或多行文本宽度的不同形式，类型是 TextWidthBasis
  })

Text咱们重点介绍上面几个参数:data、style、textAlign、maxLines、overflow。
1. 最简略的示例

  Text("Fulade");

2. 放大和放大

Text("文字放大 1.5 倍",textScaleFactor: 1.5);

textScaleFactor是缩放参数，默认是1.0，设置小于 1 的参数是放大，设置大概 1 的参数是放大。
3. 居中、居左和居右

Text(
  "居右显示" * 10,
  textAlign: TextAlign.right,
);

textAlign是地位参数，常见的枚举值有 TextAlign.right、TextAlign.left 和TextAlign.center。
4. 单行显示

Text(
  "最多一行显示超过局部显示..." * 10,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

maxLines示意文字须要几行来显示，如果超过了要显示的行数，文字会被切断。应用 overflow 来设置切断文字的款式，overflow有以下几个枚举值：

enum TextOverflow {
  clip,      // 间接裁剪。fade,      // 突变淡出
  ellipsis,  // 以省略号的形式
  visible,   // 仍然显示，此时将会溢出父组件
}

如果咱们不设置maxLines，文字默认会换行，以全副都展现的形式来显示。

以上四种款式成果如下：

如果想要设置更简单的文字款式，咱们须要传入 Text 的style参数，style参数接管一个 TextStyle的对象，TextStyle能够帮忙咱们做很多事件。

5. 粗体

Text(
  "粗体",
  style: TextStyle(fontWeight: FontWeight.bold),
)

fontWeight用来设置粗体。FontWeight.bold默认是w700。
6. 色彩

Text(
  "红色",
  style: TextStyle(color: Colors.red),
)

color参数用来设置色彩。
7. 字号

Text(
  "字号 20",
  style: TextStyle(fontSize: 20),
)

fontSize用来设置字号。
8. 斜体

Text(
  "斜体",
  style: TextStyle(fontStyle: FontStyle.italic),
)

fontStyle能够用来设置斜体，FontStyle.italic示意斜体，默认是FontStyle.normal。

9. 背景色彩

Text(
  "背景色彩红色",
  style: TextStyle(background: Paint()..color = Colors.red,
      color: Colors.blue),
)

background用来设置背景色彩，它接管一个 Paint 对象作为参数，Paint对象能够设置 color 属性。
10. 删除线

Text(
  "删除线",
  style: TextStyle(
      decoration: TextDecoration.lineThrough,
      decorationColor: Colors.red),
)

decorationColor参数是设置删除线的色彩，TextDecoration.lineThrough是删除线的款式。
11. 下划线

Text(
  "下划线",
  style: TextStyle(decoration: TextDecoration.underline,),
);

下划线的设置跟 删除线 的设置根本一样，只是枚举值不同，下划线应用的是 TextDecoration.underline 枚举。

以上几种款式展现成果如下：

Flutter 反对在一行文字外面显示不同色彩的文字，这里咱们须要用到 RichText 和 TextSpan。

12. 多彩文字

RichText(
  text: TextSpan(
    textAlign: TextAlign.center,
    text: "多彩文字：",
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(text: "红色、", style: TextStyle(color: Colors.red)),
      TextSpan(text: "蓝色、", style: TextStyle(color: Colors.blue)),
      TextSpan(text: "绿色", style: TextStyle(color: Colors.green)),
    ],
  ),
);

TextSpan的参数 children，能够是一个TextSpan 对象的数组，这就比拟有意思。每一个 TextSpan 都能够设置色彩和字体，这样咱们就能够组合成一个多彩的文字构造。同样 RichText 也有 textAlign 参数，它是整个文字的地位参数。

13. 给文字增加点击事件

RichText(
  text: TextSpan(
    text: "增加了手势的文字:",
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: "点击会输入 Log",
        style: TextStyle(color: Colors.blue),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            tapCount++;
            print("taped taped" + tapCount.toString());
          },
      ),
    ],
  ),
);

TextSpan能够给相应的文字增加手势，这样就能够满足咱们点击某个文字触发事件的需要，这在日常开发中十分无效。咱们就不须要搞一些 ” 文字 + 按钮 + 文字 +…” 的这种组合了。
TextSpan的参数 recognizer 能够接管一个手势参数，当然这里的手势不仅有 点击手势，还有滑动手势等等(具体的手势性能咱们前面会讲到)。多种手势更是满足了咱们更多的交互需要。

多彩文字和点击工夫如下图：

想体验点击事件成果，能够到我的 Github 仓库我的项目里 flutter_app->lib->routes->text_page.dart 运行查看。

DefaultTextStyle是一个非凡的 TextStyle。在 DefaultTextStyle 上面的所有子元素的文本款式都继承了 DefaultTextStyle 设置的文本款式。因而，咱们只须要定义一个 DefaultTextStyle，其下的所有文本款式都是该定义好的DefaultTextStyle 的款式。这样就极大的不便咱们来写一些对立的款式，而不须要每次都要写繁琐的设置款式的代码。

DefaultTextStyle(
  // 设置文本默认款式
  style: TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[Text("DefaultTextStyle"),
      Text("DefaultTextStyle"),
      Text(
        "扭转了的 DefaultTextStyle",
        style: TextStyle(
            inherit: false, // 设置不再继承默认款式
            color: Colors.blue),
      ),
    ],
  ),
);

首先咱们申明了一个 DefaultTextStyle 的款式，它是红色的，字号是 20。
留神: 这里有一个 Text 的inherit设置了 false，只有设置了false 才容许不继承 DefaultTextStyle 的款式。而其余的两个 Text 对象，默认应用了 DefaultTextStyle 的款式。

成果如下：

以上所有的代码都在我的 Github 仓库我的项目里 flutter_app->lib->routes->text_page.dart 外面，你能够下载下来运行并体验。

运行效果图如下：

正文完