乐趣区

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

作者 | 弗拉德
起源 | 弗拉德(公众号:fulade_me)

Text

咱们先来看 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咱们重点介绍上面几个参数:datastyletextAlignmaxLinesoverflow
1. 最简略的示例

  Text("Fulade");

2. 放大和放大

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

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

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

textAlign是地位参数,常见的枚举值有 TextAlign.rightTextAlign.leftTextAlign.center
4. 单行显示

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

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

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

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

以上四种款式成果如下:

TextStyle

如果想要设置更简单的文字款式,咱们须要传入 Textstyle参数,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 枚举。

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

RichText 和 TextSpan

Flutter 反对在一行文字外面显示不同色彩的文字,这里咱们须要用到 RichTextTextSpan

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

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。
留神: 这里有一个 Textinherit设置了 false,只有设置了false 才容许不继承 DefaultTextStyle 的款式。而其余的两个 Text 对象,默认应用了 DefaultTextStyle 的款式。

成果如下:


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

运行效果图如下:


退出移动版